[IOS]今天开始学UI---UIPickerView

UIPickerView和UIDatePickerView很类似

也许你会想UIDatePickerView是继承自UIPickerView

但是并非如此UIDatePickerView持有UIPickerView 并对其进行了一些个性化

UIPickerView的效果如下图



由若干个滚轮组成(numberOfRowsInComponent)，每个滚轮都有一些列的条目

便于选择复合选项

要在当前的View中添加UIPickerView则需要遵循其UIPickerViewDataSource, UIPickerViewDelegate两项协议

UIPickerViewDataSource 负责的是构建一个UIPickerView的最基本信息 数据源 (比如多少个滚轮，每个滚轮多少行)

UIPickerViewDelegate 负责的则是UIPickerView视图效果 一些行为操作代理 (比如滚轮的宽度，滚轮上显示的字，是否选中某值)

构建一个UIPickerView需要遵从的最基础协议定义在UIPickerViewDateSource 主要有两个方法需要实现:

@protocol UIPickerViewDataSource<NSObject>
@required

// returns the number of 'columns' to display.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;

// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;
@end

第一个返回多少个滚轮组建，第二个怎时返回每个组建上有多少行

当以上两个方法实现后如果 没有实现UIPickerViewDelegate中的某些个方法 你看的效果嗯 大概就是没有加特技那样

你可以选择性的实现以下中的方法一个

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;
- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;

分别是提供一般的字符，属性字，或者自定义view 到滚轮中的某个row

让他们看起来比较的cooooool

所以代码如下

@interface ViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>
@property (nonatomic,strong) UIPickerView *pickerView;
@property (nonatomic,strong) NSArray *singers;
@property (nonatomic,strong) NSArray *songs;
@property (nonatomic,strong) NSDictionary *dic;
@property (nonatomic,strong) UILabel *currentSelected;
@end

实现两个协议，并持有两个数组用来存放第一个滚轮显示的字符串singers songs dic 则是维系singers 和songs 关系 currentSelected显示当前所选择情况

- (void)viewDidLoad {
[super viewDidLoad];
//init source data
NSString *path=[[NSBundle mainBundle] pathForResource:@"Songs" ofType:@"plist"];
_dic = [NSDictionary dictionaryWithContentsOfFile:path];
_singers = [_dic allKeys];
NSInteger selectedSingerIndex = [self.pickerView selectedRowInComponent:0];
NSString *selectedSinger = [_singers objectAtIndex:selectedSingerIndex];
_songs = [_dic objectForKey:selectedSinger];
_pickerView = [[UIPickerView alloc] init];
_pickerView.center = self.view.center;
_pickerView.dataSource = self;
_pickerView.delegate = self;
self.view.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_pickerView];
_currentSelected = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
_currentSelected.center = CGPointMake(self.view.center.x, self.view.center.y-200);
[_currentSelected setText:[NSString stringWithFormat:@"%@  %@",[_singers objectAtIndex:0],[_songs objectAtIndex:0]]];
[_currentSelected setTextAlignment:NSTextAlignmentCenter];
[self.view addSubview:_currentSelected];

}

初始化数据源 UIPikcerView当前的选中状态
必要实现部分

#pragma mark required method
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 2;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
if (component == 0) {
return  [_singers count];
}else{
return [_songs count];
}
}

共2个滚轮组建 每个组分别有 [_singers count] 和[_songs count] 行

这里滚轮的组建是有编号的 从0开始 每多一个滚轮组建就+1
当构建UIPickerView的Row视图时 传入当前组建滚轮的编号 然后得到该组建的Row 的个数 所以需要判断component是多少

#pragma mark optional method
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
if (component == 0) {
NSString* selectedSinger=[_singers  objectAtIndex:row];
NSArray* array=[_dic objectForKey:selectedSinger];
_songs=array;
//选择指定的item
[self.pickerView selectRow:0 inComponent:1 animated:YES];
//刷新指定列中的行
[self.pickerView reloadComponent:1];

}
[self updateLabel:pickerView];
}

-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
if (component == 0) {
return  [_singers objectAtIndex:row];
}else {
return [_songs objectAtIndex:row];
}
}
#pragma mark self-defined method
-(void)updateLabel:(UIPickerView *)pickerView{
NSInteger singerRow=[pickerView selectedRowInComponent:0];
NSInteger songRow=[pickerView selectedRowInComponent:1];
NSString* selectedSinger=[_singers objectAtIndex:singerRow];
NSString* selectedSong=[_songs objectAtIndex:songRow];
[_currentSelected setText:[NSString stringWithFormat:@"%@  %@",selectedSinger,selectedSong]];
}

这里我们需要根据滚轮0 的选择 来刷新 滚轮 1的状态
而选择滚轮1 的时候不刷新任何状态，所以在
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component；中
仅判断滚轮是否为0
同时刷新数据源 和选择状态

最后调用自定义方法 更新UILabel显示的内容

that's all

thx

Everything you see on Screen is UIView.