PickerView
PickerView
是一个用 Swift 编写的、易于使用和自定义的 UIPickerView
替代方案。它被开发出来以提供高度可定制的体验,因此您可以实现具有的自定义设计的 UIPickerView
。
要求
需要 Xcode 8.0+ 和 Swift 3.0。
注意:当 PickerView
首次构建时,并未考虑到支持 Objective-C 项目,但社区要求了支持,最近我们发布了支持 Objective-C 项目的版本 0.2.0
。在测试后,我们注意到在 Objective-C 中使用时出现了一些问题,所以我们创建了此 问题,我们需要的帮助来解决,所以如果您在 Objective-C 项目中进行一些调整以运行,请与我们合作来解决这些问题。感谢。
您的项目部署目标必须是 iOS 8.0+
安装
CocoaPods
PickerView 可通过CocoaPods访问。安装它,只需在您的 Podfile 中添加以下行:
pod "PickerView"
手动安装
您也可以通过手动拖拽 PickerView 文件到您的项目中安装它。
使用方法
要运行示例项目,请克隆仓库,然后从 Example 目录中首先运行 pod install
。
PickerView
非常简单易用,您可以使用它与 Interface Builder 或代码一起使用,它的工作方式类似于 UIPickerView
,您需要实现 PickerViewDataSource
和 PickerViewDelegate
协议以提供基本信息和使其工作。
您还可以自定义文本外观、滚动样式(默认或无限滚动)以及选择样式(选择指示器和使用自定义 UIView
或 UIImage
高亮显示选定行)。
使用 Interface Builder
将从您视图控制器(如果要,请添加约束)中拖拽一个 UIView
。
在 Identity Inspector 中将类更改为 PickerView
并创建 @IBOutlet
连接。
通过代码
创建一个新的 PickerView
。
let examplePicker = PickerView()
examplePicker.translatesAutoresizingMaskIntoConstraints = false
将其添加到您的视图中,并放置您自定义的约束。
view.addSubview(examplePicker)
view.addConstraints([yourCustomConstraints])
PickerViewDataSource
和 PickerViewDelegate
设置 别忘了设置你的 PickerView
的数据源和代理。
// ...
// The `examplePicker` below is the same that you created through code or connected via @IBOutlet
examplePicker.dataSource = self
examplePicker.delegate = self
// ...
PickerViewDataSource
实现 PickerViewDataSource
协议包含两个必须实现的方法。
@objc public protocol PickerViewDataSource: class {
func pickerViewNumberOfRows(_ pickerView: PickerView) -> Int
func pickerView(_ pickerView: PickerView, titleForRow row: Int) -> String
}
你需要返回如下所示的 pickerViewNumberOfRows
。
func pickerViewNumberOfRows(_ pickerView: PickerView) -> Int {
return itemsThatYouWantToPresent.count
}
以及每一行的标题。
func pickerView(_ pickerView: PickerView, titleForRow row: Int) -> String {
let item = itemsThatYouWantToPresent[row]
return item.text
}
完成。现在你还需要实现另一个协议,然后我们就可以设置好了。
PickerViewDelegate
实现 PickerViewDelegate
包含五个方法。
@objc public protocol PickerViewDelegate: class {
func pickerViewHeightForRows(_ pickerView: PickerView) -> CGFloat
optional func pickerView(_ pickerView: PickerView, didSelectRow row: Int)
optional func pickerView(_ pickerView: PickerView, didTapRow row: Int)
optional func pickerView(_ pickerView: PickerView, styleForLabel label: UILabel, highlighted: Bool)
optional func pickerView(_ pickerView: PickerView, viewForRow row: Int, highlighted: Bool, reusingView view: UIView?) -> UIView?
}
首先你必须提供 pickerViewHeightForRows(_:)
。
func pickerViewHeightForRows(_ pickerView: PickerView) -> CGFloat {
return 50.0 // In this example I'm returning arbitrary 50.0pt but you should return the row height you want.
}
然后是处理在 PickerView
中选中的行的操作的方法。
func pickerView(_ pickerView: PickerView, didSelectRow row: Int) {
let selectedItem = itemsThatYouWantToPresent[row]
print("The selected item is \(selectedItem.name)")
}
PickerView
允许用户通过点击可见的行来选择它。我们有一个代理方法来跟踪这种行为,所以 pickerView(_: PickerView, didTapRow row: Int)
只在用户通过点击选中一行时调用。
func pickerView(_ pickerView: PickerView, didTapRow row: Int) {
print("The row \(row) was tapped by the user")
}
以下方法允许你自定义将在 PickerView
中显示的项目标签。使用标志 `highlighted` 在项目被选中时提供不同的样式。
func pickerView(_ pickerView: PickerView, styleForLabel label: UILabel, highlighted: Bool) {
label.textAlignment = .Center
if highlighted {
label.font = UIFont.systemFontOfSize(25.0)
label.textColor = view.tintColor
} else {
label.font = UIFont.systemFontOfSize(15.0)
label.textColor = .lightGrayColor()
}
}
如果你想提供一个完整的自定义视图而不是仅包含文本标签的行视图
func pickerView(_ pickerView: PickerView, viewForRow row: Int, highlighted: Bool, reusingView view: UIView?) -> UIView? {
var customView = view
// Verify if there is a view to reuse, if not, init your view.
if customView == nil {
// Init your view
customView = MyCustomView()
}
// **IMPORTANT**: As you are providing a totally custom view, PickerView doesn't know where to bind the data provided on PickerViewDataSource, so you will need to bind the data in this method.
customView.yourCustomTextLabel.text = itemsThatYouWantToPresent[row].text
// Don't forget to make your style customizations for highlighted state
let alphaBasedOnHighlighted: CGFloat = highlighted ? 1.0 : 0.5
customView.yourCustomTextLabel.alpha = alphaBasedOnHighlighted
return customView
}
标签还是自定义视图?
尽管在 PickerViewDelegate
中 func pickerView(_ pickerView: PickerView, styleForLabel label: UILabel, highlighted: Bool)
和 func pickerView(_ pickerView: PickerView, viewForRow row: Int, highlited: Bool, reusingView view: UIView?)
是可选方法,但你必须实现其中之一。如果你只想要通过标签展示数据(你仍然可以自定义它),实现第一个;如果你想要在一个完全自定义的视图中展示数据,你应该实现第二个。
注意:如果您实现了上述提到的两种方法,PickerView
将始终使用您提供的自定义视图来展示您的数据。
太好了!您现在可以构建并运行您的应用程序,使用 PickerView
,它将与默认配置和您在下一个部分我们将涉及的 PickerViewDelegate
中提供的文本外观正常工作。
自定义外观
通过 PickerViewDelegate
您可以自定义文本外观,您还有两个选项来自定义 PickerView
:滚动样式和选择样式。
滚动样式
由 PickerView
的 scrollingStyle
属性定义,该属性的类型为 ScrollingStyle
,这是一个嵌套的 enum
,有两个成员值:.Default
和 .Infinite
。它是明确的,您可能已经知道它的作用,但我将更好地解释。
.Default:默认的滚动体验,用户可以通过您的 PickerView
项进行滚动,但当他没有更多的项来展示时,他将达到选择器的顶部或底部。
.Infinite:使用这种滚动样式时,用户将循环选择 PickerView
的项,永远不会到达尽头,它提供了一种无限滚动的体验。
选择样式
由 PickerView
的 selectionStyle
属性定义,该属性的类型为 SelectionStyle
,这是一个嵌套的 enum
,有四个成员值:.None
、.DefaultIndicator
、.Overlay
和 .Image
。为了更好地理解,请参考以下说明:
.None:不使用任何额外的视图来突出显示选择,仅使用代理提供的突出显示标签样式自定义。
.DefaultIndicator:在突出显示的行的底部提供一个简单的选择指示器,宽度为全行,高度为 2pt。默认颜色为其父视图的 tintColor
,但您可以通过 defaultSelectionIndicator
属性自由地自定义 DefaultIndicator。
.Overlay:提供一个全宽度和高度的视图(在代理中提供的您的高度),覆盖突出显示的行。默认颜色是其父视图的 tintColor
, Alpha 设置为 0.25,但您可以通过 selectionOverlay
属性自由地自定义它。
提示:您可以将 Alpha 设置为 1.0,背景颜色设置为 ClearColor()
,然后将您的自定义选择视图作为 selectionOverlay
子视图添加,使其看起来如您所需(不要忘记为 selectionOverlay
正确添加约束,以保持您在任何屏幕大小下的体验)。
.图片:提供一个全宽高度的选择视图指示器(在delegate中提供的您的高度),没有任何图片。您必须设置一个选择指示器作为图片,并通过 selectionImageView
属性将其设置为图像视图。
使用者是谁?
查看哪些项目在 我们的wiki页面 上使用 PickerView
。
贡献
随时提交您的pull请求,建议更新,报告错误或创建功能请求。
在开始贡献之前,请查看我们的 贡献指南。
只想说 你好
? -> ofilipealvarenga 在 gmail.com
贡献者
作者: @filipealva
查看帮助改进此项目的所有人员: 贡献者 ♥
特别感谢: @bguidolim 和 @jairobjunior。
🌟
star 是关心如果您喜欢这个项目并希望它继续下去,请为它 star。这是让我知道项目影响的一种方式。谢谢 <3
许可
PickerView 在MIT许可下提供。有关更多信息,请参阅LICENSE文件。