AnimatedDropdownMenu

AnimatedDropdownMenu copied to clipboard

AnimatedDropdownMenu is a clean interface dropdown menu, appears underneath navigation bar to display a list of related items when you click on the navigation title.

Type 01	Type 02	Type 03
Type 04	Type 05	Type 06
Type 07	Type 08	Type 09

Requirements

• Xcode 8.0+
• iOS 8.0+
• Swift 3.0

Example

To run the example project, clone the repo, and start Examples in Xcode.

$ git clone https://github.com/JonyFang/AnimatedDropdownMenu
$ cd AnimatedDropdownMenu/Examples
$ open Examples.xcworkspace

Installation

CocoaPods

To integrate AnimatedDropdownMenu into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'AnimatedDropdownMenu'

Usage

Get Started

Import the library where you want to use it.

import AnimatedDropdownMenu

class ExampleViewController: UIViewController {
    // MARK: - Properties
    fileprivate var selectedStageIndex: Int = 0
    fileprivate let dropdownItems: [AnimatedDropdownMenu.Item] = [
        AnimatedDropdownMenu.Item.init("EXPLORE", nil, nil),
        AnimatedDropdownMenu.Item.init("POPULAR", nil, nil),
        AnimatedDropdownMenu.Item.init("RECENT", nil, nil)
    ]

    // MARK: Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let dropdownMenu = AnimatedDropdownMenu(navigationController: navigationController, containerView: view, selectedIndex: selectedStageIndex, items: dropdownItems)
        dropdownMenu.didSelectItemAtIndexHandler = {
            [weak self] selectedIndex in
            guard let strongSelf = self else {
                return
            }
            strongSelf.selectedStageIndex = selectedIndex
            //Configure Selected Action
        }

        navigationItem.titleView = dropdownMenu
    }
}

Customization

Once you have setup the dropdown menu, you can custom the interface of menu. You can override these properties for your favor:

• menuTitleColor: The font of the navigation bar title. Default is UIFont.systemFont(ofSize: 16.0)
• menuArrowTintColor: The tint color of the arrow. Default is .darkGray
• cellBackgroundColor: The color of the cell background. Default is RGBA(216, 85, 96, 1)
• cellSelectedColor: The color of the cell when the cell is selected. Default is .clear
• cellSeparatorColor: The color of the cell separator. Default is RGBA(255, 255, 255, 0.3)
• cellTextColor: The color of the text inside cell. Default is RGBA(255, 255, 255, 0.3)
• cellTextSelectedColor: The color of the text inside cell when the cell is selected. Default is .white
• cellTextAlignment: The alignment of the text inside cell. Default is .center

Author

• Weibo: @JonyFang
• Twitter: @JonyFang
• Email: [email protected]

Contributing

Please open a new Issue here if you run into a problem specific to AnimatedDropdownMenu, have a feature request, or want to share a comment.

License

AnimatedDropdownMenu is available under the MIT license. See the LICENSE file for more info.