iOS
UIView
Swift
menu

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

More than 1 year has passed since last update.

Banner.png

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

yysskk/SwipeMenuViewController


デモ

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

Segmented style
Flexible style



導入方法

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

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

pod 'SwipeMenuViewController'

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

github "yysskk/SwipeMenuViewController"


使い方

SwipeMenuViewControllerではSwipeMenuViewSwipeMenuViewControllerを利用できます。


SwipeMenuView

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

スクリーンショット 2017-08-27 12.52.32.png

2) 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)
}
}

3) 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
}
}


4) 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)

}
}


2) 適宜、SwipeMenuViewDataSourceSwipeMenuViewDelegateをオーバーライドさせてください。


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活動もしっかりやっていこうという気持ちでライブラリ化しました :muscle:

もっとこうした方がいいなどありましたら、どしどしPRお待ちしております :bow: