PickerView is an easy to use and customize alternative to UIPickerView written in Swift. It was developed to provide a highly customizable experience, so you can implement your custom designed UIPickerView.
It requires Xcode 7.0+ and Swift 2.0.
Your project deployment target must be iOS 8.0+
PickerView is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "PickerView"To run the example project, clone the repo, and run pod install from the Example directory first.
PickerView is very simple to use, you can use it with Interface Builder or through code, it works similar as UIPickerView you need to implement PickerViewDataSource and PickerViewDelegate protocols to provide the basic information and make it works.
You can customize the text appearance, the scrolling style (default or infinite scrolling) and the selection style (selection indicators and overlays with custom UIView's or even an UIImage to highlight the selected row).
Drag a UIView to your view controller (and put the constraints if you want).
Change the class to PickerView on the Identity Inspector and make the @IBOutlet connection.
Create a new PickerView.
let examplePicker = PickerView()
examplePicker.translatesAutoresizingMaskIntoConstraints = falseAdd to your view and put your custom constraints.
view.addSubview(examplePicker)
view.addConstraints([yourCustomConstraints])Don't forget to set the datasource and delegate of your PickerView:
// ...
// The `examplePicker` below is the same that you created through code or connected via @IBOutlet
examplePicker.dataSource = self
examplePicker.delegate = self
// ...The PickerViewDataSource protocol consists in two required methods:
public protocol PickerViewDataSource: class {
func numberOfRowsInPickerView(pickerView: PickerView) -> Int
func pickerView(pickerView: PickerView, titleForRow row:Int) -> String
}You need to return the numberOfRowsInPickerView as we see below:
func numberOfRowsInPickerView(pickerView: PickerView) -> Int {
return itemsThatYouWantToPresent.count
}And the title for each row:
func pickerView(pickerView: PickerView, titleForRow row: Int) -> String {
let item = itemsThatYouWantToPresent[row]
return item.name
}Done. Now you'll need to implement one more protocol and then we are all set.
The PickerViewDelegate consists in four required methods:
public protocol PickerViewDelegate: class {
func pickerView(pickerView: PickerView, didSelectRow row: Int)
func heightForRowInPickerView(pickerView: PickerView) -> CGFloat
func styleForLabel(label: UILabel, inPickerView pickerView: PickerView)
func styleForHighlightedLabel(label: UILabel, inPickerView pickerView: PickerView)
}The first method is where you can do something with the row selected in PickerView:
func pickerView(pickerView: PickerView, didSelectRow row: Int) {
let selectedItem = itemsThatYouWantToPresent[row]
print("The selected item is \(selectedItem.name)")
}Then you must provide the heightForRowInPickerView(_:):
func heightForRowInPickerView(pickerView: PickerView) -> CGFloat {
return 50.0 // In this example I'm returning arbitrary 50.0pt but you can return the row height you want.
}The following method allows you to customize the label that will present your items in PickerView:
func styleForLabel(label: UILabel, inPickerView pickerView: PickerView) {
label.textAlignment = .Center
label.font = UIFont.systemFontOfSize(15.0)
label.textColor = .lightGrayColor()
}And this method allows you to customize the label of highlighted row in PickerView:
func styleForLabel(label: UILabel, inPickerView pickerView: PickerView) {
label.textAlignment = .Center
label.font = UIFont.systemFontOfSize(25.0) // Change the size of font
label.textColor = view.tintColor // Change the text color
}Cool! You are ready to build and run your application with PickerView, it ill works with the default configurations and the text appearance you provided in PickerViewDelegate on the next section we will cover the scrolling and selection style customizations.
As you can customize the text appearance through PickerViewDelegate, you have two more options to customize your PickerView: scrolling style and selection style.
Is defined by the scrollingStyle property of PickerView that is of type ScrollingStyle a nested enum that has two member values: .Default and .Infinite. It is explicit and you might already know what it does, but let me explain better:
.Default: The default scrolling experience, the user can scroll through your PickerView item's but he will reach the bottom or the top of your picker when it doesn't have more items to show.
.Infinite: With this scrolling style the user will loop through the items of your PickerView and never reach the end, it provides an infinite scrolling experience.
Is defined by the selectionStyle property of PickerView that is of type SelectionStyle a nested enum that has four member values: .None, .DefaultIndicator, .Overlay and .Image. For your better understanding, follow the explanation below:
.None: Don't uses any aditional view to highlight the selection, only the highlighted label style customization provided by delegate.
.DefaultIndicator: Provides a simple selection indicator on the bottom of the highlighted row with full width and 2pt of height. The default color is its superview tintColor but you have free access to customize the DefaultIndicator through the defaultSelectionIndicator property.
.Overlay: Provide a full width and height (the height you provided on delegate) view that overlay the highlighted row. The default color is its superview tintColor and the alpha is set to 0.25, but you have free access to customize it through the selectionOverlay property.
Tip: You can set the alpha to 1.0 and background color to .clearColor() and add your custom selection view as a selectionOverlay subview to make it looks as you want (don't forget to properly add the constraints related to selectionOverlay to keep your experience with any screen size).
.Image: Provide a full width and height image view selection indicator (the height you provided on delegate) without any image. You must have a selection indicator as a image and set it to the image view through the selectionImageView property.
Feel free to submit your pull request, suggest any update, report a bug or create a feature request.
Just want to say hello? -> ofilipealvarenga at gmail.com
Author: @filipealva
Special thanks to: @bguidolim and @jairobjunior.
PickerView is available under the MIT license. See the LICENSE file for more info.