swift初心者がSmartNews風ニュースアプリを作ってみる過程を晒す(3) - PageMenuライブラリを改造して外観をブラッシュアップ

はじめに

前回は、こんな記事を書きました。
swift初心者がSmartNews風ニュースアプリを作ってみる過程を晒す(2) - 横スクロールするメニューバーを実装 - Qiita

現在の進捗

現在の進捗はこんな感じです。
メニューバーの外観を、SmartNewsライクなものに変更してみます。

ここまでのソースコードは下記コマンドで取得できます。

git clone --branch v1.1 https://github.com/tjnet/NewsAppWithSwift.git

今回、作るもの

今回は、以下のようなメニューバーを作成してみます。

開発環境

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

Navigation Controllerの導入

Storyboard 上で、ViewController を選択して、メニューから以下を実行します。
Editor | Embed In | Navigation Controller

Storyboard 上にNavigation Controllerが挿入されます。

参考

ios - When I should use Navigation Controller? - Stack Overflow

Navigation Barを表示する

Navigation Controllerを選択します。

Top Barを'None'から'Opaque Navigation Bar'に変更します。

ライブラリ(PageMenu)を読む

ここまでで、Navigation Barの表示は行えていることと思います。
次に、以下のように、各ニュースカテゴリに、それぞれ異なる背景色を設定したいと思います。

PageMenu/CAPSPageMenu.swift at master · uacaps/PageMenuをもう少し、しっかり読んでみましょう。

CAPSPageMenu.swift

class MenuItemView: UIView {
    // MARK: - Menu item view

    var titleLabel : UILabel?
    var menuItemSeparator : UIView?

    func setUpMenuItemView(menuItemWidth: CGFloat, menuScrollViewHeight: CGFloat, indicatorHeight: CGFloat, separatorPercentageHeight: CGFloat, separatorWidth: CGFloat, separatorRoundEdges: Bool, menuItemSeparatorColor: UIColor) {
        titleLabel = UILabel(frame: CGRectMake(0.0, 0.0, menuItemWidth, menuScrollViewHeight - indicatorHeight))

        menuItemSeparator = UIView(frame: CGRectMake(menuItemWidth - (separatorWidth / 2), floor(menuScrollViewHeight * ((1.0 - separatorPercentageHeight) / 2.0)), separatorWidth, floor(menuScrollViewHeight * separatorPercentageHeight)))
        menuItemSeparator!.backgroundColor = menuItemSeparatorColor

        if separatorRoundEdges {
            menuItemSeparator!.layer.cornerRadius = menuItemSeparator!.frame.width / 2
        }

        menuItemSeparator!.hidden = true
        self.addSubview(menuItemSeparator!)

        self.addSubview(titleLabel!)
    }

    func setTitleText(text: NSString) {
        if titleLabel != nil {
            titleLabel!.text = text as String
            titleLabel!.numberOfLines = 0
            titleLabel!.sizeToFit()
        }
    }
}

MenuItemViewクラスが、各メニュー要素の外観(titleLabel, backgroundColor)を管理しているようです。

一通りソースを読んでみましたが、MenuItemViewのbackgroundColorを個別に設定するメソッドは存在しないようです。
どうすれば良いのでしょう...？

ここではライブラリに手を入れて、対応することにしました。

CAPSPageMenu.swiftを編集する

func setUpMenuItemViewでMenuItemViewのsetupを行っているので、まずは引数でbackgroundColorを指定できるようにします。

CAPSPageMenu.swift

    func setUpMenuItemView(menuItemWidth: CGFloat, menuScrollViewHeight: CGFloat, indicatorHeight: CGFloat, separatorPercentageHeight: CGFloat, separatorWidth: CGFloat, separatorRoundEdges: Bool, menuItemSeparatorColor: UIColor, menuItemBackgroundColor: UIColor) { //引数menuItemBackgroundColorを追加
        titleLabel = UILabel(frame: CGRectMake(0.0, 0.0, menuItemWidth, menuScrollViewHeight - indicatorHeight))

        menuItemSeparator = UIView(frame: CGRectMake(menuItemWidth - (separatorWidth / 2), floor(menuScrollViewHeight * ((1.0 - separatorPercentageHeight) / 2.0)), separatorWidth, floor(menuScrollViewHeight * separatorPercentageHeight)))
        menuItemSeparator!.backgroundColor = menuItemSeparatorColor
        backgroundColor = menuItemBackgroundColor//ここでbackgroundColorを設定

        if separatorRoundEdges {
            menuItemSeparator!.layer.cornerRadius = menuItemSeparator!.frame.width / 2
        }

        menuItemSeparator!.hidden = true
        self.addSubview(menuItemSeparator!)

        self.addSubview(titleLabel!)
    }

次に、各MenuItemViewの色を指定するメソッドを作成します。

    // MARK: - Set color per page
    func colorAtIndex(index : CGFloat) -> UIColor {
        var color = UIColor.clearColor()

        switch index % 5 {
        case 0:
            color = UIColor.redColor()
        case 1:
            color = UIColor.orangeColor()
        case 2:
            color = UIColor.greenColor()
        case 3:
            color = UIColor.blueColor()
        case 4:
            color = UIColor.purpleColor()
        default:
            break
        }
        return color
    }

最後に、setUpMenuItemViewを呼び出している箇所に引数を追加します。

CAPSPageMenu.swift

            let menuItemBackgroundColor = colorAtIndex(index)

             if useMenuLikeSegmentedControl {
                //引数menuItemBackgroundColorを追加
                menuItemView.setUpMenuItemView(CGFloat(self.view.frame.width) / CGFloat(controllerArray.count), menuScrollViewHeight: menuHeight, indicatorHeight: selectionIndicatorHeight, separatorPercentageHeight: menuItemSeparatorPercentageHeight, separatorWidth: menuItemSeparatorWidth, separatorRoundEdges: menuItemSeparatorRoundEdges, menuItemSeparatorColor: menuItemSeparatorColor, menuItemBackgroundColor: menuItemBackgroundColor) 
             } else {
                //引数menuItemBackgroundColorを追加
                menuItemView.setUpMenuItemView(menuItemWidth, menuScrollViewHeight: menuHeight, indicatorHeight: selectionIndicatorHeight, separatorPercentageHeight: menuItemSeparatorPercentageHeight, separatorWidth: menuItemSeparatorWidth, separatorRoundEdges: menuItemSeparatorRoundEdges, menuItemSeparatorColor: menuItemSeparatorColor, menuItemBackgroundColor: menuItemBackgroundColor) 
             }

動作確認

動きました! 次回はOSSライブラリを用いて、ニュース記事の取得を行ってみます。

ソースコードは下記コマンドで取得できます。

git clone --branch v1.2 https://github.com/tjnet/NewsAppWithSwift.git

感想

今回はcolorAtIndexメソッドの中に各MenuItemViewに設定するbackgroundColorをベタ書きしてしまいました。将来的にはサーバからのレスポンスに応じて、各メニューのタイトルや色を設定したい場面があるかもしれません。
本来は各MenuItemViewのbackgroundColorはライブラリの外部から設定できるようにした方が、より柔軟に扱えそうです。この辺りの書き方は、もう少し勉強してみたいと思います。

参考

The Swift Programming Language (Swift 2.1): Enumerations
Xcode - NSAttributedStringでCSSの各プロパティの再現方法あれこれ - Qiita