• TOP
• プログラミング

【DropDown】Swiftで簡単にドロップダウンメニューを実装する方法まとめ

2020-06-14T20:00:00+09:00 2020-06-14T11:00:04Z アプリ プログラミング

この記事ではSwiftで簡単にドロップダウンメニューを実装する方法について解説していきたいと思います．
また，今回使用するフレームワークはDropDownとなります．
https://github.com/AssistoLab/DropDown

Podfileの設定

まずは先人の力を借りることが重要ですね．というわけでcocoapodsを使いますので皆さんインストールしてください．

sudo gem install cocoapods

インストールが終わった段階で以下のコマンドを打ちましょう．

pod setup

これでcocoapodsの設定は完了です．

Xcodeのプロジェクトファイルに移動して以下のコマンドを打ち込んでください．

pod init

これでフォルダ内にPodfileが作成されるはずです．次にPodfileのuse_frameworks!の下に以下のコマンドを追記してください．

pod 'DropDown'

その後pod installでライブラリをインストールしましょう．

ソースコード

以下がDropDownを作成するコードとなります．

import UIKit
import DropDown

class ArmCollectionViewController: UIViewController {
    let selectElementDropDown = DropDown()
    @IBOutlet weak var selectElementButton: UIButton!
    @IBOutlet weak var selectElementDropDownView: UIView!
    elementArray: [String] = ["火"，"水"]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        initSelectElementDropDownMenu()
    }

   // MARK: - Select Element Drop Down Menu Methods
    func initSelectElementDropDownMenu(){
        selectElementButton.backgroundColor = .clear
        selectElementDropDown.anchorView = selectElementDropDownView
        selectElementDropDown.dataSource = elementArray // [String]
        selectElementDropDown.direction = .bottom
        selectElementDropDown.selectionAction = { [unowned self] (index: Int, item: String) in
            // 選択されたときのActionを記載する
                }
            }
        }
    }

  @IBAction func elementDropDownTapped(_ sender: UIButton) {
        selectElementDropDown.show()
    }

このコードはselectElementDropDownViewにドロップダウンメニューのViewを設置します．また，その上に透明のボタンを設置していると仮定して，そのボタンがタップされればドロップダウンメニューが展開されるというコードになります．
動作例は以下の画像のようになります．

このような感じでドロップダウンメニューを作成することができました．

まとめ

この記事では簡単にドロップダウンメニューを実装する方法について解説しました．
みなさんも是非試してみてください．