A Material Design drop down for iOS written in Swift.
Do pod try DropDown
in your console and run the project to try a demo.
To install CocoaPods, run sudo gem install cocoapods
in your console.
Use CocoaPods.
- Add
pod 'DropDown'
to your Podfile. - Install the pod(s) by running
pod install
. - Add
import DropDown
in the .swift files where you want to use it
- Download the latest code version or add the repository as a git submodule to your git-tracked project.
- Drag and drop the src, helpers and also the resources directory from the archive in your project navigator. Make sure to select Copy items when asked if you extracted the code archive outside of your project.
Create a new drop down:
let dropDown = DropDown()
Set the view to which the drop down will anchor:
let view = UIView()
dropDown.anchorView = view
Set the direction to use to show the drop down:
dropDown.direction = .Any
The default value is .Any
. Here is the Protocol code:
enum Direction {
/// The drop down will show below the anchor view when possible, otherwise above if there is more place than below.
case Any
/// The drop down will show above the anchor view or will not be showed if not enough space.
case Top
/// The drop down will show below or will not be showed if not enough space.
case Bottom
}
By default, the drop down will be shown onto to anchor view. It will hide it. If you want the drop down to be just below your anchor view when the direction of the drop down is .Bottom
, you can precise an offset like this:
dropDown.bottomOffset = CGPoint(x: 0, y:dropDown.anchorView.bounds.height) // top of drop down will be at bottom of anchorView
If you set the drop down direction to .Any
or .Top
you can also precise the offset when the drop down will showed above like this:
dropDown.topOffset = CGPoint(x: 0, y:-dropDown.anchorView.bounds.height) // bottom of drop down will be at top of anchorView
Note the minus sign used here to offset to the top.
The default width of the drop down will be the same as the anchor view minus the offset. If you want a custom width, just set:
dropDown.width = 100
Set the data source:
dropDown.dataSource = ["Car", "Motorcycle", "Van"]
By default, the cells in the drop down have the dataSource
values as text.
If you want a custom format for the cells, you can set cellConfiguration
like this for example:
dropDown.cellConfiguration = { [unowned self] (index, item) in
return "- \(item) (option \(index))"
}
When the user selects something, your selectionAction
is called:
dropDown.selectionAction = { [unowned self] (index, item) in
println("item \(item) at index \(index) selected.")
}
And if the user cancels the drop down, your cancelAction
gets called:
dropDown.cancelAction = { [unowned self] in
println("Drop down canceled")
}
You have 3 dismiss mode with the DismissMode
enum:
OnTap
: a tap is needed to dismiss the drop down before being able to interact with the UIAutomatic
: no tap is needed to dismiss the drop down, as soon as the user interact with anything else than the drop down, the drop down is dismissedManual
: the drop down can only be dismissed manually (by code)
for example:
dropDown.dismissMode = .Automatic
You can (pre)select a row with:
dropDown.selectRowAtIndex(3)
And finally show and hide the drop down with:
dropDown.show()
dropDown.hide()
The data source is reloaded automatically when changing the dataSource
property. If needed, you can reload the data source manually by doing:
dropDown.reloadAllComponents()
You can get info about the selected item this way:
dropDown.selectedItem() // returns a String?
dropDown.indexForSelectedRow() // returns an Index?
You can customize these properties of the drop down:
textFont
: the font of the text for each cells of the drop down.textColor
: the color of the text for each cells of the drop down.backgroundColor
: the background color of the drop down.selectionBackgroundColor
: the background color of the selected cell in the drop down.
You can change them through each instance of DropDown
or via UIAppearance
like this for example:
DropDown.appearance().textColor = UIColor.blackColor()
DropDown.appearance().textFont = UIFont.systemFontOfSize(15)
DropDown.appearance().backgroundColor = UIColor.whiteColor()
DropDown.appearance().selectionBackgroundColor = UIColor.lightGrayColor()
when calling the show
method, it returns a tuple like this:
(canBeDisplayed: Bool, offscreenHeight: CGFloat?)
canBeDisplayed
tells if there is enough height to display the drop down. If its value isfalse
, the drop down is not showed.offscreenHeight
: if the drop down was not able to show all cells from the data source at once,offscreenHeight
will contain the height needed to display all cells at once (without having to scroll through them). This can be used in a scroll view or table view to scroll enough before showing the drop down.
Don't forget to put:
DropDown.startListeningToKeyboard()
in your AppDelegate
's didFinishLaunching
method so that the drop down will handle its display with the keyboard displayed even the first time a drop down is showed.
- Handle landscape mode on iOS 7
- Xcode 6+
- iOS 7+
- ARC
This project is under MIT license. For more information, see LICENSE
file.
DropDown was inspired by the Material Design version of the Simple Menu.
DropDown was done to integrate in a project I work on:
It will be updated when necessary and fixes will be done as soon as discovered to keep it up to date.
You can find me on Twitter @kevinh6113.
Enjoy!