In this tutorial, we’ll be customising the UIPickerView properties in our iOS Application. In the previous tutorial, we implemented the UIPickerView class and discussed some of the important helper properties and functions.

在本教程中，我们将在iOS应用程序中自定义UIPickerView属性。 在上一教程中，我们实现了UIPickerView类，并讨论了一些重要的帮助程序属性和功能。

UIPickerView (UIPickerView)

We know that UIPickerView requires the two protocols: UIPickerViewDataSource, UIPickerViewDelegate.

我们知道UIPickerView需要两个协议： UIPickerViewDataSource和UIPickerViewDelegate 。

Besides the required methods that we had discussed, we can use the following methods to customize the UI of the UIPickerView.

除了我们已经讨论过的必需方法外，我们还可以使用以下方法来自定义UIPickerView的UI。

func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat
func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView

Using the above three methods we can override the width and height of the cell, and the view of each cell.

使用以上三种方法，我们可以覆盖单元格的宽度和高度以及每个单元格的视图。

Inside the viewForRow method, we can customize the UILabel by creating our own or just create any random custom view such as a UIImage + UILabel.

在viewForRow方法内部，我们可以通过创建自己的UILabel来自定义UILabel，也可以仅创建任意随机的自定义视图，例如UIImage + UILabel。

To change the background color of the UIPickerView simply use the backgroundColor property over the instance.

要更改UIPickerView的背景颜色，只需在实例上使用backgroundColor属性。

In the following section, we’ll first create a UIPickerView with a custom label. Later we’ll add a custom view in place of the custom label.

在以下部分中，我们将首先创建带有自定义标签的UIPickerView。 稍后，我们将添加一个自定义视图来代替自定义标签。

项目情节提要 (Project Storyboard)

We’ve added two UITextField and connected them in the ViewController.swift file.

我们添加了两个UITextField并将它们连接到ViewController.swift文件中。

码 (Code)

The code for the ViewController.swift file is given below:

下面给出了ViewController.swift文件的代码：

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
    
    
    @IBOutlet weak var textField1: UITextField!
    @IBOutlet weak var textField2: UITextField!
    let picker1 = UIPickerView()
    var arrayOfCountries = ["India","USA","Germany","China", "France","Japan", "Australia", "Greece"]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        createPickerView()
        createToolbar()
    }
    
    func createPickerView()
    {
        picker1.delegate = self
        picker1.delegate?.pickerView?(picker1, didSelectRow: 0, inComponent: 0)
        textField1.inputView = picker1
        textField2.inputView = picker1
        picker1.backgroundColor = UIColor.brown
        
    }
  

    
    func createToolbar()
    {
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
        toolbar.tintColor = UIColor.red
        toolbar.backgroundColor = UIColor.blue
        let doneButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(ViewController.closePickerView))
        toolbar.setItems([doneButton], animated: false)
        toolbar.isUserInteractionEnabled = true
        textField1.inputAccessoryView = toolbar
        textField2.inputAccessoryView = toolbar
    }
    
    @objc func closePickerView()
    {
        view.endEditing(true)
    }

    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        
        return arrayOfCountries.count
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String?
    {
        return arrayOfCountries[row]
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        
        textField1.text =  arrayOfCountries[row]
    }
    
    func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {
        return 100.0
    }
    
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 60.0
    }

    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {

        var label:UILabel
        
        if let v = view as? UILabel{
            label = v
        }
        else{
            label = UILabel()
        }
        
        label.textColor = UIColor.yellow
        label.textAlignment = .left
        label.font = UIFont(name: "Helvetica", size: 16)
        
        label.text = arrayOfCountries[row]
        
        return label
    }
}

In the viewForRow method, we have set the UILabel color and a system font.
We must update the text here.

在viewForRow方法中，我们设置了UILabel颜色和系统字体。
我们必须在这里更新文本。

UIToolbar Tint color is set on the Buttons present in the Toolbar.

UIToolbar淡色在工具栏上的按钮上设置。

The output when the above application was run on a simulator is:

在模拟器上运行上述应用程序时的输出为：

In the next section, we’ll create a Dynamic UIPickerView on the second UITextField. We will show a UIImage from the assets in the custom rows.

在下一节中，我们将在第二个UITextField上创建一个Dynamic UIPickerView。 我们将在自定义行中显示资产中的UIImage。

UIPickerView行与UIImage (UIPickerView Row with UIImage)

The code for the updated ViewController.swift file is given below;

