【Swift】「SideMenu」ライブラリを使ってサイドバーメニューをコードのみで実装する

村上 著者:村上

【Swift】「SideMenu」ライブラリを使ってサイドバーメニューをコードのみで実装する

タイトル通り、サイドバーメニューをコードのみで実装する方法です。
Storyboard を使う方法もちらほらありましたが、今後複数人で開発することになった場合に管理が面倒になるのと、個人的に Storyboard が苦手なので使いたくなかったので、コードのみの実装方法を採用しました。

今回参考にさせていただいたサイトはこちらから。

ios SideMenu ライブラリの使い方 – とりあえずphpとか
http://kimagureneet.hatenablog.com/entry/2019/09/06/223040

また、使用したライブラリ「SideMenu」の GitHub ページはこちらです。

GitHub – GitHub – jonkykong/SideMenu: Simple side/slide menu control for iOS, no code necessary! Lots of customization. Add it to your project in 5 minutes or less.
https://github.com/jonkykong/SideMenu

 

早速実装方法ですが、まず Podfile に下記を追加し、pod install コマンドを実行します。

pod 'SideMenu'

そうすると、SideMenu ライブラリが使用可能になります。

次に、任意の名前のコントローラを作成します。
私は MenuViewController.swift という名前で作成しました。
中身は下記の通り。
なお、サイドバーのメニューは TableView を使って表示しています。

import UIKit
import SideMenu

class MenuViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    private var tableView = UITableView();
    var items: [String] = ["メニュー1","メニュー2","メニュー3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 背景色は白にする
        view.backgroundColor = .white
        
        // 見た目調整
        self.navigationController?.navigationBar.tintColor = .clear
        self.navigationController?.navigationBar.barStyle = UIBarStyle.black
        self.navigationController?.navigationBar.isTranslucent = true
        self.navigationController?.navigationBar.backgroundColor = .blue
        
        // TableView を追加
        tableView.frame = view.bounds
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        tableView.tableFooterView = UIView()
        view.addSubview(tableView)
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = items[indexPath.row]
        return cell
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // セルの選択を解除
        tableView.deselectRow(at: indexPath, animated: true)
        // サイドバーを閉じる
        dismiss(animated: true, completion: nil)
        
        NotificationCenter.default.post(
            name: Notification.Name("SelectMenuNotification"),
            object: nil,
            userInfo: ["itemNo": indexPath.row] // 返したいデータをセットする
        )
    }
}

 

次に、サイドバーメニューを追加したいページに下記を追加します。
なお、import SideMenu の追加を忘れずに。

override func viewDidLoad() {
    super.viewDidLoad()
    
    ......

    // サイドバーメニューからの通知を受け取る
    NotificationCenter.default.addObserver(
        self,
        selector: #selector(catchSelectMenuNotification(notification:)),
        name: Notification.Name("SelectMenuNotification"),
        object: nil
    )
}
// 選択されたサイドバーのアイテムを取得
@objc func catchSelectMenuNotification(notification: Notification) -> Void {
    // メニューからの返り値を取得
    let item = notification.userInfo // 返り値が格納されている変数
    // 実行したい処理を記述する
}

サイドメニューバーを開く時には下記のコードを使います。

let menu = SideMenuManager.default.menuLeftNavigationController!
present(menu, animated: true, completion: nil)

実装に必要なコードは以上です。
なお、今回はサイドバーのメニューの表示に TableView を使っていますが、もちろんボタンとかにしても OK です。
その場合は、MenuViewController.swiftviewDidLoad() 内で記述してください。

 

以上、Swift でサイドバーメニューをコードのみで実装する方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)

著者について

村上

村上 administrator