[Swift] ページメニュー簡単に実現できるライブラリつくったよ

More than 1 year has passed since last update.

こんにちは。久しぶりの投稿になります。

ページメニューのライブラリつくってみました。


Page Menu View

sample-1.gif

sample-2.gif


特徴

・スワイプ、タップでビューの切り替えができる

・ビュー切り替え前後のタイミングを取得できる

・メニュータイトルの更新ができる

・オリエンテーション対応

ライブラリは こちら にあります。


インストール

Xcodeに手動でドロップします。こちらのソースをとりこんでください。


使い方

UIViewControllerクラスを配列に格納してください

// UIViewContoller を初期化 -> 背景色、タイトルを設定

let viewController1 = UIViewController()
viewController1.view.backgroundColor = .blue
viewController1.title = "Child View 1"

let viewController2 = UIViewController()
viewController2.view.backgroundColor = .green
viewController2.title = "Child View 2"

let viewController3 = UIViewController()
viewController3.view.backgroundColor = .yellow
viewController3.title = "Child View 3"

// 配列に初期化したViewControllerを格納
let viewControllers = [viewController1, viewController2, viewController3]

オプションを指定します。詳しくは後の項目で説明したいと思います。

// オプションを初期化

let option = PageMenuOption(frame: CGRect(
x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))

PageMenuViewに、ViewControllersとoptionを渡し、初期化します。

// PageMenuViewにViewControllerとOptionを渡す

let pageMenu = PageMenuView(viewControllers: viewControllers, option: option)
view.addSubview(pageMenu)

サンプルコードはこちらになります。

表示は以下のようになるかと思います。

sample-3.gif


ビュー切り替え前後を感知したい

PageMenuViewDelegate を 追加してください。

class ViewController: UIViewController, PageMenuViewDelegate {

delegate を PageMenuView に設定してください

pageMenu.delegate = self

以下関数を追加してください。ビュー切り替えの前後に以下関数が呼ばれ、現在のViewControllerとIndexを取得することができます。

func willMoveToPage(_ pageMenu: PageMenuView, from viewController: UIViewController, index currentViewControllerIndex : Int) {}

func didMoveToPage(_ pageMenu: PageMenuView, to viewController: UIViewController, index currentViewControllerIndex: Int) {}


カスタマイズしたい

いくつか例をあげていこうかと思います。以下がデフォルトの表示になります。

sample-4.png

// Page menu UI option

let option = PageMenuOption(frame: CGRect(
x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))

メニューの幅を指定したい場合

sample-5.png

// Page menu UI option

var option = PageMenuOption(
frame: CGRect(x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))
option.menuItemWidth = view.frame.size.width / 3
option.menuTitleMargin = 0

menuItemWidthで幅を指定し、menuTitleMarginでメニュー間の間隔を0pxにします。

色を変更したい場合、以下の指定になります。

sample-6.png

// Page menu UI option

var option = PageMenuOption(frame: CGRect(
x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))
option.menuItemWidth = view.frame.size.width / 3
option.menuItemBackgroundColorNormal = UIColor(red:0.388, green:0.424, blue:0.467, alpha:1)
option.menuItemBackgroundColorSelected = UIColor(red:0.227, green:0.678, blue:0.851, alpha:1)
option.menuTitleMargin = 0
option.menuTitleColorNormal = .lightGray
option.menuTitleColorSelected = .white
option.menuIndicatorHeight = 6
option.menuIndicatorColor = UIColor(red:0.969, green:0.424, blue:0.510, alpha:1)

以下に各要素の説明になります


Optionの要素一覧

要素名
タイプ
詳細
初期値
requirment

frame
CGRect
ページメニューのサイズとポジション
zero
*required

menuItemHeight
CGFloat
メニューの高さ
44px
optional

menuItemWidth
CGFloat
メニューの幅
depends on text length
optional

menuItemBackgroundColorNormal
UIColor
メニューの背景色 (未選択時)
white
optional

menuItemBackgroundColorSelected
UIColor
メニューの背景色 (選択時)
white
optional

menuTitleMargin
CGFloat
メニュー間のマージン
40 px
optional

menuTitleFont
UIFont
メニュータイトルのフォントサイズとファミリー
systemFont, 14px
optional

menuTitleColorNormal
UIColor
メニュータイトルの色 (未選択時)
lightGray
optional

menuTitleColorSelected
UIColor
メニュータイトルの色 (選択時)
black
optional

menuIndicatorHeight
CGFloat
アンダーラインの高さ
3px
optional

menuIndicatorColor
UIColor
アンダーラインの色
darkGray
optional

最後まで読んで頂き、ありがとうございました!