更新后的ViewController.swift文件的代码如下：

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate, UITextFieldDelegate {
    
    
    @IBOutlet weak var textField1: UITextField!
    @IBOutlet weak var textField2: UITextField!
    let picker1 = UIPickerView()
    var arrayOfCountries = ["India","USA","Germany","China", "France","Japan", "Australia", "Greece"]
    var arrayOfColors = ["Red","Orange","Yellow","Green", "Blue","Black"]
    var activeTextField = 0
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        textField1.delegate = self
        textField2.delegate = self
        createPickerView()
        createToolbar()
    }
    
    func createPickerView()
    {
        picker1.delegate = self
        picker1.delegate?.pickerView?(picker1, didSelectRow: 0, inComponent: 0)
        textField1.inputView = picker1
        textField2.inputView = picker1
        picker1.backgroundColor = UIColor.brown
    }
  

    
    func createToolbar()
    {
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
        toolbar.tintColor = UIColor.red
        toolbar.backgroundColor = UIColor.blue
        let doneButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(ViewController.closePickerView))
        toolbar.setItems([doneButton], animated: false)
        toolbar.isUserInteractionEnabled = true
        textField1.inputAccessoryView = toolbar
        textField2.inputAccessoryView = toolbar
    }
    
    @objc func closePickerView()
    {
        view.endEditing(true)
    }

    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        
        switch activeTextField
        {
        case 1:
            return arrayOfCountries.count
        case 2:
            return arrayOfColors.count
        default:
            return arrayOfColors.count
        
        }
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String?
    {
        switch activeTextField{
        case 1:
            return arrayOfCountries[row]
        case 2:
            return arrayOfColors[row]
        default:
            return arrayOfColors[row]
        }

    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        switch activeTextField{
        
        case 1:
            textField1.text =  arrayOfCountries[row]
            break
            
        case 2:
            textField2.text = arrayOfColors[row]
            break

        default:
            textField1.text =  arrayOfCountries[row]
            break
            
        }
    }
    
    func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {
        return 100.0
    }
    
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 60.0
    }

    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        
        
        switch activeTextField{
        case 1:
        var label:UILabel
        
        if let v = view as? UILabel{
            label = v
        }
        else{
            label = UILabel()
        }
        
        label.textColor = UIColor.yellow
        label.textAlignment = .left
        label.font = UIFont(name: "Helvetica", size: 16)
        
        label.text = arrayOfCountries[row]
        
        return label
         
        case 2:
            
            let parentView = UIView()
            let label = UILabel(frame: CGRect(x: 60, y: 0, width: 80, height: 50))
            let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height:50))
            imageView.image = UIImage(named: "ic_launcher")
            label.text = arrayOfColors[row]
            parentView.addSubview(label)
            parentView.addSubview(imageView)
            
            return parentView
            
        default:
            return UILabel()
            
        }
    }
    
    func textFieldDidBeginEditing(_ textField: UITextField) {
        
        switch textField {
        case textField1:
            activeTextField = 1
            picker1.reloadAllComponents()
        case textField2:
            activeTextField = 2
            picker1.reloadAllComponents()
        default:
            activeTextField = 0
        }
        
    }
}

In the above code, we’ve also added TextFieldDelegate Procol in order to detect which UITextField is focused. Based on that we display the relevant UIPickerView with the respective data.

在上面的代码中，我们还添加了TextFieldDelegate Procol，以检测聚焦于哪个UITextField。 基于此，我们将显示相关的UIPickerView和相应的数据。

In the textFieldDidBeginEditing method, we set the activeField Property to 1 or 2 based on the UITextField that is focused.

在textFieldDidBeginEditing方法中，我们根据聚焦的UITextField将activeField属性设置为1或2。

After that we update the UIPickerView by calling reloadAllComponents()

之后，我们通过调用reloadAllComponents()更新UIPickerView。

The output of the above application in action is given below

上面应用程序的输出如下

This brings an end to this tutorial. You can download the project from the link below:

本教程到此结束。 您可以从下面的链接下载项目：

翻译自: https://www.journaldev.com/22743/custom-ios-uipickerview

UIPickerView是iOS开发中，相当常用的一个UI控件，用于滚动选择选项。也是项目中经常复用的一个控件，封装成一个统一风格的库，可以减少很多代码量。一般还会在PickerView上加上Toolbar和确定取消按钮。

点击button弹出picker，并改变指定label的值，效果如下图所示。

最终目的是在viewcontroller中button的event reponse中调用封装好的库的方法进行传值及操作。

- (IBAction)showPicker:(UIButton *)sender {

NSArray *array = @[@"电子科技大学",@"清华大学",@"四川大学",@"华中科技大学",@"西安电子科技大学"];

[CDZPicker showPickerInView:self.view withObjectsArray:array withlastString:self.label.text withStringBlock:^(NSString *string) {

self.label.text = string;

}];

}

实现思路从数据，视图，按钮处理三个方面说

1. 数据

传入数据(上层view对象，数组array，最后的值)

改变的值(利用block传值回调)

UIPickerView的Delegate和DataSource方法的实现

上层view对象和数组array没啥可说的，关于取消按钮的实现，个人想法是把弹出picker改变前最后的值传进view的内部并存储起来，等待按钮的动作响应判断是否取出。(但个人感觉把这个值传进去实现不太优雅，但水平不够没想到其它实现方法，希望交流)

改变值用利用block方法传值，不用delegate和通知的原因是感觉都太复杂了，通知还需要注册，但block的使用要注意避免循环引用导致内存没办法得到释放的问题。

在.h文件中定义block的别名便于使用

