プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

【Xcode】Text FieldをタップしてPickerViewを表示

2014.01.19 日曜日 10:24:32

a0055_000717_m_03
iPhoneのアラームの時間設定等で使われている、ドラムをコロコロ回して選択するタイプのUIをピッカーというそうです。
アラーム以外でも、多くの選択肢から一つを選ぶときには、iOSの各所で見られる、お馴染みのUIだと思います。

そこで、今回は、前回の記事【Xcode】Text Fieldに数字を入力する為の設定に引き続き、テキストフィールドをタップしてPickerViewを表示させる方法を調べました。

こちらサイトの記事が大変わかりやすかった為、今回はこれを元に作成を行うことにしました。
絶対に挫折しないiPhoneアプリ開発入門Part.25 ~UITextFieldでUIPickerViewを出すサンプル~

インスタンス宣言の記述

まず、ViewController.m内の@interface ViewController ()にインスタンス宣言を行います。

@interface ViewController ()<UIPickerViewDelegate,UIPickerViewDataSource,UITextFieldDelegate>
{
    UIPickerView *picker;
}
@property (weak, nonatomic) IBOutlet UITextField *textField;
@property (weak, nonatomic) IBOutlet UIPickerView *pickerView;

@property (weak, nonatomic) IBOutlet UITextField* inputText_2;
@property (strong, nonatomic) IBOutlet UIView* accessoryView;
- (IBAction)inputField;
- (BOOL)textFieldShouldReturn:(UITextField *)textField;

@end

pickerView生成

(void)viewDidLoad内でピッカーの生成を行います。

- (void)viewDidLoad
{
    [super viewDidLoad];
    _inputText_2.returnKeyType = UIReturnKeyDone;
    _inputText_2.delegate = self;
    
    //ピッカー作成
    picker = [[UIPickerView alloc] init];
    picker.frame = CGRectMake(0, 500, 320, 140);
    picker.showsSelectionIndicator = YES;
    picker.delegate = self;
    picker.dataSource = self;
    [self.view addSubview:picker];
    _textField.delegate = self;
}

テキストフィールドをタップした際の処理

続いて、以下の処理を行います。
ここでキーボードの代わりにピッカーの表示を行います。

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
    //テキストフィールドをタップした際にピッカーを表示
    [self showPicker];
    //キーボード非表示
    return NO;
}

ピッカー表示のオンオフを設定

あとは表示と非表示を切り替えた際のアニメーション部分です。
今回、subViewの中にボタンを作成して、決定ボタンにしました。

- (void)showPicker {
	//ピッカー表示にアニメーションを設定
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.2];
	[UIView setAnimationDelegate:self];
	picker.frame = CGRectMake(0, 380, 320, 140);
    picker.backgroundColor = [UIColor whiteColor];

	[UIView commitAnimations];
	
	//決定ボタンを表示
	[self inputPickerClose];
}

//決定ボタン生成
- (void)inputPickerClose {
    _accessoryView =[[UIView alloc] initWithFrame:CGRectMake(0,330,320,50)];
    _accessoryView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:_accessoryView];
    
    // 決定ボタンを作成
    UIButton* closeButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    closeButton.frame = CGRectMake(230,10,100,30);
    [closeButton setTitle:@"決定" forState:UIControlStateNormal];
    // ボタンを押した際の処理
    [closeButton addTarget:self action:@selector(done:) forControlEvents:UIControlEventTouchUpInside];

    // サブビュー作成
    [_accessoryView addSubview:closeButton];   
    _inputText_2.inputAccessoryView = _accessoryView;
}
- (void)done:(id)sender {
	//ピッカーを隠す
	[self hidePicker];
	//決定ボタンを消す
        [_accessoryView removeFromSuperview];
}
- (void)hidePicker {
	//ピッカーを隠す際のアニメーション設定
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.3];
	[UIView setAnimationDelegate:self];
	picker.frame = CGRectMake(0, 620, 320, 210);
	[UIView commitAnimations];
}

アウトレット接続

今回はこのように接続しました。

スクリーンショット 2014-01-19 10.07.27

前回の記事【Xcode】Text Fieldに数字を入力する為の設定と同様、
viewcontroller3とか表示されていますが、気にしないでください。デフォルトであればviewControllerになると思います。

今回のピッカー機能、設定方法で色々応用が利くようです。
行と列を増やす方法、複数設置の方法などありますが、そちらも調べていきたいです。

今回参考にさせて頂いた記事です。ありがとうございます!
絶対に挫折しないiPhoneアプリ開発入門Part.25 ~UITextFieldでUIPickerViewを出すサンプル~

Category:Development , Xcode     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project