絶対に挫折しないiPhoneアプリ開発入門Part.25 ~UITextFieldでUIPickerViewを出すサンプル~
前回:絶対に挫折しないiPhoneアプリ開発入門Part.24 ~Viewを横向きに固定してみよう~
参考記事はこちら:UITextFieldへの入力時にキーボードではなくUIPickerViewを出す方法
テキストフィールドを編集するときにピッカーを出したいと思い調べました。
ソースコードはGitHubからどうぞ(ZIPをクリックしてダウンロードできます)
https://github.com/ics-hiro/iOS_Samples
今回の主役はUITextFieldとUIPickerViewです。UILabelにも表示させてみましたが、これはおまけです。
さて、UITextFieldとUIPickerViewを実装する上でデリゲートがいるので、まずはhファイルにデリゲートを書く。
ViewController.h
#import <UIKit/UIKit.h> @interface ViewController : UIViewController <UIPickerViewDelegate,UIPickerViewDataSource,UITextFieldDelegate> { UIPickerView *picker; } @property (weak, nonatomic) IBOutlet UILabel *label; @property (weak, nonatomic) IBOutlet UITextField *textField; @end
これでmファイルにテキストフィールド関連とピッカー関連のメソッドが書けます。
viewDidLoadの中に、
- (void)viewDidLoad { [super viewDidLoad]; picker = [[UIPickerView alloc] init]; picker.frame = CGRectMake(0, 420, 320, 216); picker.showsSelectionIndicator = YES; picker.delegate = self; picker.dataSource = self; [self.view addSubview:picker]; _textField.delegate = self; }
ピッカーはコードで作りました。
テキストフィールドとラベルはInterfaceBuilderで設置。
UITextFieldでキーボードを表示させない
textFieldShouldBeginEditingメソッドを使います。
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField { //テキストフィールドの編集を始めるときに、ピッカーを呼び出す。 [self showPicker]; //キーボードは表示させない return NO; }
「showPicker」メソッドは次に解説するので今は気にしないでください。
ピッカーを出すためのメソッドです。
キーボードは出さないので、NOを返す。
hファイルでUITextFieldDelegateを書くのを忘れないでくださいね。
Pickerをアニメーションで表示させる
先ほどのメソッドでshowPickerを呼び出しましたね。
その中身は以下のようになります。
- (void)showPicker { //ピッカーが下から出るアニメーション [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.2]; [UIView setAnimationDelegate:self]; picker.frame = CGRectMake(0, 204, 320, 216); [UIView commitAnimations]; //ナビゲーションバーの右上にdoneボタンを設置する if (!self.navigationItem.rightBarButtonItem) { UIBarButtonItem *done = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(done:)]; [self.navigationItem setRightBarButtonItem:done animated:YES]; } }
doneボタンを押したときのメソッド
上のメソッドで、doneボタンを表示させました。
これを押したときには、doneメソッドが実行されます。@selector(done:)の部分です。
- (void)done:(id)sender { //ピッカーをしまう [self hidePicker]; //doneボタンを消す [self.navigationItem setRightBarButtonItem:nil animated:YES]; }
Pickerを再び戻す(表示させない)
上のメソッドで、doneボタンが押されたときにhidePickerメソッドを呼び出すようにしました。
なので、hidePickerメソッドを実行します。
- (void)hidePicker { //ピッカーを下に隠すアニメーション [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.2]; [UIView setAnimationDelegate:self]; picker.frame = CGRectMake(0, 420, 320, 216); [UIView commitAnimations]; }
では、ここからはピッカーの中身を決めて、ラベルやテキストフィールドに表示させるために、
UIPickerViewのデリゲートメソッドを書きます。
hファイルにUIPickerViewDelegate,UIPickerViewDataSourceを書くのを忘れないようにしてください。
【UIPickerView】ピッカーに表示する列数を返す
今回は単純に数字を一個表示させるだけなので、列数は一個。
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 1; }
【UIPickerView】ピッカーに表示する行数を返す
1から100までの数字を表示させるためには、100行いりますよね。
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { return 100; }
【UIPickerView】表示する値を返す
今回は行数をそのまま返している。
rowで行数を表している。行数は整数だから、%dで文字列に変換。
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { return [NSString stringWithFormat:@"%d",row]; }
【UIPickerView】選択時の変更処理
ラベルとテキストフィールドに表示する
- (void) pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { _label.text = [NSString stringWithFormat:@"%d",row]; _textField.text = [NSString stringWithFormat:@"%d",row]; }
という感じです。
ソースコードはGitHubからどうぞ(ZIPをクリックしてダウンロードできます)
https://github.com/ics-hiro/iOS_Samples
これからはどんどんGitHubにあげていきたいと思います。
======================
当ブログ管理人のツイッターはこちら
◎フォローしてくださると泣いて喜びます!ツイッター上で当ブログの質問などにもできるだけお答えしますし、役に立つiPhoneアプリ開発情報もつぶやきます。個人的なご依頼(たとえば、プログラミングの家庭教師、Skypeレッスンをしてくれないか、iPhoneアプリ開発の勉強会ってやってるの、とかですね)でもかまいません。
■スカイプレッスンについて
開発をしているとその都度ぶつかる問題があると思いますが、検索で調べてもなかなかわからない、あるいは調べても非常に時間がかかる場合があると思います。開発者のみなさんもお忙しいと思いますので、私のレッスンを受けながら開発を進めていただけると、大幅にお時間を短縮できます。加えて、iPhoneアプリ開発の基礎、応用が身につき、今後の開発もスムーズに進められます。
お問い合わせはツイッター、またはhiyoshimarukoアットマークgmail.comまでお願いします。(アットマークを@にしてください)お待ちしております!