younatics/yndropdownmenu

✨ Awesome Dropdown menu for iOS with Swift 5.0

YNDropDownMenu

Updates

See CHANGELOG for details

Introduction

The eligible dropdown menu for iOS, written in Swift 5, appears dropdown menu to display a view of related items when a user click on the dropdown menu. You can customize dropdown view whatever you like (e.g. UITableView, UICollectionView... etc)

Requirements

YNDropDownMenu written in Swift 5. Compatible with iOS 8.0+

Installation

Cocoapods

YNDropDownMenu is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'YNDropDownMenu'

Carthage

github "younatics/YNDropDownMenu"

Usage

import YNDropDownMenu

Init view with frame[CGRect], Views[UIView] and Titles[String]

let view = YNDropDownMenu(frame:frame, dropDownViews: dropDownViews, dropDownViewTitles: ["Apple", "Banana", "Kiwi", "Pear"])
self.addSubview(view)

done!

Inherit YNDropDownView (If you need)

class DropDownView: YNDropDownView {
   // override method to call open & close
    override func dropDownViewOpened() {
        print("dropDownViewOpened")
    }
    
    override func dropDownViewClosed() {
        print("dropDownViewClosed")
    }

    // Hide Menu
    self.hideMenu()

    // Change Menu Title At Index
    self.changeMenu(title: "Changed", at: 1)
    self.changeMenu(title: "Changed", status: .selected, at: 1)

    // Change View At Index 
    self.changeView(view: UIView(), at: 3)

    // Always Selected Menu
    self.alwaysSelected(at: 0)
    self.normalSelected(at: 0)
}

Customize

Show & Hide Menu

view.showAndHideMenu(at:1)

// When view is already opened
view.hideMenu()

Disable & Enable Menu

view.disabledMenu(at: 2)
view.enabledMenu(at: 3)

Always/Normal selected button label

view.alwaysSelected(at: 0)
view.normalSelected(at: 0)

Button Images with 3 situations (normal, selected, disabled)

view.setStatesImages(normalImages: [UIImage(named: "arrow_nor")], selectedImages: [UIImage(named: "arrow_sel")], disabledImages: [UIImage(named: "arrow_dim")])

Label color with 3 situations

view.setLabelColorWhen(normal: UIColor.black, selected: UIColor.blue, disabled: UIColor.gray)

Label font with 3 situations

view.setLabelFontWhen(normal: UIFont.systemFont(ofSize: 12), selected: UIFont.boldSystemFont(ofSize: 12), disabled: UIFont.systemFont(ofSize: 12))

BlurEffectView

// Enadbled or Disabled first (Default true)
view.backgroundBlurEnabled = false

// Use this line if you want to change UIBlurEffectStyle
view.blurEffectStyle = .light

// Or customize blurEffectView(UIView)
let backgroundView = UIView()
backgroundView.backgroundColor = UIColor.black
view.blurEffectView = backgroundView

// Animation end alpha
view.blurEffectViewAlpha = 0.7

Animation duration

view.showMenuDuration = 0.5
view.hideMenuDuration = 0.3

Animation velocity, damping

view.showMenuSpringVelocity = 0.5
view.showMenuSpringWithDamping = 0.8

view.hideMenuSpringVelocity = 0.9
view.hideMenuSpringWithDamping = 0.8

Change Menu Title At Index

view.changeMenu(title: "Changed", at: 1)
view.changeMenu(title: "Changed", status: .selected, at: 1)

Change View At Index

view.changeView(view: UIView(), at: 3)

Change Bottom Line

view.bottomLine.backgroundColor = UIColor.black
view.bottomLine.isHidden = false

Deprecated

extension YNDropDownMenu {
    @available(*, deprecated, message: "use init(frame: CGRect, dropDownViews: [UIView], dropDownViewTitles: [String]) instead")
    public init(frame: CGRect, YNDropDownViews: [YNDropDownView], dropDownViewTitles: [String])

    @available(*, deprecated, message: "use alwaysSelected(at index: Int) instead")
    open func alwaysSelectedAt(index: Int) {
        self.alwaysSelected(at: index)
    }
    
    @available(*, deprecated, message: "use disabledMenu(at index: Int) instead")
    open func disabledMenuAt(index: Int) {
        self.disabledMenu(at: index)
    }
    
    @available(*, deprecated, message: "use enabledMenu(at index: Int) instead")
    open func enabledMenuAt(index: Int) {
        self.enabledMenu(at: index)
    }

    @available(*, deprecated, message: "use showAndHideMenu(at index: Int) instead")
    open func showAndHideMenuAt(index: Int) {
        self.showAndHideMenu(at: index)
    }
}

extension YNDropDownView {
    @available(*, deprecated, message: "use changeMenu(title: String, at index: Int) instead")
    open func changeMenuTitleAt(index: Int, title: String) {
        self.delegate?.changeMenu(title: title, at: index)
    }
}

