RxSwift之UI控件UIPickerView扩展的使用

一、基本用法

① 单列的情况

基本用法

• 示例代码：

var pickerView : UIPickerView!// 最简单的pickerView适配器（显示普通文本） private let stringPickerAdapter = RxPickerViewStringAdapter<[String]>(components: [],numberOfComponents: { _,_,_ in 1 },numberOfRowsInComponent: { (_, _, items, _) -> Int inreturn items.count},titleForRow: { (_, _, items, row, _) -> String? inreturn items[row]} )// 创建pickerView pickerView = UIPickerView() pickerView.frame = CGRect.init(x: 0, y: 100, width: SCREEN_WIDTH, height: 150) self.view.addSubview(pickerView)// 绑定pickerView数据 Observable.just(["One", "Two", "Tree"]).bind(to: pickerView.rx.items(adapter: stringPickerAdapter)).disposed(by: disposeBag)// 建立一个按钮，触摸按钮时获得选择框被选择的索引 let button = UIButton(frame:CGRect(x:0, y:0, width:SCREEN_WIDTH, height:50)) button.center = self.view.center button.backgroundColor = UIColor.purple button.setTitle("获取信息",for:.normal) // 按钮点击响应 button.rx.tap.bind { [weak self] inself?.getPickerViewValue()}.disposed(by: disposeBag) self.view.addSubview(button)// 触摸按钮时，获得被选中的索引 @objc func getPickerViewValue(){let message = String(pickerView.selectedRow(inComponent: 0))let alertController = UIAlertController(title: "被选中的索引为",message: message, preferredStyle: .alert)let okAction = UIAlertAction(title: "OK", style: .cancel, handler: nil)alertController.addAction(okAction)self.present(alertController, animated: true, completion: nil) }

② 多列的情况

• 示例代码：

// 创建pickerView pickerView = UIPickerView() pickerView.frame = CGRect.init(x: 0, y: 100, width: SCREEN_WIDTH, height: 150) self.view.addSubview(pickerView)// 绑定pickerView数据 Observable.just([["One", "Two", "Tree"],["A", "B", "C", "D"]]).bind(to: pickerView.rx.items(adapter: stringPickerAdapter)).disposed(by: disposeBag)// 建立一个按钮，触摸按钮时获得选择框被选择的索引 let button = UIButton(frame:CGRect(x:0, y:0, width:SCREEN_WIDTH, height:50)) button.center = self.view.center button.backgroundColor = UIColor.blue button.setTitle("获取信息",for:.normal) // 按钮点击响应 button.rx.tap.bind { [weak self] inself?.getPickerViewValue()}.disposed(by: disposeBag) self.view.addSubview(button)// 触摸按钮时，获得被选中的索引 @objc func getPickerViewValue(){let message = String(pickerView.selectedRow(inComponent: 0)) + "-"+ String(pickerView!.selectedRow(inComponent: 1))let alertController = UIAlertController(title: "被选中的索引为",message: message, preferredStyle: .alert)let okAction = UIAlertAction(title: "OK", style: .cancel, handler: nil)alertController.addAction(okAction)self.present(alertController, animated: true, completion: nil) }

二、修改默认的样式

• 如下所示，将选项的文字修改成橙色，同时在文字下方加上双下划线：

• 要实现这个效果，只需改用 RxPickerViewAttributedStringAdapter 这个可以设置文字属性的适配器即可，示例如下：

var pickerView:UIPickerView!// 设置文字属性的pickerView适配器 private let attrStringPickerAdapter = RxPickerViewAttributedStringAdapter<[String]>(components: [],numberOfComponents: { _,_,_ in 1 },numberOfRowsInComponent: { (_, _, items, _) -> Int inreturn items.count}){ (_, _, items, row, _) -> NSAttributedString? inreturn NSAttributedString(string: items[row],attributes: [NSAttributedString.Key.foregroundColor: UIColor.orange, // 橙色文字NSAttributedString.Key.underlineStyle:NSUnderlineStyle.double.rawValue, // 双下划线NSAttributedString.Key.textEffect:NSAttributedString.TextEffectStyle.letterpressStyle])}// 创建pickerView pickerView = UIPickerView() pickerView.frame = CGRect.init(x: 0, y: 100, width: SCREEN_WIDTH, height: 150) self.view.addSubview(pickerView)// 绑定pickerView数据 Observable.just(["One", "Two", "Tree"]).bind(to: pickerView.rx.items(adapter: attrStringPickerAdapter)).disposed(by: disposeBag)

三、使用自定义视图

• 将选项视图改成单纯显示颜色色块的 view，其颜色由传入的值决定：

• 要实现这个效果，只需改用 RxPickerViewViewAdapter 这个可以返回自定义视图的适配器即可。示例如下：

// 设置自定义视图的pickerView适配器 private let viewPickerAdapter = RxPickerViewViewAdapter<[UIColor]>(components: [],numberOfComponents: { _,_,_ in 1 },numberOfRowsInComponent: { (_, _, items, _) -> Int inreturn items.count}){ (_, _, items, row, _, view) -> UIView inlet componentView = view ?? UIView()componentView.backgroundColor = items[row]return componentView}// 创建pickerView pickerView = UIPickerView() pickerView.frame = CGRect.init(x: 0, y: 100, width: SCREEN_WIDTH, height: 150) self.view.addSubview(pickerView)// 绑定pickerView数据 Observable.just([UIColor.red, UIColor.orange, UIColor.yellow]).bind(to: pickerView.rx.items(adapter: viewPickerAdapter)).disposed(by: disposeBag)

总结

以上是生活随笔为你收集整理的RxSwift之UI控件UIPickerView扩展的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。