Xamarin iOS教程之顯示和編輯文字

Xamarin iOS顯示和編輯文字

在一個應用程式中，文字是非常重要的。它就是這些不會說話的裝置的嘴巴。通過這些文字，可以很清楚的指定這些應用程式要表達的資訊。以下將為開發者介紹3種關於文字的檢視。

Xamarin iOS標籤檢視

標籤檢視（一般使用UILabel類實現）一般用於在應用程式中為使用者顯示少量的資訊。

【示例2-13】以下就是通過標籤檢視為開發者顯示一首詩的效果。具體步驟如下：

（1）建立一個Single View Application型別的工程，命名為2-20。

（2）新增影像1.jpg到建立工程的Resources資料夾中。

（3）開啟MainStoryboard.storyboard檔案，對主檢視進行設定。效果如圖2.26所示。

圖2.26 主檢視的效果

需要新增的檢視以及設定如表2-6所示。

表2-6 設定主檢視

（4）開啟2-20ViewController.cs檔案，編寫程式碼，實現為主檢視新增標籤的功能。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __20ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
UILabel label1 = new UILabel ();
label1.Frame = new RectangleF (2, 410, 155, 28);
label1.TextAlignment = UITextAlignment.Center; //設定標籤文字內容的對其方式
label1.Text = "碧玉妝成一樹高,"; //設定標籤的文字內容
this.View.AddSubview (label1);
……
UILabel label4 = new UILabel ();
label4.Frame = new RectangleF (2, 500, 155, 28);
label4.TextAlignment = UITextAlignment.Center;
label4.Text = "二月春風似剪刀.";
this.View.AddSubview (label4);
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖2.27所示。

圖2.27 執行效果

注意：在此程式中，使用了TextAlignment屬性設定了文字在標籤中的對齊方式。使用Text屬性設定了標籤中顯示的文字。標籤檢視預設是顯示一行的，但是，也可以將標籤的內容顯示為多行。

【示例2-14】以下將在一個標籤中顯示3行文字內容。具體步驟如下：

（1）建立一個Single View Application型別的工程，命名為2-23。

（2）新增影像1.jpg到建立工程的Resources資料夾中。

（3）開啟MainStoryboard.storyboard檔案，從工具欄中拖動Image View影像檢視到主檢視中，將此檢視的Image屬性設定為1.jpg。

（4）開啟2-23ViewController.cs檔案，編寫程式碼，實現標籤多行顯示的功能。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __23ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
UILabel label = new UILabel ();
label.Frame = new RectangleF (20, 100, 280, 64);
label.Text = " 如何讓你遇見我，在我最美麗的時刻。為這，我已在佛前求了五百年，求他讓我們結一段塵緣。";
label.Lines = 3; //設定顯示文字的行數
this.View.AddSubview (label);
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖2.28所示。

圖2.28 執行效果

當標籤中的內容過多時，開發者可以對標籤中顯示的內容進行省略，即可以設定內容顯示的格式。在Xamarin中有6種風格，如表2-7所示。

表2-7 內容顯示的格式

對於內容顯示格式的設定需要使用到LineBreakMode屬性。

【示例2-15】下面將使用LineBreakMode屬性讓在標籤中顯示的內容截去中間部分。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __33ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
UILabel label = new UILabel ();
label.Frame = new RectangleF (20, 100, 280, 64);
label.Text = " 如何讓你遇見我，在我最美麗的時刻。為這，我已在佛前求了五百年，求他讓我們結一段塵緣。";
label.LineBreakMode = UILineBreakMode.MiddleTruncation; //設定內容顯示的格式
this.View.AddSubview (label);
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

此時執行程式，會看到如圖2.29所示的效果。

圖2.29 執行效果

Xamarin iOS文字框檢視

與標籤檢視不同，文字框檢視（一般使用UITextField類實現）可以接收使用者的文字輸入，並進行顯示。

【示例2-16】以下將使用文字框來實現QQ登入介面的效果。具體步驟如下：

（1）建立一個Single View Application型別的工程，命名為2-5

（2）開啟MainStoryboard.storyboard檔案，對主檢視進行設定。效果如圖2.30所示。

圖2.30 主檢視

需要新增的檢視以及設定如表2-8所示。

表2-8 設定主檢視

