絶対に挫折しない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までお願いします。（アットマークを@にしてください）お待ちしております！
