タブスワイプで画面を切り替えるメニューUI

スマートニュースやグノシーのようなニュースアプリでよく使われていて、最近ではInstagramやTwitter, Spotifyなど、たくさんのアプリで使われている印象のあるUIを簡単に実装できるライブラリを公開しました

yysskk/SwipeMenuViewController

デモ

SwipeMenuViewは２つのスタイルに対応していて、以下のデモのような見た目を実現できます。またUIのカスタムやタブバーの挙動はoptionsを指定することで対応できます。

Segmented style	Flexible style

導入方法

CocoapodsとCarthageに対応しています。

Cocoapodsを利用する場合はPodfileに以下を追記しpod installを叩いてください。

pod 'SwipeMenuViewController'

Carthageを利用する場合はCartfileに以下を追記しcarthage updateを叩いて、Carthageの設定を行ってください。

github "yysskk/SwipeMenuViewController"

使い方

SwipeMenuViewControllerではSwipeMenuViewとSwipeMenuViewControllerを利用できます。

SwipeMenuView

1.) 利用方法はいろいろありますが、ここではStoryboardに設置したUIViewにSwipeMenuViewを継承させて、ViewController.swiftに関連づけてます。

1. swipeMenuViewにdidSetでoptionsのカスタム設定を書いていきます。

ViewController.swift

@IBOutlet weak var swipeMenuView: SwipeMenuView! {
    didSet {
        swipeMenuView.delegate = self
        swipeMenuView.dataSource = self
        var options: SwipeMenuViewOptions = .init()
		// options customize
        swipeMenuView.reload(options: options)
    }
}

1. ViewControllerにSwipeMenuViewDataSourceを設定してください。

ViewController.swift

extension ViewController: SwipeMenuViewDataSource
    func numberOfPages(in swipeMenuView: SwipeMenuView) -> Int {
        return datas.count
    }

    func swipeMenuView(_ swipeMenuView: SwipeMenuView, titleForPageAt index: Int) -> String {
        return datas[index]
    }

    func swipeMenuView(_ swipeMenuView: SwipeMenuView, viewControllerForPageAt index: Int) -> UIViewController {
        let vc = ViewController() 
        return vc
    }
}

1. ViewControllerにSwipeMenuViewDelegateのオプショナルメソッドを適宜設定してください。

ViewController.swift

extension ViewController: SwipeMenuViewDelegate {
    func swipeMenuView(_ swipeMenuView: SwipeMenuView, viewWillSetupAt currentIndex: Int) {
        // Codes
    }

    func swipeMenuView(_ swipeMenuView: SwipeMenuView, viewDidSetupAt currentIndex: Int) {
        // Codes
    }

    func swipeMenuView(_ swipeMenuView: SwipeMenuView, willChangeIndexFrom fromIndex: Int, to toIndex: Int) {
        // Codes
    }

    func swipeMenuView(_ swipeMenuView: SwipeMenuView, didChangeIndexFrom fromIndex: Int, to toIndex: Int) {
        // Codes
    }
}

SwipeMenuViewController

1. SwipeMenuViewControllerを利用する場合はViewControllerファイルにSwipeMenuViewControllerを継承させることで設定できます。

CustomViewController.swift

class CustomViewController: SwipeMenuViewController {

	override func viewDidLoad() {
		super.viewDidLoad()
		
		var options: SwipeMenuViewOptions = .init()
		// options customize
       swipeMenuView.reloadData(options: options)

	}
}	

1. 適宜、SwipeMenuViewDataSource、SwipeMenuViewDelegateをオーバーライドさせてください。

CustomViewController.swift

extension CustomViewController {
    // MARK: - SwipeMenuViewDelegate
    override func swipeMenuView(_ swipeMenuView: SwipeMenuView, viewWillSetupAt currentIndex: Int) {
        // Codes
    }

    override func swipeMenuView(_ swipeMenuView: SwipeMenuView, viewDidSetupAt currentIndex: Int) {
        // Codes
    }

    override func swipeMenuView(_ swipeMenuView: SwipeMenuView, willChangeIndexFrom fromIndex: Int, to toIndex: Int) {
        // Codes
    }

    override func swipeMenuView(_ swipeMenuView: SwipeMenuView, didChangeIndexFrom fromIndex: Int, to toIndex: Int) {
        // Codes
    }

    // MARK - SwipeMenuViewDataSource
    open override func numberOfPages(in swipeMenuView: SwipeMenuView) -> Int {
        return array.count
    }

    override func swipeMenuView(_ swipeMenuView: SwipeMenuView, titleForPageAt index: Int) -> String {
        return array[index]
    }

    override func swipeMenuView(_ swipeMenuView: SwipeMenuView, viewControllerForPageAt index: Int) -> UIViewController {
        let vc = ContentViewController()
        return vc
    }
}

最後

以上でSwipeMenuViewControllerの利用方法を説明しました。わかりにくいところありましたら、コメントやTwitterなどからお願いします！
これからOSS活動もしっかりやっていこうという気持ちでライブラリ化しました
もっとこうした方がいいなどありましたら、どしどしPRお待ちしております