またYoutuberみたいな記事書きます．許してください

はじめに

スライドメニューとかドロップダウンメニューとかなんちゃらメニューって最近?多いですよね？
それぞれ使い時があるらしいので，まずそこから調べました．
ここを参考にさせていただきました．
スマホのメニューデザインに悩んだらこれを見る徹底収集36選！
http://liskul.com/cr_spdesign36-5195

2秒くらいで読んだ印象として

メニュー数が多い→スライドメニュー
メニュー数が少ない→ドロップダウンメニュー

今回作ろうとしてるアプリは，そんなにメニュー数は多くないので，ドロップダウンメニューでいきます

いい感じのライブラリを探したら，ありました！
BTNavigationDropdownMenuです！

公式Githubはこちらになります
https://github.com/PhamBaTho/BTNavigationDropdownMenu
僕でも読める！読めるぞッ！

アメリカ語読める人は公式読んでもらった方がいいです．

環境

Xcode8.1
Swift3
cocoapods
Storyboardバリバリ使用

インストール

Podfileの作り方がわからない人は，ここへ

Podfileに以下を追記します
pod 'BTNavigationDropdownMenu', :git => 'https://github.com/PhamBaTho/BTNavigationDropdownMenu.git', :branch => 'swift-3.0'

Swift２系使ってるよって人はこっちです
pod 'BTNavigationDropdownMenu'

で，いつもの
$pod install

実装

ドロップダウンメニューを出したいUIViewControllerを以下のようにしてみてください

最後にViewにテキトーにラベルを追加しましょう

ViewController.swift

import UIKit
import BTNavigationDropdownMenu

class ViewController: UIViewController {

    @IBOutlet weak var selectedCellLabel: UILabel!
    var menuView: BTNavigationDropdownMenu!

    override func viewDidLoad() {
        super.viewDidLoad()
        let items = ["Most Popular", "Latest", "Trending", "Nearest", "Top Picks"]
        self.selectedCellLabel.text = items.first
        self.navigationController?.navigationBar.translucent = false
        self.navigationController?.navigationBar.barTintColor = UIColor(red: 0.0/255.0, green:180/255.0, blue:220/255.0, alpha: 1.0)
        self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]

        menuView = BTNavigationDropdownMenu(navigationController: self.navigationController, containerView: self.navigationController!.view, title: "Dropdown Menu", items: items)

        //オプションです
        /*
        menuView.cellHeight = 50
        menuView.cellBackgroundColor = self.navigationController?.navigationBar.barTintColor
        menuView.cellSelectionColor = UIColor(red: 0.0/255.0, green:160.0/255.0, blue:195.0/255.0, alpha: 1.0)
        menuView.shouldKeepSelectedCellColor = true
        menuView.cellTextLabelColor = UIColor.whiteColor()
        menuView.cellTextLabelFont = UIFont(name: "Avenir-Heavy", size: 17)
        menuView.cellTextLabelAlignment = .Left // .Center // .Right // .Left
        menuView.arrowPadding = 15
        menuView.animationDuration = 0.5
        menuView.maskBackgroundColor = UIColor.blackColor()
        menuView.maskBackgroundOpacity = 0.3
        */
        menuView.didSelectItemAtIndexHandler = {(indexPath: Int) -> () in
            print("Did select item at index: \(indexPath)")
            self.selectedCellLabel.text = items[indexPath]
        }

        self.navigationItem.titleView = menuView
    }
}

公式より

これだけでとりあえずそれっぽいドロップダウンはできました．

しかしこれでは，画面遷移できてません

画面遷移させるところは次の見出しをご覧ください．

詰まったところ(画面遷移)

最終的に作りたいもの
ログイン画面ではドロップダウンメニューを作らず，メインコンテンツのところだけ，ドロップダウンメニューを作りたい！

そうだ！画面遷移させるナリ()
Storyboardで画面を作って，

さっき書いたクロージャーの中に

ViewController.swift

menuView.didSelectItemAtIndexHandler = {(indexPath: Int) -> () in
            print("Did select item at index: \(indexPath)")
            if(indexPath == 1){
                let myViewController = self.storyboard?.instantiateViewController(withIdentifier: "hoge")
                self.present(myViewController, animated: true, completion:nil)
            }
        }

こういうViewController同士をSegueの線で繋がないときは，
UIViewControllerのインスタンスを作って，presentすればいいんダロォン？(得意気)
　　
　
　

ここまで完璧．よし実行！！！
　
　
　
　
　

▂▅▇█▓▒░('ω')░▒▓█▇▅▂うわあああああああああああ

なんかがnilだぞって言われてる．なんでだ．

原因

ナビゲーションコントローラからStoryboard上でroot宣言してるviewcontroller上では，勝手にNavigationbarが作られますが，
今回のように何もSegueをつないでいない状態では，Navigationbarが作られないので，

ViewController.swift

self.navigationController?.navigationBar.translucent = false
self.navigationController?.navigationBar.barTintColor = UIColor(red: 0.0/255.0, green:180/255.0, blue:220/255.0, alpha: 1.0)
self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]

menuView = BTNavigationDropdownMenu(navigationController: self.navigationController, containerView: self.navigationController!.view, title: "Dropdown Menu", items: items)

この辺でねえよ！！！って怒られたみたいです．
ここで３時間くらい詰んで別のライブラリ使おうかと思いました．

解決策

これが最善の解決策ではないと思いますが,さっきのクロージャー内をこうしてみます．

ViewController.swift

menuView.didSelectItemAtIndexHandler = {(indexPath: Int) -> () in
            print("Did select item at index: \(indexPath)")
            if(indexPath == 1){
                let myViewController = self.storyboard?.instantiateViewController(withIdentifier: "hoge")
                let navigationController = UINavigationController(rootViewController: myViewController!)
                self.present(navigationController, animated: true, completion:nil)
            }
        }

『『『『『UINavigationControllerを作ってしまえ』』』』』

これで動きました

まとめ

全部のViewControllerでドロップダウンメニューを定義するのがめんどくさいので，
AppDelegateとかに全部書けば動きそう．と思いました．（未検証）

自分で設定できるオプションもあるので，ここで個性を出せばもっとかっこいいドロップダウンメニューができると思います．

このライブラリ使いたいときにこの記事にたどり着いてくれればいいな

何かありましたら，コメントにお願いします！！

【Swift】BTNavigationDropdownMenu使ってみた【簡単にドロップダウンメニューが作れる！】

はじめに

環境

インストール

実装

詰まったところ(画面遷移)

原因

解決策

まとめ