swift初心者がSmartNews風ニュースアプリを作ってみる過程を晒す(2) - 横スクロールするメニューバーを実装


## はじめに

前回は、こんな記事を書きました。
[swift初心者がSmartNews風ニュースアプリを作ってみる過程を晒す(1) - 事前準備する](http://qiita.com/tjnet/items/b4b00d58fd67451de1e2)


## 作りたいもの

完成イメージはこんな感じです。

![20141130150023.png](https://qiita-image-store.s3.amazonaws.com/0/34321/8fc51166-cf74-d18e-e5c8-8d5be02192ba.png)

道のりは遠いですね。。。まずは、ニュースアプリによくある、横スクロールするメニューバーを実装したいと思います。

サンプルはこんな感じです。

![20151106_pagemenu.gif](https://qiita-image-store.s3.amazonaws.com/0/34321/8b1b1f2e-2948-0ff7-4d54-049875d1fb68.gif)

## 開発環境

iOS9、Xcode7、swift2で開発を行っています。

## プロジェクト作成

まずは、Single View Application template を使用して、新規プロジェクトを作成します。

![スクリーンショット 2015-11-03 21.08.17.png](https://qiita-image-store.s3.amazonaws.com/0/34321/57542e14-6e40-21fe-70ab-cf202cd38811.png)

各テンプレートのオプションは、以下の通り入力します。

- Product Name: NewsApp
- Organization Name: お好きなものを入力してください。
- Organization Identifier: edu.self
- Language: Swift
- Devices: iPhone
- Use Core Data: チェックしない。
- Include Unit Tests: チェックしない。
- Include UI Tests: チェックしない。

プロジェクト作成後、このような画面が表示されます。

![スクリーンショット 2015-11-03 21.18.22.png](https://qiita-image-store.s3.amazonaws.com/0/34321/935c1cc4-6770-f903-5186-bfd8cec1d2e9.png)

## 横スクロールするメニューバーを実装する

[PageMenu](https://github.com/uacaps/PageMenu)というライブラリが良さそうなので、こちらを使用して、実装していきます。

### ライブラリをインストール

1. [PageMenu](https://github.com/uacaps/PageMenu)からダウンロードしたZipを展開して、CAPSPageMenu.swiftをDrag & Dropしてプロジェクトに追加します。


2. CAPSPageMenuを使用するためのプロパティをViewController.swiftに追加します。


```swift
var pageMenu : CAPSPageMenu?
```

### PageMenuを設置する

次のコードをViewController.swiftのviewDidLoadメソッドに記述します。

```swift
        super.viewDidLoad()
        
        // MARK: - UI Setup
        
        self.title = "PAGE MENU"
        self.navigationController?.navigationBar.barTintColor = UIColor(red: 30.0/255.0, green: 30.0/255.0, blue: 30.0/255.0, alpha: 1.0)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
        self.navigationController?.navigationBar.barStyle = UIBarStyle.Black
        self.navigationController?.navigationBar.tintColor = UIColor.whiteColor()
        self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.orangeColor()]
        
        // Do any additional setup after loading the view, typically from a nib.
        
        // Array to keep track of controllers in page menu
        var controllerArray : [UIViewController] = []
        
        // Create variables for all view controllers you want to put in the
        // page menu, initialize them, and add each to the controller array.
        // (Can be any UIViewController subclass)
        // Make sure the title property of all view controllers is set
        // Example:
        var controller1 : UIViewController = UIViewController(nibName: "TableViewController", bundle: nil)
        controller1.title = "SAMPLE TITLE"
        controllerArray.append(controller1)
        
        var controller2 : UIViewController = UIViewController(nibName: "TableViewController", bundle: nil)
        controller2.title = "SAMPLE TITLE"
        controllerArray.append(controller2)

        var controller3 : UIViewController = UIViewController(nibName: "TableViewController", bundle: nil)
        controller3.title = "SAMPLE TITLE"
        controllerArray.append(controller3)

        var controller4 : UIViewController = UIViewController(nibName: "TableViewController", bundle: nil)
        controller4.title = "SAMPLE TITLE"
        controllerArray.append(controller4)

        // Customize page menu to your liking (optional) or use default settings by sending nil for 'options' in the init
        // Example:
        var parameters: [CAPSPageMenuOption] = [
            .ScrollMenuBackgroundColor(UIColor(red: 30.0/255.0, green: 30.0/255.0, blue: 30.0/255.0, alpha: 1.0)),
            .ViewBackgroundColor(UIColor(red: 20.0/255.0, green: 20.0/255.0, blue: 20.0/255.0, alpha: 1.0)),
            .SelectionIndicatorColor(UIColor.orangeColor()),
            .BottomMenuHairlineColor(UIColor(red: 70.0/255.0, green: 70.0/255.0, blue: 80.0/255.0, alpha: 1.0)),
            .MenuItemFont(UIFont(name: "HelveticaNeue", size: 13.0)!),
            .MenuHeight(80.0),
            .MenuItemWidth(90.0),
            .CenterMenuItems(true)
        ]
        
        // Initialize page menu with controller array, frame, and optional parameters
        pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRectMake(0.0, 0.0, self.view.frame.width, self.view.frame.height), pageMenuOptions: parameters)
        
        
        self.addChildViewController(pageMenu!)
        self.view.addSubview(pageMenu!.view)
        
        pageMenu!.didMoveToParentViewController(self)

```

最後に、TableViewControllerのクラスファイルと、それに対応するXiBファイルを作成します。

![スクリーンショット 2015-11-05 23.51.39.png](https://qiita-image-store.s3.amazonaws.com/0/34321/99f8aa16-7c32-60cc-e95c-3cea927d6547.png)

### 動作確認

動きました! 次回はライブラリの中身を読んだり、もう少し外観をブラッシュアップしたいと思います。

![20151106_pagemenu.gif](https://qiita-image-store.s3.amazonaws.com/0/34321/8b1b1f2e-2948-0ff7-4d54-049875d1fb68.gif)