読者です 読者をやめる 読者になる 読者になる

SIN@SAPPOROWORKSの覚書

C#を中心に、夜な夜な試行錯誤したコードの記録です。

【XamarinによるiOS超入門 】 テキストフィールド (UITextField)

【 Xamarin 記事一覧 】 【XamarinによるiOS超入門 】

1 コントロールの配置

f:id:furuya02:20150207100548p:plain:w200:left
テキストフィールドコントロールは、1行の短いテキスト入力が必要な時に使用されます。



このコントロールを配置する基本的なコードは次のとおりです。
(デフォルトでバックカラーが白なため、背景と区別がつかないので、枠線を表示しました。)

public override void ViewDidLoad() {
    base.ViewDidLoad();

    var textField = new UITextField(new RectangleF(10, 50, 300, 40)) {
        BorderStyle = UITextBorderStyle.RoundedRect, //枠線
        ClearButtonMode = UITextFieldViewMode.Always //常にクリアボタンを表示する
    };

    //ビューに追加
    Add(textField);
}

2 外観

次のプロパティでコントロールの外観を変更できます。
f:id:furuya02:20150207100604p:plain:w400
ストーリーボードでも、「Text Field」で変更可能です。
f:id:furuya02:20150207100609p:plain

3 プレースホルダ

Placeholderプロパティでプレースホルダを指定できます。

 textField.Placeholder = "ここに入力してください";

f:id:furuya02:20150214025151p:plain

ストーリーボードでは、「Placeholder」を使用します。
f:id:furuya02:20150214024805p:plain

4 クリアボタン

ClearButtonModeプロパティでクリアボタンの表示を制御できます。

f:id:furuya02:20150214030406p:plain

UITextFieldViewMode.Always // 常に表示する
UITextFieldViewMode.Never // 表示しない
UITextFieldViewMode.UnlessEditing // フォーカスが当たっていない時のみ表示する
UITextFieldViewMode.WhileEditing // フォーカスが当たっている時のみ表示する

また、ClearsOnBeginEditingプロパティでテキスト編集開始時に、既存の内容を自動的にクリアするかどうか設定することができます。

ストーリーボードでは、「Clear Button]を使用します。
f:id:furuya02:20150214025805p:plain

5 キーボード

KeyboardTypeプロパティで入力時に表示するキーボードを指定できます。

f:id:furuya02:20150214032150p:plain

UIKeyboardType.ASCIICapable //英字
UIKeyboardType.DecimalPad //少数
UIKeyboardType.Default //デフォルト
UIKeyboardType.EmailAddress
UIKeyboardType.NamePhonePad
UIKeyboardType.NumberPad //テンキー
UIKeyboardType.NumbersAndPunctuation //数字・記号
UIKeyboardType.PhonePad //電話番号
UIKeyboardType.Twitter
UIKeyboardType.Url
UIKeyboardType.WebSearch

ストーリーボードでは、「Keyboard Type]で指定します。
f:id:furuya02:20150214033603p:plain

6 Returnキー

ReturnKeyTypeプロパティでReturnキーの表示を指定できます。

//Returnキーを「Search」と表示する
textField.ReturnKeyType = UIReturnKeyType.Google;

f:id:furuya02:20150214034346p:plain:w200

指定できる種類は、下記のとおりです。

UIReturnKeyType.Default
UIReturnKeyType.Done
UIReturnKeyType.EmergencyCall
UIReturnKeyType.Go
UIReturnKeyType.Google
UIReturnKeyType.Join
UIReturnKeyType.Next
UIReturnKeyType.Route
UIReturnKeyType.Search
UIReturnKeyType.Send
UIReturnKeyType.Yahoo

ストーリーボードでは、「Return Key]で指定します。
f:id:furuya02:20150214034809p:plain

7 枠線

BorderStyleプロパティで枠線の種類を変更できます。
f:id:furuya02:20150207100615p:plain

実際の表示は、次のようになります。
f:id:furuya02:20150207100619p:plain:w400

ストーリーボードでは、「Border Style」を使用します。
f:id:furuya02:20150207100626p:plain

8 背景画像

背景画像を指定することができます。背景は、コントロールがEnableの時と、Diableの時の2種類が指定できます。

textField.Background = UIImage.FromFile("back.png");
textField.DisabledBackground = UIImage.FromFile("back2.png"); 

なお、BorderStyleがNone以外では、背景画像は表示できません。また、コントロールのEnableやBorderStyleを変更しただけでは、画像が変更されません。従ってBorderStyleやEnableが変化した時点で、再度、Background/DisabledBackgroundを指定する必要があります。
ストーリーボードでは、「Background」「Disabled」を使用します。
f:id:furuya02:20150207100635p:plain

9 イベント

各種のイベントが処理可能ですが、下記のようなものが、よく使用される事になるでしょう。

・Started フォーカスが入ったとき
・Ended フォーカスが抜けたとき
・EditingChanged テキストが編集されたとき
・EditingDidEndOnExit 編集終了(このイベントを処理すると、Returnキーを押したとき、フォーカスが外れてキーボードが非表示になる)

textField.Started += (sender, args) => {
    Console.WriteLine("編集開始");
};
textField.EditingChanged += (sender, args) => {
    Console.WriteLine("テキストの変更");
};
textField.EditingDidEndOnExit += (sender, args) => {
    Console.WriteLine("Returnキーによる編集終了");
};
textField.Ended += (sender, args) => {
    Console.WriteLine("編集終了");
};

ストーリーボードでは、次のイベントが公開されている。
f:id:furuya02:20150207100648p:plain

10 ソフトウエアキーボードを隠す

編集が終わった時に、キーボードを隠すには、次のような方法があります。

フォーカスが外れたらキーボードを消す

textField.EditingDidEndOnExit += (s, e) => {
    View.EndEditing(true);
};

リターンキーが押されたらキーボードを消す

textField.ShouldReturn += t => {
    t.ResignFirstResponder();
    return true;
};

11 参考にさせて頂いたページ

iOS 7 から始める UIKit 入門 コントロール編 #6 Text Field | Developers.IO
UIKit User Interface Catalog: Text Fields
Part 3 - Basic Text Input | Xamarin
UITextField - iPhoneアプリ開発の虎の巻


【 Xamarin 記事一覧 】 【XamarinによるiOS超入門 】