アプリをそれっぽく見せるNavigationBarとTabBarの色の変え方 Swift初心者向け

完成品

対象

・iOSアプリの開発初心者で、それっぽいアプリ作りたいなと思っている方。
・Navigation Bar をカスタムしたいなと思っている方。
・Tab Bar をカスタムしたいなと思っている方。
・毎回 UIColor 使って入力するの面倒だなと思っている方。

開発環境

Xcode10.2
Swift5

概要

1. Navigation Bar と Tab Bar の使い方がわかる！(Controller も)
2. 色を一元管理することで、色の指定、色の変更を簡単にする！
3. Navigation Bar と Tab Bar の色を統一して、アプリっぽさを出す！

セットアップ

コードを書く前に、Xcode を触っていきます!

プロジェクトの立ち上げ

画面の準備

1. 初期の View Controller の削除

Main.storyboard にある ViewController は使わないので、消し去りましょう。

2. Tab Bar Controller を入れる

次に Tab Bar Controller を Storyboard に挿入します。

1. Library をクリック
2. 検索欄に tabbar と入力
3. 結果に出てきた、Tab Bar Controller をドラッグ&ドロップで召喚

4. OK！

Tab Bar Controller をちょっとだけ編集

アイコンがデフォルトだと味気ないので、変更します！

1. Tab Barを選択
2. System Item から好きなものを選択
3. OK!
   (もう１つの画面も同様に編集)

3. Navigation Controller を入れる

1. Tab Bar Controller の次の画面の上にある黄色いところを選択
2. Editor を選択
3. Embed In → Navigation Controller を選択

4. 完成！(もう１つの画面も同様に編集)

Navigation Bar をちょっとだけ編集

タイトルを入れましょー！

1. Navigation Barをクリック
2. Titleを編集
3. OK!
   (もう１つの画面も同様に編集)

Is initial View Controllerの設定

最初に View Controllerを消してしまったので、 Is initial View Controllerの設定がなくなってしまいました。
このまま、プロジェクトをビルドしてRunすると、どの ViewController を表示すれば良いのかがわからず、下記のエラーが発生してしまうのでここで設定しておきます。

Failed to instantiate the default view controller for UIMainStoryboardFile 'Main' - perhaps the designated entry point is not set?

1. 黄色のところを選択
2. Is initial View Controller を選択
3. 矢印があればOK!
   

実装

UIColor を継承したクラス作成

なぜ UIColor を継承したクラスを作成するかというと、１つのファイルで色の指定を管理したいからです。
Tab Bar などのアイテムに色をつける際に、１つ１つの画面で色を設定するのは面倒です。
例えば、全ての画面で Tab Bar の色を黒(#000000)にしていたとします。
色の変更したいな〜と思って、白（#FFFFFF)にすることになったとしたら、全ての画面に適用されているソースコードを変更しなければなりません。
10画面あったら、10個もコードを変更する手間がかかります。

色の指定を１つのクラスにし、そのクラスのプロパティを参照することで、１つのクラスで色を管理できるようにでき、修正が簡単になり、保守性が上がります！

また、UIColor を継承しているクラスを作成することによって、**「プロジェクトで利用する色なんだ」**とクラスを見ただけで、他の人（共同開発したり、保守運用をしている人）に意図が伝わるというメリットもあります。

1. Ctrl + N でファイル作成 (Swift File)
2. SoreppoiAppColor.swift ファイル選択(ファイル名は適当に。プロジェクト名＋Color だと分かりやすいかも)
3. 以下のコードを記述

SoreppoiAppColor.swift

import Foundation
import UIKit

class SoreppoiAppColor {
    // 濃い緑を返す
    class var primary: UIColor {
        return rgbColor(rgbValue: 0x73C6B6)
    }
    
    // 薄いオレンジを返す
    class var secondary: UIColor{
        return rgbColor(rgbValue: 0xFFD6BA)
    }
    
    // 白っぽい灰色を返す
    class var background: UIColor{
        return rgbColor(rgbValue: 0xFAF9F9)
    }
    
    // #FFFFFFのように色を指定できるようにするメソッド！色が使いやすくなる。
    // ここでしか使わないので privateメソッドにする。
    private class func rgbColor(rgbValue: UInt) -> UIColor{
        return UIColor(
            red:   CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((rgbValue & 0x00FF00) >>  8) / 255.0,
            blue:  CGFloat( rgbValue & 0x0000FF)        / 255.0,
            alpha: CGFloat(1.0)
        )
    }
}

追記 2019/04/16

@k-kohey さんのアドバイスがコメント欄にあります。
クラスを継承しなくても、enumで定義できる方法もコメント欄にありますので見ていただきたいです。
koheyさん、ありがとうございます！！

Tab Bar Controller ファイルを作成

目的：Tab Bar の色を変更する

1. Ctrl + N でファイル作成 (Cocoa Touch Class)
2. 「Subclass of: 」　で　UITabBarController　を選択して作成 （Class名は適当に）

1. 以下のコードを記述。コードの説明は、コメントにて。
   （追記部分以外は最初から記述してあります。）

SoreppoiAppTabBarController.swift

import UIKit

class SoreppoiTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // -----＊＊追記部分＊＊----- //
        // アイコンの色を変更できます！
        UITabBar.appearance().tintColor = SoreppoiAppColor.secondary
        // 背景色を変更できます！
        UITabBar.appearance().barTintColor = SoreppoiAppColor.primary
        // -----＊＊追記部分＊＊----- //
    }

}

