手把手教你如何自定义一个UIPickerView

前言

• 写项目时，产品希望实现一个在运动里自定义运动时间的界面 3317EFAC-4731-47ED-B326-373D5A50544C
• 天大地大产品最大，因为之前也对其他UI控件有所了解，所以我一下子锁定了UIDatePicker，可大概写了一个上去后发现原来还有更初级的UIViewPicker可以利用

参考文章

• iOSUIPickerView使用

Demo 地址

• custom-UIPickerView

代码详解

//
//  ViewController.h
//  custom-UIPickerView-Demo
//
//  Created by mac on 2019/4/9.
//  Copyright © 2019 姜凯文. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIPickerViewDelegate, UIPickerViewDataSource> {
    NSArray *_nameArray;
}

@property (strong, nonatomic) UIPickerView *pickerView;


@end

//
//  ViewController.m
//  custom-UIPickerView-Demo
//
//  Created by mac on 2019/4/9.
//  Copyright © 2019 姜凯文. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.view.backgroundColor = [UIColor groupTableViewBackgroundColor];
    
    
    
    self.pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 162)];
    
    self.pickerView.backgroundColor = [UIColor whiteColor];
    
    self.pickerView.delegate = self;
    
    self.pickerView.dataSource = self;
    
    [self.view addSubview:self.pickerView];
    
    
    
    [self.pickerView reloadAllComponents];//刷新UIPickerView
    
    
    
    _nameArray = [NSArray arrayWithObjects:@"北京",@"上海",@"广州",@"深圳",@"重庆",@"武汉",@"天津",nil];
    
}

#pragma mark pickerview function



//返回有几列

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView

{
    
    return 3;
    
}

//返回指定列的行数

-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component

{
    
    if (component==0) {
        
        return  1;
        
    } else if(component==1){
        
        
        
        return  [_nameArray count];
        
    }
    
    return [_nameArray count];
    
}

//返回指定列，行的高度，就是自定义行的高度

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

//返回指定列的宽度

- (CGFloat) pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    
    if (component==0) {//iOS6边框占10+10
        
        return  self.view.frame.size.width/3;
        
    } else if(component==1){
        
        return  self.view.frame.size.width/3;
        
    }
    
    return  self.view.frame.size.width/3;
    
}



// 自定义指定列的每行的视图，即指定列的每行的视图行为一致

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
    
    if (!view){
        
        view = [[UIView alloc]init];
        
    }
    
    UILabel *text = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width/3, 20)];
    
    text.textAlignment = NSTextAlignmentCenter;
    
    text.text = [_nameArray objectAtIndex:row];
    
    [view addSubview:text];
    
    //隐藏上下直线
    
    [self.pickerView.subviews objectAtIndex:1].backgroundColor = [UIColor clearColor];
    
    [self.pickerView.subviews objectAtIndex:2].backgroundColor = [UIColor clearColor];
    
    return view;
    
}

//显示的标题

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    
    NSString *str = [_nameArray objectAtIndex:row];
    
    return str;
    
}

//显示的标题字体、颜色等属性

- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component{
    
    NSString *str = [_nameArray objectAtIndex:row];
    
    NSMutableAttributedString *AttributedString = [[NSMutableAttributedString alloc]initWithString:str];
    
    [AttributedString addAttributes:@{NSFontAttributeName:[UIFont boldSystemFontOfSize:18], NSForegroundColorAttributeName:[UIColor whiteColor]} range:NSMakeRange(0, [AttributedString  length])];
    
    
    
    return AttributedString;
    
}//NS_AVAILABLE_IOS(6_0);



//被选择的行

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    
    
    
    NSLog(@"HANG%@",[_nameArray objectAtIndex:row]);
    
    
    
}

@end

• 值得注意点在于这个UILabel *text = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width/3, 20)];的建立

• 我们打开这个Demo的分层图 44DD3CFD-5C84-458B-96EC-03509626BF2E
• 然后如果把Label注释掉是这个效果 B6B0E937-1376-416C-9C21-FF19C71EE487

• 可以很明显的看到最后就啥也不剩了，所以Label不仅是用来做显示的，还是用来给中间每一个滚上去的Label做显示的