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

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

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

#[Page Menu View](https://github.com/WataruMaeda/pageMenuView)

![sample-1.gif](https://qiita-image-store.s3.amazonaws.com/0/102821/21949b1c-76ea-3915-a464-1efffa01e4d7.gif)

![sample-2.gif](https://qiita-image-store.s3.amazonaws.com/0/102821/6a053b13-3bb7-64a7-558a-f87e03b1999f.gif)


# 特徴

・スワイプ、タップでビューの切り替えができる
・ビュー切り替え前後のタイミングを取得できる
・メニュータイトルの更新ができる
・オリエンテーション対応

ライブラリは[ こちら ](https://github.com/WataruMaeda/pageMenuView)にあります。

# インストール

Xcodeに手動でドロップします。[こちら](https://github.com/WataruMaeda/pageMenuView/tree/master/PageMenuView)のソースをとりこんでください。

# 使い方

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

```Swift
// 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]
```

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

```Swift
// オプションを初期化
let option = PageMenuOption(frame: CGRect(
  x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))
```

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

```Swift
// PageMenuViewにViewControllerとOptionを渡す
let pageMenu = PageMenuView(viewControllers: viewControllers, option: option)
view.addSubview(pageMenu)
```

サンプルコードは[こちら](https://github.com/WataruMaeda/pageMenuView/tree/master/samples/try_page_menu_2)になります。
表示は以下のようになるかと思います。

![sample-3.gif](https://qiita-image-store.s3.amazonaws.com/0/102821/f09a45d3-5131-c350-d582-dcdacbc8fdbf.gif)

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

`PageMenuViewDelegate ` を 追加してください。 

```Swift
class ViewController: UIViewController, PageMenuViewDelegate {
```

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

```Swift
pageMenu.delegate = self
```

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

```Swift
func willMoveToPage(_ pageMenu: PageMenuView, from viewController: UIViewController, index currentViewControllerIndex : Int) {}
func didMoveToPage(_ pageMenu: PageMenuView, to viewController: UIViewController, index currentViewControllerIndex: Int) {}
```
# カスタマイズしたい

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

![sample-4.png](https://qiita-image-store.s3.amazonaws.com/0/102821/856c9171-a634-b9c0-6677-7c81ee14b9b2.png)

```Swift
// 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](https://qiita-image-store.s3.amazonaws.com/0/102821/b53260fd-9bad-33e5-4b0c-99ca8b6a1515.png)


```Swift
// 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](https://qiita-image-store.s3.amazonaws.com/0/102821/9dcc0838-cb51-529b-6a04-718b780bd502.png)


```Swift
// 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 |

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