UIPickerView

作者: PZcoder | 来源:发表于2016-06-13 21:27 被阅读20102次

    目录:
    1、单个PickerView的使用
    2、两个PickerView联动
    3、PickerView标题显示自定义

    1.单个pickerview的使用

    coding地址:https://coding.net/u/Panzz/p/UIPickerViewDemo/git

    //PickerView是用来展示数据的组件
    
    #import "ViewController.h"
    
    @interface ViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>
    //遵循协议
    @property (nonatomic,strong)UIPickerView * pickerView;//自定义pickerview
    @property (nonatomic,strong)NSArray * letter;//保存要展示的字母
    @property (nonatomic,strong)NSArray * number;//保存要展示的数字
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad
     {
        [super viewDidLoad];
        
        //获取需要展示的数据
        [self loadData];
        
        // 初始化pickerView
        self.pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, 50, self.view.bounds.size.width, 200)];
        [self.view addSubview:self.pickerView];
        
        //指定数据源和委托
        self.pickerView.delegate = self;
        self.pickerView.dataSource = self;
    }
    #pragma mark 加载数据
    -(void)loadData
    {
        //需要展示的数据以数组的形式保存
        self.letter = @[@"aaa",@"bbb",@"ccc",@"ddd"];
        self.number = @[@"111",@"222",@"333",@"444"];
    }
    
    #pragma mark UIPickerView DataSource Method 数据源方法
    
    //指定pickerview有几个表盘
    -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
    {
        return 2;//第一个展示字母、第二个展示数字
    }
    
    //指定每个表盘上有几行数据
    -(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
    {
        NSInteger result = 0;
        switch (component) {
            case 0:
                result = self.letter.count;//根据数组的元素个数返回几行数据
                break;
            case 1:
                result = self.number.count;
                break;
                
            default:
                break;
        }
    
        return result;
    }
    
    #pragma mark UIPickerView Delegate Method 代理方法
    
    //指定每行如何展示数据(此处和tableview类似)
    -(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
    {
        NSString * title = nil;
        switch (component) {
            case 0:
                title = self.letter[row];
                break;
            case 1:
                title = self.number[row];
                break;
            default:
                break;
        }
    
        return title;
    }
    
    
    简单的pickerview效果图(两个pickerview不联动)

    2.两个PickerView联动

    coding地址:https://coding.net/u/Panzz/p/UIPickerViewDemo/git

    @interface T2ViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>//遵循协议
    @property (strong, nonatomic) IBOutlet UIPickerView *pickerView;
    
    //storyboard中拖拽
    @property (nonatomic,strong)NSArray * provinces;//展示省份
    @property (nonatomic,strong)NSArray * cities;//展示城市
    @property (nonatomic,strong)UILabel * label;//展示选中的结果
    
    @end
    
    @implementation T2ViewController
    
    - (void)viewDidLoad 
    {
        [super viewDidLoad];
    
        //加载数据
        [self loadData];
    
        //指定委托
        self.pickerView.delegate = self;
        self.pickerView.dataSource = self;
    }
    
    //加载数据
    -(void)loadData
    {
        NSString * path = [[NSBundle mainBundle]pathForResource:@"area" ofType:@"plist"];
        self.provinces = [NSArray arrayWithContentsOfFile:path];
        self.cities = [NSArray arrayWithArray:self.provinces[0][@"Cities"]];
       
       //label的布局约束
        self.label = [[UILabel alloc]initWithFrame:CGRectZero];
        self.label.translatesAutoresizingMaskIntoConstraints = NO;
        self.label.backgroundColor = [UIColor groupTableViewBackgroundColor];
        self.label.textColor = [UIColor greenColor];
        self.label.font = [UIFont systemFontOfSize:30];
        [self.label setTextAlignment:NSTextAlignmentCenter];
        [self.view addSubview:self.label];
        NSArray * labelTop = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[_pickerView]-30-[_label(50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_pickerView,_label)];
        NSArray * labelH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[_label]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_label)];
        [self.view addConstraints:labelTop];
        [self.view addConstraints:labelH];
    }
    
    //有几个表盘(component)
    -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
    {
        return 2;
    }
    
    //没个表盘有几行数据(rows)
    -(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
    {
        NSInteger rows = 0;
        switch (component) {
            case 0:
                rows = self.provinces.count;//根据plist文件中的数据返回rows
                break;
            case 1:
                rows = self.cities.count;
                break;
            default:
                break;
        }
        return rows;
    }
    
    //每行的标题
    -(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
    {
        NSString * title = nil;
        switch (component) {
            case 0:
                title = self.provinces[row][@"State"];
                break;
            case 1:
                title = self.cities[row][@"city"];
                break;
            default:
                break;
        }
        return title;
    }
    
    //选中时回调的委托方法,在此方法中实现省份和城市间的联动
    -(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
    {
        switch (component) {
            case 0://选中省份表盘时,根据row的值改变城市数组,刷新城市数组,实现联动
                self.cities = self.provinces[row][@"Cities"];
                [self.pickerView reloadComponent:1];
                break;
            case 1:
                self.label.text = [NSString stringWithFormat:@"%@%@",self.provinces[[self.pickerView selectedRowInComponent:0]][@"State"],self.cities[[self.pickerView selectedRowInComponent:1]][@"city"]];//如果选中第二个
                break;
                
            default:
                break;
        }
    }
    
    实现省市之间联动

    3.设置PickerView展示的title样式

    下面介绍自定义pickerview展示的label方法
    (自定义pickerview展示数据的方式label)

    通过自定义返回的label达到自定义pickerview行数据展示方式
    #pragma mark pickerView Method
    - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
    {
        return 1;//表盘数量
    }
    
    //判断是哪个pickerview,返回相应的rows
    - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
    {
        NSInteger rows = 0;
    
        if (pickerView == self.pickerView)
        {
            rows = self.pickerViewArr.count;
        }
        else
        {
            rows = self.pickerViewArr2.count;
        }
    
        return rows;
    }
    
    //判断是哪个pickerview,返回相应的title
    - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
    {
        NSString *str = nil;
    
        if (pickerView == self.pickerView) 
        {
            str = self.pickerViewArr[row];
        }
        else
        {
            str = self.pickerViewArr2[row];
        }
        return str;
    }
    
    #pragma mark 给pickerview设置字体大小和颜色等
    - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
    {
        //可以通过自定义label达到自定义pickerview展示数据的方式
        UILabel* pickerLabel = (UILabel*)view;
    
        if (!pickerLabel)
        {
            pickerLabel = [[UILabel alloc] init];
            pickerLabel.adjustsFontSizeToFitWidth = YES;
            pickerLabel.textAlignment = NSTextAlignmentCenter;
            [pickerLabel setBackgroundColor:[UIColor lightGrayColor]];
            [pickerLabel setFont:[UIFont boldSystemFontOfSize:15]];
        }
    
        pickerLabel.text=[self pickerView:pickerView titleForRow:row forComponent:component];//调用上一个委托方法,获得要展示的title
        return pickerLabel;
    }
    //选中某行后回调的方法,获得选中结果
    - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
    {
        if (pickerView == self.pickerView)
        {
            self.pickerViewSelect = self.pickerViewArr[row];
            NSLog(@"selected == %@",self.pickerViewSelect);
        }
        else
        {
            self.pickerViewSelect2 = self.pickerViewArr2[row];
        }
    }
    

    相关文章

      网友评论

      • Suneday:你就没发现你的pickerView的row倾斜了吗?
      • Sonoface:感谢楼楼,然后我有个小问题。就是如何实现像系统闹钟里,有单位的PickerView?(在计时功能里,选时间的时候。后面的“分钟”,“小时”,这些单位都是固定不动的,而且包含在PickerView中,很疑惑这个是怎么做到的)
        Sonoface:@CoderPan 哈哈,过了好久才看到,谢谢楼楼的回复
        PZcoder:我感觉可以在pickerview的选中位置那里加一个label显示单位,叠加在一起显示,没有亲自试验过,你可以自己试一下。
      • qqqqnnnndddd:获得选中的值

        NSInteger selectedHeightIndex = [self.pickerView selectedRowInComponent:0];
        NSString *seletedHeight = [self.height objectAtIndex:selectedHeightIndex];
        self.heightLabel.text = seletedHeight;

      本文标题:UIPickerView

      本文链接:https://www.haomeiwen.com/subject/xfnydttx.html