UIPickerViewで項目選択ＵＩを使ってみる

今回はUIPickerViewでいくつかの項目から１つ選ぶインターフェースを使ってみる

UIPickerViewはいくつかの選択項目の中から１つを選択するためのインターフェースを作れる。
立体的にぐるぐるまわせるいかにもスマホっぽいインターフェース。
正直言うともうちょっとシンプルになんないかなぁ、って思うのだけど。。。

UITableViewと同じように、UIPickerViewDelegateとUIPickerViewDataSource
を定義してデータの定義と、選択したときの挙動を定義する。

【UIPickerViewDataSource】
データの定義をする

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
横にいくつのぐるぐるを並べるかを決める

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
１つ１つのぐるぐるごとに項目の個数を決める

【UIPickerViewDelegate】
押した時の挙動と項目の表示の制御

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
項目のラベルを返す

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
選んだときの挙動にやってほしいことを書く


とりあえず、これだけあれば使える。

サンプルクラスはこんな感じ

サンプルクラスMyPicker

@interface MyPicker:UIPickerView{
    
}
@end


@implementation MyPicker

- (id)init{
    self = [super init];
    self.delegate = self;
    self.dataSource = self;
    self.showsSelectionIndicator = TRUE;
    return self;
}

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 2;
    
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    if (component == 0){
        return 2;
    }
    else{
        return 5;
    }
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    NSString* label;
    if (component == 0){
        label = [NSString stringWithFormat:@"label0-%d", row];
    }
    else{
        label = [NSString stringWithFormat:@"label1-%d", row];
    }
    return label;
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    NSString* label;
    if (component == 0){
        label = [NSString stringWithFormat:@"label0-%d", row];
    }
    else{
        label = [NSString stringWithFormat:@"label1-%d", row];
    }
    UIAlertView* al = [[UIAlertView alloc] initWithTitle:@"picker view" message:label delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [al show];
    
}
@end

よこに２つのぐるぐるを並べて
左はlabel0-0,label0-1の２つ
右はlabel1-0～4の５つ
の項目を作る。
項目を選んだときのダイアログが表示されて項目を表示する。


クラスの組み込みする。

AppDelegateに組み込み

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    
    UIView* oya = [[UIView alloc]init];
    oya.frame = CGRectMake(0, 0, 320, 480);
    MyPicker* picker = [[MyPicker alloc]init];
    picker.center = CGPointMake(160, 230);
    [oya addSubview:picker];
    
    UIViewController* vc = [[UIViewController alloc]init];
    vc.view = oya;
    [self.window setRootViewController:vc];
        
    
    [self.window makeKeyAndVisible];
    return YES;
}

２つぐるぐるを作る


項目を選択したとき


でーきた