UIKit框架-高级控件:8.UIPickerView, UILabel, UIImageView结合使用

在前面, 我们深扒了UIPickerView, 知道了它是怎么一回事, 现在我们利用我们所学的知识, 再加上另外的控件结合在一起来使用:

1.在.h文件中遵守UIPickerView的代理方法和数据源方法

@interface ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource>

@end

2.在.h文件中设置全局变量

<span style="font-size:12px;">@interface ViewController ()
{
    NSArray *_dataList;
    UILabel *_label;
}
@end
</span>

PS:该NSArray全局变量是用来存储plist文件内容所设置的, 如果不是必要, 那就不要随便设置.

3.实例化UIPickerView

- (void)myPickerView
{
    // 1.实例化UIPickerView
    UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 300)];
    
    // 2.设置背景颜色
    [pickerView setBackgroundColor:[UIColor grayColor]];
    
    // 3.设置UIPickerView的代理和数据源
    [pickerView setDelegate:self];
    [pickerView setDataSource:self];
    
    // 4.加载选择器的数据源
    // 4.1添加路径
    NSString *path = [[NSBundle mainBundle] pathForResource:@"flags" ofType:@"plist"];
    // 4.2加载到数组
    _dataList = [NSArray arrayWithContentsOfFile:path];

    NSLog(@"%@", _dataList);
    
    [pickerView setShowsSelectionIndicator:YES];
    
    // 添加到self.view
    [self.view addSubview:pickerView];
}

4.实例化UILabel

- (void)myLabel
{
    _label = [[UILabel alloc] init];
    [_label setCenter:CGPointMake(self.view.frame.size.width / 2, 100)];
    [_label setBounds:CGRectMake(0, 0, self.view.frame.size.width / 2, 30)];
}

5.设置UIPickerView数据源方法

#pragma mark 设置数据的列数
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

#pragma mark 设置数据的行数
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return _dataList.count;
}

6.设置UIPickerView的代理方法

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    // 定义大小
    NSInteger viewHeight = 60;
    NSInteger labelWidth = 80;
    NSInteger viewWidth = 280;
    
    // 1.实例化一个UIVIew
    UIView *flagsView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, viewWidth, viewHeight)];
    [flagsView setBackgroundColor:[UIColor whiteColor]];
    
    // 1.1取出数组中对应的数据字典
    NSDictionary *dic = _dataList[row];

    // 2.实例化一个UILabel
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, labelWidth, viewHeight)];
    // 2.1设置Label的text
    [label setText:dic[@"name"]];
    
    // 2.2设置Label的对齐方式, 这里选择的是居中对齐
    [label setTextAlignment:NSTextAlignmentCenter];
    // 2.3把Label添加到flagsView中.
    [flagsView addSubview:label];
    
    
    // 3.添加UIImageView
    // 3.1设置image
    UIImage *image = [UIImage imageNamed:dic[@"icon"]];
    
    // 3.2设置imageView
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    [imageView setFrame:CGRectMake(labelWidth, 0, viewWidth - labelWidth, viewHeight)];
    
    //3.3把imageView添加到flagsView中
    [flagsView addSubview:imageView];
    return flagsView;
}

7.设置选中内容的UIPickerView方法

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    NSDictionary *dic = _dataList[row];
    NSString *selectFlags = [NSString stringWithFormat:@"选中的国家是: %@", dic[@"name"]];
    
    [_label setText:selectFlags];
    
    [self.view addSubview:_label];
    NSLog(@"%@", selectFlags);
}

8.设置选中框的行高

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
{
    return 60;
}

9.在viewDidLoad中实现所有的方法

<span style="font-size:12px;">- (void)viewDidLoad {
    [super viewDidLoad];
    [self myPickerView];
    [self myLabel];
}
</span>

最终效果: