14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Swift】Twitterの下から出てくるメニューを作りたい!!!(PanModal)

Last updated at Posted at 2020-05-31

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

405C6D77-69EB-440C-9B95-E47DCDC65CE1.png 15D45886-C620-47D8-BB85-CE5B974FF478.jpg 4DFF4EDB-633D-469C-B1CA-D459F0E84E26.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してください!

pod 'PanModal'

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

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

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

新しいファイルを作ろう!
名前はなんでも
image.png

そんでとりまUITableViewDelegateとUITableViewDataSource、あとそれに関連したなんやかんやを書く!
(UITableViewでいいじゃんと思ったんですけど、なんかうまく動かなかったのでこうしてます 謎です)
image.png
次にニョキっとのキモを作ってくぞ!
image.png
PanModalをimportして、
image.png
もろもろ書こう!
これでニョキっとメニュー自体は完成!

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

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

ViewController.swift
presentPanModal(NyokittoViewController())

こいつを呼び出せばオッケー!
image.png

5. 完成!

これでtwitterのメニューっぽいニョキっとメニューが完成!お疲れさまです〜〜〜〜〜〜
ビデオ開けなかったわ...ぴえん...
image.png

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

そうするとこんな感じ!
image.png

区切り線邪魔なんだけど

そういう時はこれを追記

tableView.separatorStyle = .none

image.png

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

こう書く!

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

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

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

参考

環境

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

14
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?