References

Please tell me or make pull request if you use this library in your application :)

@zigbang

MotionBook

Author

younatics

Thanks to

jegumhon

License

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

yndropdownmenu's Issues

Not Able to change backgroundColor nor Text color Both Always white ??

Hi ,
I can not change background color nor the text color no matter what I do the always become white color..

IOS 10.3

http://imgur.com/a/2nnyo

the bottom line x position

the bottom line x position should be 0. when change menuview x positon, the bottom line x position is error. sorry my poor english.

Tabbar item click wont

The dropDownMenu won't dismiss when Tabbar item clicked，what can I do

don't need change dropDownView position

When I used your component with clear background color I have noticed stange effect.
dropDownView to bland with menu, but for second show menu this problem doesn't reproduce.
I think you have refused change position, but In initViews() you forget this remove.

I am making the pull request.

Images lost

open func setImageWhen(normal: UIImage?, selectedTintColor: UIColor, disabledTintColor: UIColor)
didn't setup buttonImagesArray

if I setBackgroundColor to clear, dropdoenView will through the menu at first show

setBackgroundColor to clear, have this problem at first show
the first picture is final state, and the second picture is start show dropdoenView while first click the menu

Support for orientation Change

From what I can tell, by adding a YNDropDownMenu to my view, it creates three subviews for the items, the view to be toggled, and a background faded view.

Everything works great if the user does not change their screen orientation, but if they do, the menu and it's three created views do not update their dimensions.

I've tried manually adding constraints myself, but they only target one of the three views, and I have no way to access the other two views created to add constraints to them as well. Help?

Support xib & sb

DropDownViews could be hid

I placed YNDropDownMenu inside a UIView, it seems to be hid when DropDownViews show up.
Any way to solve this?

Structures:

• ViewController
  +- View
  +-- PageMenu:UIView
  +--- YNDropDownMenu

Code:

@IBOutlet weak var pageMenu: UIView!

let menuView = YNDropDownMenu(frame: CGRect(x: 0, y: 0, width: self.pageMenu.frame.width, height: self.pageMenu.frame.height), dropDownViews: _customerDropViews, dropDownViewTitles: ["Menu1", "Menu2", "Menu3"])
  
let FFA409 = UIColor.init(red: 255/255, green: 164/255, blue: 9/255, alpha: 1.0)
menuView.setImageWhen(normal: UIImage(named: "arrow_nor"), selected: UIImage(named: "arrow_sel"), disabled: UIImage(named: "arrow_dim"))
menuView.setImageWhen(normal: UIImage(named: "arrow_nor"), selectedTintColor: FFA409, disabledTintColor: FFA409)
menuView.setImageWhens(normal: [UIImage(named: "arrow_nor"),UIImage(named: "arrow_nor"),UIImage(named: "arrow_nor")], selectedTintColorRGB: "FFA409", disabledTintColorRGB: "D3D3D3")
menuView.setLabelColorWhen(normal: .gray, selected: menuFontColor, disabled: .black)
menuView.setLabelFontWhen(normal: .systemFont(ofSize: 14), selected: .systemFont(ofSize: 14), disabled: .systemFont(ofSize: 14))
menuView.bottomLine.isHidden = false
menuView.bottomLine.backgroundColor = UIColor.init(red: 224/255, green: 224/255, blue: 224/255, alpha: 1)

pageMenu.addSubview(menuView)

Unable to set background color for menu.

Looking for setting the menu background color as clear Color. It is showing white color only.
Tried with the demo project as well.

view.setBackgroundColor(color: UIColor.clear)

As an objective looking to be have one dropdown button on text field. On opening it will show search filter form within dropdown view.

Implement in Table with an API

I am wanting to implement a table view, which is populated by an API, in the drop down. I added a table to the XIB file and created another XIB file for the table cell.

Primary View Controller:

class EcardSingleCategoryViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

var ecards = Content
let imageCache = NSCache<NSString,AnyObject>()

@IBOutlet weak var ecardCollection: UICollectionView!

var name = ""
var id = ""

override func viewDidLoad() {
    super.viewDidLoad()
    
    let ZBdropDownViews = Bundle.main.loadNibNamed("EcardCategories", owner: nil, options: nil) as? [UIView]
    let view = YNDropDownMenu(frame:CGRect(x: 0, y: 64, width: UIScreen.main.bounds.size.width, height: 64), dropDownViews: ZBdropDownViews!, dropDownViewTitles: ["Choose Category"])

   self.view.addSubview(view)
}

In the initViews() function, I get the following error ... for the "categoryTable.register( ... " code

Thread 1: Fatal error: Unexpectedly found nil while unwrapping an Optional value

I'm not sure how I would go about calling the cell's XIB file and populate the data.

Drop Down code:

class EcardCategoriesMenu: YNDropDownView {

@IBOutlet var categoryTable: UITableView!

var categories = [CategoryItem]()

override init(frame: CGRect) {
    super.init(frame: frame)
    self.initViews()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    
    self.initViews()
}

func initViews() {
    
  //  categoryTable.register(UINib(nibName: "EcardCategoriesCell", bundle: nil), forCellReuseIdentifier: "EcardCategoriesCell")
    
    categoryTable.delegate = self
    categoryTable.dataSource = self
    
    DispatchQueue.main.async {
        let jsonUrlString = "https://*****/category"
        guard let url = URL(string: jsonUrlString) else { return }

        URLSession.shared.dataTask(with: url) { (data, response, err) in
            guard let data = data else { return }
            
            if err == nil {
                do {
                    let decoder = JSONDecoder()
                    let ecardcategory = try decoder.decode(Category.self, from: data)
                    self.categories = ecardcategory.category
                    self.categories.sort(by: {$0.title < $1.title})
                } catch let err {
                    print("Err", err)
                }
                
                DispatchQueue.main.async {
                    print(self.categories.count)
                    self.categoryTable.reloadData()
                }
            }
        }.resume()
    }
}
}
extension EcardCategoriesMenu: UITableViewDelegate, UITableViewDataSource {

func numberOfSections(in tableView: UITableView) -> Int {
    return 1
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return categories.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "EcardCategoriesCell", for: indexPath) as? EcardCategoriesCell else { return UITableViewCell() }
    cell.categoryName.text = ("\(categories[indexPath.row].title)")
    return cell
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let mainStoryboard:UIStoryboard = UIStoryboard(name: "Ecard", bundle: nil)
    let desVC = mainStoryboard.instantiateViewController(withIdentifier: "EcardSingleCategoryViewController") as! EcardSingleCategoryViewController
    desVC.id = String(categories[indexPath.row].id)
    let navigationController = UIApplication.shared.keyWindow?.rootViewController as! UINavigationController
    navigationController.pushViewController(desVC, animated: true)
}
}

Cell Code:

class EcardCategoriesCell: UITableViewCell {
    @IBOutlet weak var categoryName: UILabel!
}

Any help sorting through this would be great.

How do I use the values set in the drop down views to sort the tableView of the main controller?

There is no example code that does this and neither is there documentation. Is it supported or is this framework purely front-end?

Update to Swift4, can't call method in Objective-C

In Swift4, a declaration within an NSObject-derived class will no longer infer @objc.
https://github.com/apple/swift-evolution/blob/master/proposals/0160-objc-inference.md

Not working in my project

It is showing "Unable to find a specification for YNDropDownMenu" while installing pod.
My project's deployment target is 9.0.
What is the issue?

Error in Swift4-IOS11-Xcode9

I have installed the most recent version of YNDropDownMenu however i got this error
"/Users/x/Documents/IOS development/Kallos/Pods/YNDropDownMenu/YNDropDownMenu/YNDropDownMenu.swift:583:43: 'init(colorLiteralRed:green:blue:alpha:)' is unavailable: This initializer is only meant to be used by color literals"

change height

how can i change the views height, when i drawed views in xib, i override frame, this will cause constraints conflict

customView is tableView

i want to layout a tableView in YNDropDownView, it's unsupported?

When DropDown Menu has deinited last blurEffectView will be shown yet

please change the deployment target to 8.0

I found the deployment target is 10.3, but the readme is 8.0

menu position is wrong in autolayout

// filterView.snp.makeConstraints { (make) in
// make.top.equalTo(64)
// make.left.right.equalTo(view)
// make.height.equalTo(38)
// }
I'm using SnapKit, the label of menu displays on top offset about half of height. pls check it.

not set the view's frame x value = 0

change to:
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.width, height: CGFloat(self.menuHeight))

Carthage support

Could Carthage support be added?

how can I change the top menu backgroundColor?

I need change the top menu backgroundColor to clear, you said use YNDropDownButton in issue15, but YNDropDownButton is not public, I can't use it by Carthage.
I need this:

Horizontal scrollview

Is there a way to have multiple titles on the YNDropDownMenu that can be scrolled horizontally?
For example, instead of having only Apple, Banana, Kiwi and Pear, I could add 5 more and have them displayed by scrolling horizontally.

Where to change backgroundColor

Hi,

Very nice dropdown :-)

Im trying to change the YNDropDownMenu backgroundColor to UIColor.white.withAlphaComponent(0.0), I can't find where to do this, any suggestions?

Thanks
Bennie

Vertical layout

what should we do if we want to achieve same layout vertically ?

fatal: unable to access 'https://github.com/younatics/YNDropDownMenu.git/': LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

fatal: unable to access 'https://github.com/younatics/YNDropDownMenu.git/': LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

for rotation the layouts will broken

You need override override func layoutSubviews()
I am going to send pull requests for you.