このセクションでは、iOS アプリケーションにいくつかの XuniMaskedTextField コントロールを追加して、4 つの入力フィールド（ID、誕生日、電話番号、都道府県）を指定する方法について説明します。［ID］入力フィールドはハイフンで区切られた 9 桁の数字を、［誕生日］フィールドは mm/dd/yyyy 形式の日付を、［電話番号］フィールドは局番を含む 10 桁の数字を、［都道府県］フィールドは都道府県の郵便番号の短縮形を受け取ります。
XuniMaskedTextField コントロールを使用して 4 つの入力フィールドを初期化するには、次の手順を実行します。
次の図は、上記の手順を実行して構成された入力フィールドを示しています。
手順 1：XuniMaskedTextField コントロールを追加して 4 つの入力フィールドを表示
Objective-C で XuniMaskedTextField コントロールを初期化するには、次の手順を実行します。
- XCode で新しい iOS アプリケーションを作成します（詳細については「新しい iOS アプリの作成」を参照）。
- Project Navigator で、ViewController.m ファイルを開き、次の import 文を追加します。
import XuniInputKit#import "XuniInputKit/XuniInputKit.h"using Xuni.iOS.Input; - viewDidLoad メソッドに次のコードを追加して、4 つの XuniMaskedTextField コントロールを対応する UILabel と共に初期化し、XuniMaskedTextField ごとに mask プロパティを設定します。
class MaskedInputController: UIViewController { var maskedID = XuniMaskedTextField() var maskedDOB = XuniMaskedTextField() var maskedPhone = XuniMaskedTextField() var maskedState = XuniMaskedTextField() var idLabel = UILabel() var dobLabel = UILabel() var phoneLabel = UILabel() var stateLabel = UILabel() override func viewDidLoad() { super.viewDidLoad() self.maskedID.mask = "000-00-0000" self.maskedDOB.mask = "0000/90/90" self.maskedPhone.mask = "(999) 000-0000" self.maskedState.mask = "LL" idLabel.text = "ID" dobLabel.text = "DOB" phoneLabel.text = "電話番号：" stateLabel.text = "国：" self.view.addSubview(idLabel) self.view.addSubview(maskedID) self.view.addSubview(dobLabel) self.view.addSubview(maskedDOB) self.view.addSubview(phoneLabel) self.view.addSubview(maskedPhone) self.view.addSubview(stateLabel) self.view.addSubview(maskedState) } }@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; XuniMaskedTextField *field1= [[XuniMaskedTextField alloc] initWithFrame:CGRectZero]; field1.tag = 1; field1.mask = @"000-00-0000"; UILabel *label1 = [[UILabel alloc] initWithFrame: CGRectZero]; label1.tag = 2; label1.text = @"ID:"; UILabel *label2 = [[UILabel alloc] initWithFrame: CGRectZero]; label2.tag = 3; label2.text = @"DOB:"; XuniMaskedTextField *field2= [[XuniMaskedTextField alloc] initWithFrame:CGRectZero]; field2.tag = 4; field2.mask = @"0000/90/90"; UILabel *label3 = [[UILabel alloc] initWithFrame: CGRectZero]; label3.tag = 5; label3.text = @"電話番号:"; XuniMaskedTextField *field3 = [[XuniMaskedTextField alloc] initWithFrame:CGRectZero]; field3.tag = 6; field3.mask = @"(999)000-0000"; UILabel *label4 = [[UILabel alloc] initWithFrame:CGRectZero]; label4.tag = 7; label4.text = @"国:"; XuniMaskedTextField *field4 = [[XuniMaskedTextField alloc] initWithFrame:CGRectZero]; field4.tag = 8; field4.mask = @"LL"; [self.view addSubview:field1]; [self.view addSubview:label1]; [self.view addSubview:label2]; [self.view addSubview:field2]; [self.view addSubview:label3]; [self.view addSubview:field3]; [self.view addSubview:label4]; [self.view addSubview:field4]; }public override void ViewDidLoad() { base.ViewDidLoad(); // ビューを読み込んだ後の追加セットアップを行います（通常は nib から）。 //ライセンスの設定 Xuni.iOS.Core.XuniLicenseManager.Key = License.Key; // 4つのInputコントロールについて、見出しとFrameも含めて // すべてを順番に設定 var mask1 = new CreateInput().getMaskedInput("000-00-0000"); var label1 = new UILabel { Text = "ID:" }; label1.Frame = new CoreGraphics.CGRect(50, 400, 100, 30); mask1.Frame = new CoreGraphics.CGRect(150, 400, View.Bounds.Width - 250, 30); View.AddSubview(label1); View.AddSubview(mask1); var mask2 = new CreateInput().getMaskedInput("0000/90/90"); var label2 = new UILabel { Text = "DOB:" }; label2.Frame = new CoreGraphics.CGRect(50, 450, 100, 30); mask2.Frame = new CoreGraphics.CGRect(150, 450, View.Bounds.Width - 250, 30); View.AddSubview(label2); View.AddSubview(mask2); var mask3= new CreateInput().getMaskedInput("(999)000-0000"); var label3 = new UILabel { Text = "電話番号:" }; label3.Frame = new CoreGraphics.CGRect(50, 500, 100, 30); mask3.Frame = new CoreGraphics.CGRect(150, 500, View.Bounds.Width - 250, 30); View.AddSubview(label3); View.AddSubview(mask3); var mask4 = new CreateInput().getMaskedInput("LL"); var label4 = new UILabel { Text = "国:" }; label4.Frame = new CoreGraphics.CGRect(50, 550, 100, 30); mask4.Frame = new CoreGraphics.CGRect(150, 550, View.Bounds.Width - 250, 30); View.AddSubview(label4); View.AddSubview(mask4); } public class CreateInput { // マスク文字を引数にしてコントロールを生成するメソッド public XuniMaskedTextField getMaskedInput(string mask) { var maskedInput = new XuniMaskedTextField(); maskedInput.Mask = mask; return maskedInput; } } - 次のコードを viewDidLayoutSubviews メソッドに追加して、上の手順で初期化された XuniMaskedTextField と UILabel のフレームを設定します。
override func viewDidLayoutSubviews(){ super.viewDidLayoutSubviews() idLabel.frame = CGRectMake(15, 70, 200, 30) maskedID.frame = CGRectMake(15, 110, 200, 30) dobLabel.frame = CGRectMake(15, 150, 200, 30) maskedDOB.frame = CGRectMake(15, 190, 200, 30) phoneLabel.frame = CGRectMake(15, 230, 200, 30) maskedPhone.frame = CGRectMake(15, 270, 200, 30) stateLabel.frame = CGRectMake(15, 310, 200, 30) maskedState.frame = CGRectMake(15, 340, 200, 30) }- (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; //CGSize size = self.view.bounds.size; //CGFloat width = fminf(size.width, size.height); XuniMaskedTextField *field1 = (XuniMaskedTextField *)[self.view viewWithTag:1]; field1.frame = CGRectMake(200, 100, 100, 30); UILabel *label1 = (UILabel *)[self.view viewWithTag:2]; label1.frame = CGRectMake(35, 100, 50, 30); UILabel *label2 = (UILabel *)[self.view viewWithTag:3]; label2.frame = CGRectMake(35, 150, 50, 30); XuniMaskedTextField *field2 = (XuniMaskedTextField *)[self.view viewWithTag:4]; field2.frame = CGRectMake(200, 150, 100, 30); UILabel *label3 = (UILabel *)[self.view viewWithTag:5]; label3.frame = CGRectMake(35, 200, 100, 30); XuniMaskedTextField *field3 = (XuniMaskedTextField *)[self.view viewWithTag:6]; field3.frame = CGRectMake(200, 200, 150, 30); UILabel *label4 = (UILabel *)[self.view viewWithTag:7]; label4.frame = CGRectMake(35, 250, 100, 30); XuniMaskedTextField *field4 = (XuniMaskedTextField *)[self.view viewWithTag:8]; field4.frame = CGRectMake(200, 250, 50, 30);
手順 2：プロジェクトの実行
Command-R を押してアプリケーションを実行します。