PickerViewKit
轻松使用基于模型的模式设置 UIPickerView
使用 PickerViewKit,您可以快速设置您的选择视图并提供数据。无需再创建数据源和代理。使用模型进行配置和数据供应。
如何使用
UIPickerView 由组件和行组成。组件是选择视图的列。每一列可以有多行。PickerViewKit 使用 PickerViewColumn 的值类型表示列,使用 PickerViewRow 表示行。行可以选择一个模型,这个模型会在行选择时起作用。可以使用 PickerViewRowModelProtocol 实现 model,SimpleRowModel 被用作默认的行模型。
1. 如果您的行应该表示特定的模型,请使用 PickerViewRowModelProtocol 实现自定义行模型。
2. 使用 PickerViewRow 创建您的行。
3. 将行附加到 PickerViewColumn。如果您想的话,可以设置列的行高。
4. 使用 PickerViewSetup 定义选择视图配置的所有参数。为接收行选择的通知,请传递一个实现 PickerViewDelegateCallbackProtocol 的回调/代理。
5. 使用您的 PickerViewSetup 实例化一个 PickerViewManager。
现在您可以出发了。您可以使用管理实例更新列或列中的行。
final class ViewController: UIViewController {
@IBOutlet private weak var pickerView: UIPickerView!
private var manager: PickerViewManager?
override func viewDidLoad() {
super.viewDidLoad()
// 1.
struct CustomPickerViewRowModel: PickerViewRowModelProtocol {
var name: String
var description: String
var history: String
}
// 2.
var pickerViewRow: PickerViewRow {
let model = CustomPickerViewRowModel(name: "Germany", description: "The Republic of Germany", history: "Germany has a long history ...")
var row = PickerViewRow(type: .plain(title: model.name))
row.model = model
return row
}
// 3.
let pickerViewColumn = PickerViewColumn(rows: [pickerViewRow], rowHeight: 56.0)
// 4.
let pickerViewSetup = PickerViewSetup(pickerView: pickerView, columns: [pickerViewColumn], callback: self)
// 5.
manager = PickerViewManager(setup: pickerViewSetup)
}
}
extension ViewController: PickerViewDelegateCallbackProtocol {
func didSelectRow(_ delegate: PickerViewDelegateProtocol, in pickerView: UIPickerView, row: PickerViewRowProtocol, rowModels: [PickerViewRowModelProtocol]?) {
print(row.model?.name ?? "")
}
}
选择视图设置
使用 PickerViewSetup 值类型来配置您的选择视图。
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
选择视图 | UIPickerView | 您想要设置的选择视图 | - |
列 | PickerViewColumn数组 | 指定选择视图的列 | - |
回调 | PickerViewDelegateCallbackProtocol | 定义在行选择时将会被通知的回调 | nil |
defaultColumnWidth | CGFloat | 设置在未指定列宽时使用的列宽 | 48 |
defaultRowHeight | CGFloat | 如果未在列初始化时指定,将使用的行高 | 48 |
列宽和行高
如果您想指定一列的宽度或某列内行的高度,请使用PickerViewColumn的属性。请注意,您不能在多列选择视图中使用不同的行高。
let pickerViewRow = PickerViewRow(type: .plain(title: "Mock"))
let pickerViewColumn = PickerViewColumn(rows: [pickerViewRow], columnWidth: 128.0, rowHeight: 56.0)
行类型
为了定义行的外观和感觉,您可以从3种行类型中选择
1. 普通类型
普通选择视图行只使用UILabel显示指定的标题。
2. 属性类型
属性选择的行使用UILabel显示指定的属性字符串。
3. 自定义类型
如果您想向用户显示具有自定义样式的行,请使用自定义行类型。您传递一个块,该块返回一个UIView。这是必要的,因为否则您的自定义视图将被UIPickerView的子视图覆盖。
let view: () -> UIView = {
let frame = CGRect(x: 0, y: 0, width: 48, height: 48)
let image = UIImage(named: "github")
let imageView = UIImageView(image: image)
imageView.frame = frame
return imageView
}
let row = PickerViewRow(type: .custom(view: view))
示例
三个经典的示例展示了PickerViewKit的用法。
1. 国家选择器
2. 季节和剧集选择器
3. 日期选择器
要运行示例项目,请克隆存储库,然后首先从Example目录运行pod install
。
自定义
PickerViewKit是可定制的。
您可以使用PickerViewRowProtocol创建自己的选择器视图行实现。此外,您还可以自由地创建自定义行模型,实现PickerViewRowModelProtocol。
文档
需求
您的App的部署目标为 >= iOS 8.0。
安装
PickerViewKit 您可以通过CocoaPods获得。要安装它,只需将以下行添加到您的Podfile中
pod 'PickerViewKit'
从版本1迁移到版本2
版本2的一个重大更改是删除了PickerViewSetupType和PickerViewType。这些类型是混淆且不必要的。
现在,您可以在初始化PickerViewSetup时直接传递您的PickerViewColumn,而不是指定一个类型。此外,PickerViewSetup的初始化也不再可能导致错误。
Version 1:
let pickerViewColumn = PickerViewColumn(rows: [], rowHeight: 56.0)
let pickerViewSetup = try PickerViewSetup(pickerView: pickerView, type: .single(column: pickerViewColumn), callback: self)
Version 2:
let pickerViewColumn = PickerViewColumn(rows: [], rowHeight: 56.0)
let pickerViewSetup = PickerViewSetup(pickerView: pickerView, columns: [pickerViewColumn], callback: self)
作者
Christian Elies, [email protected]
许可
PickerViewKit可在MIT许可下使用。有关更多信息,请参阅LICENSE文件。