Home

Awesome

SwiftyPickerPopover

A more convenient way to display a popover with a built-in picker, on iPhone/iPad of iOS9+.

Version License Platform Carthage compatible

Features

Screenshots

<img src="README_resources/SwiftyPickerPopover_movie.gif" width="308">

Basic

DatePickerPopover(title: "DatePicker")
            .setDoneButton(action: { _, selectedDate in print(selectedDate)})
            .appear(originView: sender, baseViewController: self)

Required

License

MIT

Install

CocoaPods

Specify it in your 'Podfile', after replacing ‘YourProjectTargetName’ with your own target name:

platform :ios, '9.0'
use_frameworks!
target ‘YourProjectTargetName’ do
pod 'SwiftyPickerPopover'
end

Run 'pod install'.

Carthage

github "hsylife/SwiftyPickerPopover"

import

On your .swift file, import the module:

import SwiftyPickerPopover

Popover types

SwiftyPickerPopover offers you the following popovers:

APIs and examples

Common

All popovers have the following APIs.

StringPickerPopover

You can use StringPickerPopover like this:
StringPickerPopover(title: "StringPicker", choices: ["value 1","value 2","value 3"])
        .setSelectedRow(0)
        .setValueChange(action: { _, selectedDate in
            print("current date \(selectedDate)")
        })
        .setDoneButton(action: { (popover, selectedRow, selectedString) in
            print("done row \(selectedRow) \(selectedString)")
        })
        .setCancelButton(action: { (_, _, _) in print("cancel")}
        )
        .appear(originView: button, baseViewController: self)
StringPickerPopover can have images.
<img src="README_resources/StringWithImage.jpeg" width="362">

After adding image files to your target's Assets.xcassets:

StringPickerPopover(title: "StringPicker", choices: ["value 1","value2",""])
        .setImageNames(["Icon1",nil,"Icon3"])
        .appear(originView: button, baseViewController: self)
It can separate the screen values from the raw values:
let displayStringFor:((String?)->String?)? = { string in
   if let s = string {
      switch(s){
      case "value 1":
        return "😊"
      case "value 2":
         return "😏"
      case "value 3":
         return "😓"
      default:
         return s
      }
    }
  return nil
  }
        
let p = StringPickerPopover(title: "StringPicker", choices: ["value 1","value 2","value 3"])
            .setDisplayStringFor(displayStringFor)
            .setDoneButton(action: {
                popover, selectedRow, selectedString in
                print("done row \(selectedRow) \(selectedString)")
            })
            .setCancelButton(action: { _, _, _ in
                print("cancel")
            })
            
        p.appear(originView: sender, baseViewController: self)
        p.disappearAutomatically(after: 3.0, completion: { print("automatically hidden")} )
To specify the size:
StringPickerPopover(title: "Narrow StringPicker", choices: ["value 1","value 2","value 3"])
            .setSize(width: 250.0)
            .appear(originView: sender, baseViewController: self)

The default width and height of popover are both 300.0. By using setSize(width:, height:), you can override it or them. When you set nil to the parameter or don't specify it, the default will be used.

It appears from the collectionView's cell:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
        let theCell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        
        let p = StringPickerPopover(title: "CollectionView", choices: ["value 1","value 2","value 3"])
                        .setSelectedRow(1)
                        .setDoneButton(title:"👌", action: { (popover, selectedRow, selectedString) in print("done row \(selectedRow) \(selectedString)") })
                        .setCancelButton(title:"🗑", action: { (_, _, _) in print("cancel")} )
        
        p.appear(originView: theCell, baseViewWhenOriginViewHasNoSuperview collectionView, baseViewController: self)
        
    }

If originView has no superView, then then you need to set baseViewWhenOriginViewHasNoSuperview as above to specify sourceView for the position for the arrow. If it has the superview, then SwiftyPickerPopover automatically use it for the sourceView.

It appears from an UIBarButtonItem:
let item: UIBarButtonItem = sender
let originView = item.value(forKey: "view") as! UIView
p.appear(originView: originView, baseViewController: self)

ColumnStringPickerPopover

ColumnStringPickerPopover can have multiple String values:
ColumnStringPickerPopover(title: "Columns Strings",
                                  choices: [["Breakfast", "Lunch", "Dinner"],["Tacos", "Sushi", "Steak", "Waffles", "Burgers"]],
                                  selectedRows: [0,0], columnPercents: [0.5, 0.5])
        .setDoneButton(action: { popover, selectedRows, selectedStrings in print("selected rows \(selectedRows) strings \(selectedStrings)")})
        .setCancelButton(action: {_, _, _ in print("cancel")})
        .setFontSize(14)
        .appear(originView: sender, baseViewController: self)
)

DatePickerPopover

DatePickerPopover can be used like this:
DatePickerPopover(title: "DatePicker")
            .setDateMode(.date)
            .setSelectedDate(Date())
            .setDoneButton(action: { popover, selectedDate in print("selectedDate \(selectedDate)")})
            .setCancelButton(action: { _, _ in print("cancel")})
            .appear(originView: sender, baseViewController: self)
The clear button rewinds the picker. And it disappers automatically after a specified seconds:
let p = DatePickerPopover(title: "Clearable DatePicker")
            .setDoneButton(action: { popover, selectedDate in print("selectedDate \(selectedDate)")} )
            .setCancelButton(action: { _, _ in print("cancel")})
            .setClearButton(action: { popover, selectedDate in
                print("clear")
                //Rewind
                popover.setSelectedDate(Date()).reload()
            })
            
        p.appear(originView: sender, baseViewController: self)
        p.disappearAutomatically(after: 3.0)
The time interval is 5 mins. The arrow is permitted only to .down direction.:
DatePickerPopover(title: "DatePicker .time 5minInt.")
            .setDateMode(.time)
            .setMinuteInterval(5)
            .setPermittedArrowDirections(.down)
            .setDoneButton(action: { popover, selectedDate in print("selectedDate \(selectedDate)")} )
            .setCancelButton(action: { _, _ in print("cancel")})
            .appear(originView: sender, baseViewController: self)
)

CountdownPickerPopover

CountdownPickerPopover can be used like this:
 CountdownPickerPopover(title: "CountdownPicker")
            .setSelectedTimeInterval(TimeInterval())
            .setDoneButton(action: { popover, timeInterval in print("timeInterval \(timeInterval)")} )
            .setCancelButton(action: { _, _ in print("cancel")})
            .setClearButton(action: { popover, timeInterval in print("Clear")
                popover.setSelectedTimeInterval(TimeInterval()).reload()
            })
            .appear(originView: sender, baseViewController: self)

Customize

How do I customize a popover's storyboard?

When you prepare your customized Storyboard, it will be applied automatically.

  1. Find the original file of the popover's Storyboard, which you want to change. For example, 'CountdownPickerPopover.storyboard'.
  2. Add it to your project on Xcode for including it into mainBundle. At this time, please check 'Copy items if needed'. Do not change the file name.
  3. Next, change the module specified by default. Open the Storyboard file on Xcode and uncheck 'Inherit From Target' in InterfaceBuilder > Identity inspector > Custom Class. Specify 'SwiftyPickerPopover' for 'Module'.
  4. Finally, customize your storyboard file.

Contributors

Author