typedef void (^CDZStringResultBlock)(NSString *string);

.m中增加以下属性

@property (nonatomic,strong) NSArray *dataArray;

@property (nonatomic,strong) NSString *lastString;

@property (nonatomic, copy) CDZStringResultBlock block;

实现Pickerview的Delegate和DataSource协议

实现Pickerview的Delegate和DataSource相关方法

#pragma mark - PickerDataSource

//返回picker列数

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{

return 1;

}

//picker行数

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

return self.dataArray.count;

}

#pragma mark - PickerDelegate

//返回每行高度

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{

return 44;

}

//滑动到当行进行的操作，这里把当行的数据回调

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{

self.block(self.dataArray[row]);

}

//要修改picker滚动里每行文字的值及相关属性，分割线等在此方法里设置

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{

//设置分割线的颜色,这里设为隐藏

for(UIView *singleLine in pickerView.subviews){

if (singleLine.frame.size.height < 1) {

singleLine.backgroundColor = [UIColor clearColor];

}

}

//设置文字的属性

UILabel *genderLabel = [UILabel new];

genderLabel.textAlignment = NSTextAlignmentCenter;

genderLabel.text = self.dataArray[row];

genderLabel.font = [UIFont systemFontOfSize:23.0];

genderLabel.textColor = [UIColor blackColor];

return genderLabel;

}

另外有一点要注意

-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view

这个方法的优先级比

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component

这个方法优先级高，也就是说会覆盖后面那个方法里的设置，后面的方法只能确定每行返回的方法的值，没办法对字体大小，颜色，分割线等进行自定义，需要自定义就使用第一个方法。

2. 视图

视图上，由一个压黑背景的view上面加上一个包含确定和取消两个按钮和pickerview的containview组成。

先在最开始进行一些颜色，屏幕大小的宏定义和全局静态变量定义，方便使用

#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)

#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

#define BACKGROUND_BLACK_COLOR [UIColor colorWithRed:0.412 green:0.412 blue:0.412 alpha:0.7]

static const int pickerViewHeight = 228;

static const int toolBarHeight = 44;

进行view的布局，增加button点击动作等，pickerview要指定datasource和delegate为self

- (void)initView{

UIView *containerView = [[UIView alloc]initWithFrame:CGRectMake(0, SCREEN_HEIGHT - pickerViewHeight, SCREEN_WIDTH, pickerViewHeight)];

containerView.backgroundColor = [UIColor whiteColor];

UIButton *btnOK = [[UIButton alloc] initWithFrame:CGRectMake(SCREEN_WIDTH -70, 5, 40, 30)];

btnOK.titleLabel.font = [UIFont systemFontOfSize:18.0];

[btnOK setTitle:@"确定" forState:UIControlStateNormal];

[btnOK setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];

[btnOK addTarget:self action:@selector(pickerViewBtnOk:) forControlEvents:UIControlEventTouchUpInside];

[containerView addSubview:btnOK];

UIButton *btnCancel = [[UIButton alloc] initWithFrame:CGRectMake(30, 5, 40, 30)];

btnCancel.titleLabel.font = [UIFont systemFontOfSize:18.0];

[btnCancel setTitle:@"取消" forState:UIControlStateNormal];

[btnCancel setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];

[btnCancel addTarget:self action:@selector(pickerViewBtnCancel:) forControlEvents:UIControlEventTouchUpInside];

[containerView addSubview:btnCancel];

UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 32, SCREEN_WIDTH, pickerViewHeight - toolBarHeight)];

pickerView.backgroundColor = [UIColor whiteColor];

pickerView.delegate = self;

pickerView.dataSource = self;

[containerView addSubview:pickerView];

self.backgroundColor = BACKGROUND_BLACK_COLOR;

[self addSubview:containerView];

}

3.响应按钮点击事件

很简单，见代码即可。取消的话把传进来的lastString传回去即可。

#pragma mark - event response

- (void)pickerViewBtnOk:(UIButton *)btn{

[self removeFromSuperview];

}

- (void)pickerViewBtnCancel:(UIButton *)btn{

self.block (self.lastString);

[self removeFromSuperview];

}

封装成工厂方法

+ (void)showPickerInView:(UIView *)view

withObjectsArray:(NSArray *)array

withlastString:(NSString *)string

withStringBlock:(CDZStringResultBlock)stringBlock{

CDZPicker *pickerView = [[CDZPicker alloc]initWithFrame:view.bounds];

pickerView.dataArray = array;

pickerView.lastString = string;

pickerView.block = stringBlock;

pickerView.block(array[0]);//未滑动的话默认为第一个数据

[pickerView initView];

[view addSubview:pickerView];

}

最后

所有源码和Demo

这是我第一次写技术类文章，虽然不是什么很深入的问题，但希望能分享给有需要的人。

如果您觉得有帮助,不妨给个star鼓励一下,欢迎关注&交流

有任何问题欢迎评论私信或者提issue

QQ：757765420

Email：nemocdz@gmail.com

Github：Nemocdz

微博：@Nemocdz

谢谢观看