JavaScriptプログラマがSwift iOSアプリを2週間で作って公開してみた〜その12 NavigationBar & UITabBarItem Customization〜


JavaScriptプログラマー(JSer)がSwiftデビューして、ただ作りたいアプリを作ってみたシリーズ第12回目です。

前回は下にスクロールを続けた時に随時データを読み込むInfinite Scroll(無限スクローリング)についてでした。今回は割とライトな話題で、NavigationやUITabBarItemのテーマカラーとかの設定など、見た目のカスタマイズについてです。

このアプリは淡い緑色をコンセプトカラー(theme)として使っています。
多分、色の指定を全くしないと、以下のようになんとなくグレイベースのNavigationになります。

iOS Simulator Screen Shot 2015.02.08 18.13.54

コンセプトカラーなどはプログラム中の色々なところから参照されるので、Constants用のクラスを作ってThemeというstructを作ってアクセスできるようにしました。今回は使う色をbaseのカラーや、コンセプトカラー、twitternおカラーなど5種類ほど用意しました。

Constants.swift

import Foundation
import UIKit

class Constants {
    
    struct Product {
        static func version() -> String {
            return "1.2"
        }
    }
    
    struct Theme {
        // Concept Theme RGB 144 213 189 (#90d5bd)
        static func concept() -> UIColor {
            return UIColor(red: 144.0/255, green: 213.0/255, blue: 189.0/255, alpha: 1.0)
        }
        // Red RGB 255 50 72 (#ff3248)
        static func reset() -> UIColor {
            return UIColor(red: 1.0, green: 50.0/255, blue: 72.0/255, alpha: 1.0)
        }
        // Twitter color RGB 62 150 238 (#3e96ee)
        static func twitter() -> UIColor {
            return UIColor(red: 62.0/255, green: 150.0/255, blue: 238.0/255, alpha: 1.0)
        }
        // Gray background RGB 242 244 237(#f2f4ed)
        static func base() -> UIColor {
            return UIColor(red: 242.0/255, green: 244.0/255, blue: 237.0/255, alpha: 1.0)
        }
        // Grayed font color 66 67 64
        static func gray() -> UIColor {
            return UIColor(red: 66.0/255, green: 67.0/255, blue: 64.0/255, alpha: 1.0)
        }
    }
}

このテーマカラーをUINavigationBarやUITabBarのクラスメソッドを使ってセットします。AppDelegate.swiftのfunc applicationで初期化処理の後に色を指定します。

AppDelegate.swift

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // アプリケーション初期化処理
        self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
        // check if session already exists
        if let user = Twitter.sharedInstance().session()?.userName? {
            self.window?.rootViewController = MainTabViewController()
        }else{
            self.window?.rootViewController = LoginViewController()
        }
        self.window?.backgroundColor = UIColor.whiteColor()
        self.window?.makeKeyAndVisible()
     
        // 以下、色指定
        // ナビゲーションバーの色
        UINavigationBar.appearance().barTintColor = Constants.Theme.concept()
        // ナビゲーションバーボタンのベースの色(設定アイコンの色など)
        UINavigationBar.appearance().tintColor = UIColor.whiteColor()
        // ナビゲーションバーのタイトル文字色
        UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()]
        // ナビゲーションバーの背景色
        UINavigationBar.appearance().backgroundColor = UIColor.whiteColor()
        // TabBarItemのアイコンの色
        UITabBar.appearance().tintColor = Constants.Theme.twitter()
        // 画面上部のキャリアなどが表示されるステータスバーの文字色
        // info.plistで”View controller-based status bar”をNOにセットする必要あり
        UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.LightContent, animated: true)
        
        return true
    }

これでアプリ内で使うUINavigationBarとUITabBarはカスタマイズされた色で使えるようになりました!

色指定するとこんな感じ。

Photo 1-15-15, 2 15 18 AM

以上。次回は、ユーザーが何かアクションを起こした後に表示するトーストのポップアップとかローディングマークについてです。

TwitStockerのダウンロードはこちらから。
https://itunes.apple.com/en/app/twitstocker/id958798898?l=ja&ls=1&mt=8