【Swift】Twitterの下から出てくるメニューを作りたい！！！（PanModal）

# Twitterの下から出てくるメニュー！使いやすいよね
<img width="375" alt="405C6D77-69EB-440C-9B95-E47DCDC65CE1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/781039af-0eea-1438-3ade-bf901ab471e2.png">
<img width="375" alt="15D45886-C620-47D8-BB85-CE5B974FF478.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/d73eee88-183d-3241-7369-e6cebb24ef1b.jpeg">
<img width="375" alt="4DFF4EDB-633D-469C-B1CA-D459F0E84E26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/1b604f4c-fe24-eeb9-1bfe-5361ead2411c.png">
↑こんな感じでしたからニョキって出るやつ
**実装してえ！！！😳😳😳**
# ライブラリを使って実装しよう
普通にライブラリなしでも作れるとは思うけど、やっぱりめんどくさいなーーーということで
それっぽいことができそうなライブラリを探してきたよ！🙋‍♂️
https://github.com/slackhq/PanModal
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/04e118ce-1317-0bf4-e780-81a4f7c42f0a.png)
どっかでみたことあるなーって人いるでしょ？
「ｽｯｶｶｶ」でおなじみのSlackのライブラリなんですねー

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

#作ろう！
## 1. ライブラリを入れよう
cocoapodsを使いますよー！
Podfileにこれを追記して pod installしてください！

```text
pod 'PanModal'
```

## 2. ニョキっとさせるボタンを追加
お好みでButtonとかTableViewとかを置いてあげよう
これを押したときにニョキっとメニューが出るようなイメージ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/96f6abbd-7362-f18b-3e1f-c55204ce83e1.png)

## 3. ニョキっとメニュー本体を作る
新しいファイルを作ろう！
名前はなんでも
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/8ea0e762-f3c3-e3b2-4d43-01bd3ac83c93.png)

そんでとりまUITableViewDelegateとUITableViewDataSource、あとそれに関連したなんやかんやを書く！
（UITableViewでいいじゃんと思ったんですけど、なんかうまく動かなかったのでこうしてます　謎です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/8adbf3f6-96cb-9fd2-7167-838959890fd9.png)
次にニョキっとのキモを作ってくぞ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/c9763d89-560b-a859-8591-f50e01d6b36a.png)
PanModalをimportして、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/cddc08da-4174-8fdc-bab3-1560ef9c521d.png)
もろもろ書こう！
これでニョキっとメニュー自体は完成！

## 4. ニョキっとメニューを呼び出そう！
ニョキッとメニューを出したいタイミングで、

```swift:ViewController.swift
presentPanModal(NyokittoViewController())
```

こいつを呼び出せばオッケー！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/52f45ce3-8c05-8e14-6070-3de5221e17d8.png)

## 5. 完成！
これでtwitterのメニューっぽいニョキっとメニューが完成！お疲れさまです〜〜〜〜〜〜
[![ビデオ開けなかったわ...ぴえん...](http://img.youtube.com/vi/mhZr_9rnEqo/0.jpg)](http://www.youtube.com/watch?v=mhZr_9rnEqo)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/0a304fd5-9aaa-1ef0-1833-cce63670d7c4.png)

## 6. いろいろ改良してえ！
↑のやつだと問題点がいろいろあるから改良しようぜ！っていうやつです
### なんかメニューがスクロールするんだけど
そういう時はこれを追記だ！

```swift
tableView.isScrollEnabled = false
```
これを設定するとtableViewがスクロールしなくなるよ！便利だね！
### ヘッダー欲しいんだけど
そういう時はヘッダーを作ろう！

```swift
let headerView:UIView = UIView()
let label: UILabel = UILabel()
```
ヘッダービューとそこに載せたいものを定義

これを追記

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

```swift
    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の高さを変えたい時は

```swift
tableView.sectionHeaderHeight = 40
```

そうするとこんな感じ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/b4430259-bc1d-0dee-4081-4ebce719c65b.png)


### 区切り線邪魔なんだけど
そういう時はこれを追記

```swift
tableView.separatorStyle = .none
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/78c3d6ce-25f8-c69b-907c-ded70fedbec8.png)


### メニュー押された時の動き書きたいんだけど
こう書く！

```swift
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)    //選択解除
        /*
         
            ここになんやかんや書く
         
         */
    }
```

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

## 参考
https://github.com/slackhq/PanModal

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