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

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

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

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

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


『 Swift 』Article List