PickerView 0.4.0

PickerView 0.4.0

测试已测试
语言语言 SwiftSwift
许可证 MIT
发布最新发布2018年10月
SPM支持 SPM

Filipe Alvarenga 维护。



  • 作者
  • Filipe Alvarenga

PickerView

Version License Platform

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,您需要实现 PickerViewDataSourcePickerViewDelegate 协议以提供基本信息和使其工作。

您还可以自定义文本外观、滚动样式(默认或无限滚动)以及选择样式(选择指示器和使用自定义 UIViewUIImage 高亮显示选定行)。

使用 Interface Builder

将从您视图控制器(如果要,请添加约束)中拖拽一个 UIView

Putting PickerView on Interface Builder

在 Identity Inspector 中将类更改为 PickerView 并创建 @IBOutlet 连接。

Change the custom class.

通过代码

创建一个新的 PickerView

let examplePicker = PickerView()
examplePicker.translatesAutoresizingMaskIntoConstraints = false

将其添加到您的视图中,并放置您自定义的约束。

view.addSubview(examplePicker)
view.addConstraints([yourCustomConstraints])

设置 PickerViewDataSourcePickerViewDelegate

别忘了设置你的 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
}

标签还是自定义视图?

尽管在 PickerViewDelegatefunc 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:滚动样式和选择样式。

滚动样式

PickerViewscrollingStyle 属性定义,该属性的类型为 ScrollingStyle,这是一个嵌套的 enum,有两个成员值:.Default.Infinite。它是明确的,您可能已经知道它的作用,但我将更好地解释。

.Default:默认的滚动体验,用户可以通过您的 PickerView 项进行滚动,但当他没有更多的项来展示时,他将达到选择器的顶部或底部。

.Infinite:使用这种滚动样式时,用户将循环选择 PickerView 的项,永远不会到达尽头,它提供了一种无限滚动的体验。

选择样式

PickerViewselectionStyle 属性定义,该属性的类型为 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文件。

捐赠