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扩展的使用相关推荐

RxSwift之UI控件UITableView扩展的使用
一.基本使用 ① 单分区的表格如下所示,单个分区的表格展示: 示例代码: import UIKit import RxSwift import RxCocoaclass ViewController ...
RxSwift之UI控件UIGestureRecognizer扩展的使用
RxCocoa 同样对 UIGestureRecognizer 进行了扩展,并增加相关的响应方法.现在以滑动手势为例做具体说明,其它手势用法也是一样的. 当手指在界面上向上滑动时,弹出提示框,并显示出 ...
RxSwift之UI控件UICollectionView扩展的使用
一.基本用法 ① 单个分区的集合视图效果如下: 示例代码: // 定义布局方式以及单元格大小 let flowLayout = UICollectionViewFlowLayout() flowLa ...
RxSwift之UI控件Label扩展的使用
一.将数据绑定到 text 属性上(普通文本) 当程序启动时就开始计时,同时将已过去的时间格式化后显示在 label 标签上: // 创建文本标签 let label = UILabel(frame: ...
RxSwift之UI控件UITextField与UITextView扩展的使用
一.监听单个 textField 内容的变化(textView 同理) 将 textField 里输入的内容实时地显示到控制台中,示例代码: // 创建文本输入框 let textField = UI ...
RxSwift之UI控件UISwitch与UISegmentedControl扩展的使用
一.UISwitch(开关按钮) 实现当 switch 开关状态改变时,输出当前值: 示例代码: switch1.rx.isOn.asObservable().subscribe(onNext: {p ...
RxSwift之UI控件UISlider与UIStepper扩展的使用
一.UISlider(滑块) 如下所示,当拖动滑块时,在控制台中实时输出 slider 当前值: 当前值为:0.308442 当前值为:0.349990 当前值为:0.400087 当前值为:0.45 ...
RxSwift之UI控件UIActivityIndicatorView与UIApplication扩展的使用
一.UIActivityIndicatorView(活动指示器) UIActivityIndicatorView 又叫状态指示器,它会通过一个旋转的"菊花"来表示当前的活动状态. ...
RxSwift之UI控件UIButton与UIBarButtonItem扩展的使用
一.点击事件响应如果想实现点击按钮后,弹出一个消息提示框: 示例代码: import UIKit import RxSwift import RxCocoaclass ViewController: ...

RxSwift之UI控件UIPickerView扩展的使用

一、基本用法

① 单列的情况

② 多列的情况

二、修改默认的样式

三、使用自定义视图

RxSwift之UI控件UIPickerView扩展的使用相关推荐

最新文章

热门文章