UIPickerViewで項目選択UIを使ってみる | ゆぅさんのiPhone開発技術関連ブログ

ゆぅさんのiPhone開発技術関連ブログ

iPhone開発についての技術まわりのことを切り出して書き込みします。

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

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

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

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

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

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

【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



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


クラスの組み込みする。

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;
}



2つぐるぐるを作る
ゆぅさんのiPhone開発技術関連ブログ-その1

項目を選択したとき
ゆぅさんのiPhone開発技術関連ブログ-その2

でーきたドキドキ