Twitterの下から出てくるメニュー！使いやすいよね

↑こんな感じでしたからニョキって出るやつ
実装してえ！！！😳😳😳

ライブラリを使って実装しよう

普通にライブラリなしでも作れるとは思うけど、やっぱりめんどくさいなーーーということで
それっぽいことができそうなライブラリを探してきたよ！🙋‍♂️
https://github.com/slackhq/PanModal

どっかでみたことあるなーって人いるでしょ？
「ｽｯｶｶｶ」でおなじみのSlackのライブラリなんですねー

というわけでこいつを使ってTwitterみたいなニョキッとメニューを作ってくぞ！！！

作ろう！

1. ライブラリを入れよう

cocoapodsを使いますよー！
Podfileにこれを追記して pod installしてください！

pod 'PanModal'

2. ニョキっとさせるボタンを追加

お好みでButtonとかTableViewとかを置いてあげよう
これを押したときにニョキっとメニューが出るようなイメージ！

3. ニョキっとメニュー本体を作る

新しいファイルを作ろう！
名前はなんでも

そんでとりまUITableViewDelegateとUITableViewDataSource、あとそれに関連したなんやかんやを書く！
（UITableViewでいいじゃんと思ったんですけど、なんかうまく動かなかったのでこうしてます　謎です）

次にニョキっとのキモを作ってくぞ！

PanModalをimportして、

もろもろ書こう！
これでニョキっとメニュー自体は完成！

4. ニョキっとメニューを呼び出そう！

ニョキッとメニューを出したいタイミングで、

presentPanModal(NyokittoViewController())

こいつを呼び出せばオッケー！

5. 完成！

これでtwitterのメニューっぽいニョキっとメニューが完成！お疲れさまです〜〜〜〜〜〜

6. いろいろ改良してえ！

↑のやつだと問題点がいろいろあるから改良しようぜ！っていうやつです

なんかメニューがスクロールするんだけど

そういう時はこれを追記だ！

tableView.isScrollEnabled = false

これを設定するとtableViewがスクロールしなくなるよ！便利だね！

ヘッダー欲しいんだけど

そういう時はヘッダーを作ろう！

let headerView:UIView = UIView()
let label: UILabel = UILabel()

ヘッダービューとそこに載せたいものを定義

これを追記

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        return headerView
    }

    override func viewDidLayoutSubviews() {
        label.text = "共有"
        label.textAlignment = .center
        label.textColor = .black
        label.font = UIFont.systemFont(ofSize: 14)
        label.frame = CGRect(x: 0, y: 0, width: headerView.frame.width, height: headerView.frame.height)
        headerView.addSubview(label)
    }

あとheaderの高さを変えたい時は

tableView.sectionHeaderHeight = 40

そうするとこんな感じ！

区切り線邪魔なんだけど

そういう時はこれを追記

tableView.separatorStyle = .none

メニュー押された時の動き書きたいんだけど

こう書く！

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)    //選択解除
        /*

            ここになんやかんや書く

         */
    }

みんなもニョキっとメニュー作ろうぜ！

みんなもニョキっとメニュー作ろうぜ！
なんか結構付け焼刃なやり方だけど、ちょちょっと実装したい時とかに参考にしてみてください（絶対こんなのよりいいやり方ある、、、、、、）
GitHubもあげといたから参考にしてみて！
https://github.com/sugijotaro/NyokittoMenu

参考

環境

Xcodeのバージョン：11.5
ライブラリ：PanModal