（3）開啟2-5ViewController.cs檔案，編寫程式碼，實現QQ登入介面的功能。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __5ViewController : UIViewController
{
UITextField tf1;
UITextField tf2;
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
//為主檢視新增文字框物件tf1
tf1 = new UITextField ();
tf1.BorderStyle = UITextBorderStyle.RoundedRect; //設定文字框的邊框
tf1.Frame = new RectangleF (54, 150, 211, 30);
tf1.Placeholder="賬號"; //設定文字框的佔位符
this.View.AddSubview (tf1);
//為主檢視新增文字框物件tf2
tf2 = new UITextField ();
tf2.BorderStyle = UITextBorderStyle.RoundedRect;
tf2.Frame = new RectangleF (54, 220, 211, 30);
tf2.Placeholder="密碼";
tf2.SecureTextEntry = true; //設定文字框的文字是否隱藏
this.View.AddSubview (tf2);
button.TouchUpInside += this.ButtonChange_TouchUpInside;
label.Hidden = true;
}
//觸控“登入”按鈕後，執行的動作
private void ButtonChange_TouchUpInside (object sender, EventArgs e)
{
//判斷文字框物件tf1和tf2是否為空
if (tf1.Text.Length != 0 && tf2.Text.Length != 0) {
this.View.BackgroundColor = UIColor.Orange;
label.Hidden = true;
} else {
label.Hidden = false;
}
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖2.31所示。

圖2.31 執行效果

注意：在此程式中，使用了BorderStyle屬性對文字框的邊框風格進行了設定。這些邊框風格如表2-9所示。

表2-9 邊框風格

SecureTextEntry屬性可以使編輯的文字隱藏，以小黑點的形式顯示。此屬性一般使用在輸入密碼時，防止被他人盜取。

Xamarin iOS文字框檢視使用技巧——限制文字框的輸入長度

限制文字框的輸入長度在輸入手機號碼、銀行卡號碼的應用程式中最常使用。限制文字框的輸入長度需要使用ShouldChangeCharacters()方法實現。

【示例2-17】下面將只允許使用者在文字框中輸入10個字元。具體的操作步驟如下：

（1）建立一個Single View Application型別的工程，命名為2-34。

（2）開啟MainStoryboard.storyboard檔案，拖動檢視庫中的文字框檢視物件到主檢視中，將此檢視物件的Name設定為tf。

（3）開啟2-34ViewController.cs檔案，編寫程式碼，實現限制文字框的輸入長度的功能。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __34ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
tf.ShouldChangeCharacters = (textField, range, replacementString) => {
if (range.Location < 10) {
return true;
} else {
return false;
}
};
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

此時執行程式，會看到如圖2.32所示的效果。

圖2.32 執行效果

注意：在此應用程式中使用者只可以輸入10個字串。

Xamarin iOS文字檢視

文字框檢視只允許使用者輸入單行文字，如果想要輸入多行文字該怎麼辦呢？這就需要使用文字檢視解決。UITextView類提供了一個顯示文字編輯塊的方式。

【示例2-18】以下就是使用文字檢視實現多行文字的輸入。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __6ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
//為主檢視新增文字檢視物件myTextView
UITextView myTextView = new UITextView ();
myTextView .Frame = new RectangleF (9, 90, 302, 180);
this.View.AddSubview (myTextView);
//為主檢視新增文字檢視物件myText
UITextView myText = new UITextView ();
myText .Frame = new RectangleF (9, 330, 302, 180);
myText.Editable=false;
this.View.AddSubview (myText);
myText.Hidden = true;
//為主檢視新增按鈕物件button
UIButton button = new UIButton ();
button.Frame = new RectangleF (137, 56, 46, 30);
button.SetTitle ("完成", UIControlState.Normal);
this.View.AddSubview (button);
button.TouchUpInside += (sender, e) => {
myTextView.ResignFirstResponder(); //關閉鍵盤
myText.Hidden=false;
myText.Text=myTextView.Text;
} ;
myTextView.Delegate = new MyTextViewDelegate(); //設定委託
}
//新增巢狀的類
private class MyTextViewDelegate : UITextViewDelegate
{
//當文字檢視剛開始編輯時呼叫
public override void EditingStarted (UITextView textView)
{
Console.WriteLine ("開始編輯文字");
}
//當文字檢視編輯結束時呼叫
public override void EditingEnded (UITextView textView)
{
Console.WriteLine ("結束編輯文字");
}
//當文字檢視中的內容改變時呼叫
public override void Changed (UITextView textView)
{
Console.WriteLine ("編輯文字");
}
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖2.33所示。

圖2.33 執行效果

在此示例中，需要注意兩點：

1.鍵盤的消失

當使用者觸控文字檢視區域時，就會顯示鍵盤；當觸控“完成”按鈕後，顯示的鍵盤就會消失。讓鍵盤消失的方式其實很簡單，就是使用ResignFirstResponder()方法取消當前的檢視的第一響應功能。

2.文字檢視的委託

當使用者觸控文字框檢視時，會在應用程式輸出視窗輸出“開始編輯文字”；當文字的內容有所改變時，會在應用程式輸出視窗輸出“編輯文字”；當觸控按鈕後，會輸出“結束文字編輯”。這些功能的實現就是通過了設定文字檢視的委託delegate實現的。我們將文字檢視的委託設定為了MyTextViewDelegate類，此類繼承了UITextViewDelegate類。如以下的程式碼

private class MyTextViewDelegate : UITextViewDelegate
{
……
}

在MyTextViewDelegate類中重寫了父類UITextViewDelegate中的方法EditingStarted()、EditingEnded()、Changed()，實現了在應用程式輸出視窗的字串輸出。

本文選自：Xamarin iOS開發實戰大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29597077/viewspace-1702778/，如需轉載，請註明出處，否則將追究法律責任。

Xamarin iOS教程之顯示和編輯文字