4_ Tab Bar Controller に、swift ファイルを適用
このままでは Tab Bar Controller と、SorreppoiAppTabBarController.swift ファイルが**別々のもの(連携していない)**になっているので、swift ファイルで Tab Bar Controller で制御できるようにしましょう！

Main.storyboard を開いて、Tab Bar Controller に swift ファイルを適用

Navigation Bar の色を変更

AppDelegate.swift のコードを修正

なぜ function にしているかというと、function名を使ってどのような処理をしているかが、直感的にわかるからです!
もちろん function化せずに処理を書いても良いのですが、パッと見ただけですぐに処理内容がわからず、処理を読み解く時間が発生します。
function化することで、誤った解釈を防ぐことができ、可読性も向上します！

追記部分だけ記述してください！

AppDelegate.swift

import UIKit
import CoreData

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        // -----＊＊追記部分＊＊----- //
        changeNavigationBarColor()
        // -----＊＊追記部分＊＊----- //
        return true
    }
    // -----＊＊追記部分＊＊----- //
    func changeNavigationBarColor() {
        // 全てのNavigation Barの色を変更する
        // Navigation Bar の背景色の変更
        UINavigationBar.appearance().barTintColor = SoreppoiAppColor.primary
        // Navigation Bar の文字色の変更
        UINavigationBar.appearance().tintColor = SoreppoiAppColor.secondary
        // Navigation Bar のタイトルの文字色の変更
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: SoreppoiAppColor.background]
    }
    // -----＊＊追記部分＊＊----- //


///ここから先は省略///

完成したそれっぽいアプリ（再度掲載）

まとめ

Navigation Bar と Tab Bar の色を統一してみるだけでなんかそれっぽいアプリに見えませんか！？（自分だけかな。）
この画面をベースにアプリ開発をしていくと少しだけテンション上がります。それっぽく見えるかもなんで！
Navigation Controller を使っているので、次の画面に遷移した時に、上に 「<戻る」 も付くので便利ですよ！

長文でしたがお読みいただきありがとうございました。

この投稿が誰かの手助けとなると、とても嬉しいです！
ぜひコメントください。

間違っている点、もっとこうした方がいいよ、という点などご指摘お待ちしております！
よろしくお願いいたします。

参考にさせていただいた記事

@senseiswift さん
ExtensionでUIColorにブランドカラーを返す拡張メソッド追加

コードログ
Swift – iOS：ナビゲーションバーの色を変更する