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

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

more

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

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

more

VR/360MOVIE

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

more
CONTACT 052-253-9866

【Xcode】PickerViewを1つのビューで2つ〜複数設置する

2014.01.20 月曜日 02:30:04

JS745_hutatudonats_02

今回も続いてPickerViewについてです。
1つの画面の中に、複数設置を行おうと思ったのですが、これが単純に2つ置いただけでは上手く動かず…
ということで、複数設置の方法を調べました。

過去の記事を元に進めますので、よろしければこちらもご覧ください。
【Xcode】Text Fieldに数字を入力する為の設定
【Xcode】Text FieldをタップしてPickerViewを表示

インスタンス宣言の記述

ViewController.m内の@interface ViewController ()への記述です。
2つのピッカーとテキストフィールドに表示させる内容を変数にします。

@interface ViewController ()<UIPickerViewDelegate,UIPickerViewDataSource,UITextFieldDelegate>
{
    UIPickerView *picker1;
    UIPickerView *picker2;
    
    NSString *pic1_str;
    NSString *pic2_str;
}
//ピッカー1と2
@property (strong, nonatomic) IBOutlet UITextField *textField1;
@property (strong, nonatomic) IBOutlet UITextField *textField2;

@end

viewDidLoadへ記述

(void)viewDidLoad内でピッカーの生成を行います。
2つのピッカーにtagで番号を付けて管理します。

- (void)viewDidLoad
{
    _textField1.delegate = self;
    _textField2.delegate = self;
    _textField1.tag = 1;
    _textField2.tag = 2;
    
    picker1 = [[UIPickerView alloc] init];
    picker1.frame = CGRectMake(0, 550, 320, 200);
    picker1.showsSelectionIndicator = YES;
    picker1.delegate = self;
    picker1.dataSource = self;
    picker1.tag = 1;
    [self.view addSubview:picker1];
    
    picker2 = [[UIPickerView alloc] init];
    picker2.frame = CGRectMake(0, 550, 320, 200);
    picker2.showsSelectionIndicator = YES;
    picker2.delegate = self;
    picker2.dataSource = self;
    picker2.tag = 2;
    [self.view addSubview:picker2];
}

タップ後の表示部分

ifでタグ1とタグ2を分岐させて、ピッカーの各種設定を行っています。
値をreturnさせる場合、if分の外に置かないとエラーが出ましたので、気を付けてください。
多分、if文の条件に当てはまらなかった場合、返す値が無くなってしまうからだと思われます。

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
    //テキストフィールドをタップ時にピッカーを表示
   if (textField.tag == 1) {
       NSLog(@"ピッカー1");
       picker2.frame = CGRectMake(0, 550, 320, 200);
       [self showPicker1];
    }
    if (textField.tag == 2) {
        NSLog(@"ピッカー2");
        picker1.frame = CGRectMake(0, 550, 320, 200);
        [self showPicker2];
    }
    //決定ボタン設置
	[self inputPickerClose];
    //キーボードOFF
    return NO;
}

- (void)showPicker1 {
	//picker1を表示
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.2];
	[UIView setAnimationDelegate:self];
	picker1.frame = CGRectMake(0, 380, 320, 200);
	[UIView commitAnimations];
}
- (void)showPicker2 {
	//picker2を表示
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.2];
	[UIView setAnimationDelegate:self];
	picker2.frame = CGRectMake(0, 380, 320, 200);
	[UIView commitAnimations];
}

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    //ピッカーの列数
    int componentsNumber;

    if (pickerView.tag == 1) {
        componentsNumber = 1;
    }
    if (pickerView.tag == 2) {
       componentsNumber = 1;
    }
    return componentsNumber;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    //項目の行数
    int rowsNumber;
    
    if (pickerView.tag == 1) {
        rowsNumber =  10;
    }
    if (pickerView.tag == 2) {
        rowsNumber =  5;
    }
    return rowsNumber;
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    //ピッカー内の表示
    NSString *picComponent;
    if (pickerView.tag == 1) {
        NSArray *arr = [[NSArray alloc] initWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",nil];
        pic1_str = [NSString stringWithFormat:@"%@",[arr objectAtIndex:row]];
        picComponent = pic1_str;
    }
    if (pickerView.tag == 2) {
        NSArray *arr = [[NSArray alloc] initWithObjects:
                        @"ピッカー2の項目1",
                        @"ピッカー2の項目2",
                        @"ピッカー2の項目3",
                        @"ピッカー2の項目4",
                        @"ピッカー2の項目5",nil];
        pic2_str = [NSString stringWithFormat:@"%@",[arr objectAtIndex:row]];
        picComponent = pic2_str;
    }
    return  picComponent;
    
}

- (void) pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    //textfieldへの表示
    if (pickerView.tag == 1) {
        NSArray *arr = [[NSArray alloc] initWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",nil];
        pic1_str = [NSString stringWithFormat:@"%@",[arr objectAtIndex:row]];
        _textField1.text = pic1_str;
    }
    if (pickerView.tag == 2) {
        NSArray *arr = [[NSArray alloc] initWithObjects:
                        @"ピッカー2の項目1",
                        @"ピッカー2の項目2",
                        @"ピッカー2の項目3",
                        @"ピッカー2の項目4",
                        @"ピッカー2の項目5",nil];
        pic2_str = [NSString stringWithFormat:@"%@",[arr objectAtIndex:row]];
        _textField2.text = pic2_str;
    }
}

決定ボタン&アニメーション部分作成

ここはほぼ前回の記事と同様です。
ピッカー2つぶんの記述を行っています。

//ピッカー選択肢決定ボタン生成
- (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];
}

- (void)done:(id)sender {
	//ピッカーを隠す
	[self hidePicker1];
	[self hidePicker2];
	
	//決定ボタンを消す
    [_accessoryView removeFromSuperview];
}
- (void)hidePicker1 {
	//ピッカーを下に隠すアニメーション
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.2];
	[UIView setAnimationDelegate:self];
    picker1.frame = CGRectMake(0, 720, 320, 200);
	[UIView commitAnimations];
}
- (void)hidePicker2 {
	//ピッカーを下に隠すアニメーション
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.2];
	[UIView setAnimationDelegate:self];
    picker2.frame = CGRectMake(0, 720, 320, 200);
	[UIView commitAnimations];
}

storyboard側

storyboardにはTextFieldを2つ置いて、接続を行います。
Referencing Outletsの
TextField1とView Controller
TextField2とView Controller
をそれぞれのTextFieldに接続して、終了です。

結構長い記述になってしまいました…
でもここまで組めば、ピッカーの増減は簡単に出来そうですね。

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

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

田中 義弘

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

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