【Swift4】UINavigationControllerのToolbarをカスタマイズしてみた【高さ変更】

前回「【Swift4】UINavigationControllerのNavigationBarをカスタマイズしてみた。【高さ変更】」のおまけ！

どうも。Reoです。

昨日書いた記事のおまけでUINavigationControllerでツールバーをカスタマイズしたい時のやり方を書いていこうと思います。

細かいところは前回をみてね！今回は簡潔に！

今回の分もプッシュしておいたよ。uruly/CustomNavigationController-CustomNavigationBar

UIToolbarのカスタムクラスを作る

File > New > File より　CocoaTouchClassを選択し、Subclass of:をUIToolbarにして作成。

作成したCustomToolbarの中にイニシャライザを書きます。

import UIKit

class CustomToolbar: UIToolbar {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }

}

NavigationControllerのインスタンスを作る際にCustomToolbarを指定します。

let naviVC = UINavigationController(navigationBarClass: nil, toolbarClass: CustomToolbar.self)

前回の記事を読んでくれた人は、前回作ったCustomNavigationControllerで

let naviVC = CustomNavigationController(rootVC: vc, naviBarClass: CustomNavigationBar.self, toolbarClass: CustomToolbar.self)

とすればおｋです。

デフォルトではToolbarは表示されないはずなのでNavigationController内で表示するようにしておきます。

self.setToolbarHidden(false, animated: false)

場所は別にどこでも良いです。

自分は初期化時にツールバーのクラスがnilでなければ表示するようにしました。

    convenience init(rootVC:UIViewController , naviBarClass:AnyClass?, toolbarClass: AnyClass?){
        self.init(navigationBarClass: naviBarClass, toolbarClass: toolbarClass)
        self.viewControllers = [rootVC]
        if toolbarClass != nil {
            self.setToolbarHidden(false, animated: false)
        }
    }

コレで準備はおｋです。

ツールバーの色を変えよう！

この辺はナビゲーションバーとほぼ一緒です〜。

class CustomToolbar: UIToolbar {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setup()
    }
    
    func setup() {
        //バーの色
        self.barTintColor = UIColor.yellow
        //アイテムの色
        self.tintColor = UIColor.white
    }

}

他にも色々まとめて設定しておきます。

toolbarのアイテムの置き方は、UINavigationControllerのナビゲーションバーにアイテムを置くときと一緒です。

NavigationControllerの子ViewControllerの方に

        //削除ボタンを作成
        let trashBtn = UIBarButtonItem(barButtonSystemItem: .trash, target: self, action: #selector(self.trashTapped))
        let flexible = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        self.toolbarItems = [flexible,trashBtn]

という風にして書きます。

これもナビゲーションバーと同様に以下の書き方はできません。

//これはだめ！表示されない！
self.navigationController?.toolbarItems = [trashBtn]

ここも一度覚えてしまえばなんのこっちゃないですね。

ツールバーの高さを変えよう！

さて本題。ナビゲーションバーと同様に高さを変更します。

CustomToolbarでSizeThatFitsをoverrideします。

    //デフォルトよりどれだけ大きくするか
    let addHeight:CGFloat = 14.0

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var newSize = super.sizeThatFits(size)
        newSize.height += addHeight
        
        return newSize
    }

以上です。

(ﾟДﾟ≡ﾟдﾟ)ｴｯ!?

ナビゲーションバーではiPhoneXで場合分けして、セーフエリアを考慮して、サブビューを調整して、って面倒なことをイッパイしましたよね・・・？

でもツールバーはコレで完了です。

左からiPhone6(iOS10)、iPhone7(iOS11)、iPhoneX(iOS11)です。

全部ちゃんと同じ表示になっています。やったね。

ナビゲーションバーのバグが直ればツールバーと同じ記述量になるはずだと思っています。待ってればそのうち直るのかわからないですが、直ってくれると嬉しいです。

CustomToolbarの全文

import UIKit

class CustomToolbar: UIToolbar {

    let addHeight:CGFloat = 20
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setup()
    }
    
    func setup() {
        //バーの色
        self.barTintColor = UIColor.orange
        //アイテムの色
        self.tintColor = UIColor.white
    }
    
    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var newSize = super.sizeThatFits(size)
        newSize.height += addHeight //通常よりどれだけ大きくするか
        
        return newSize
    }

}

前回のやつにコミットしておいたのでナビゲーションバーと比べてみてくださいな。

uruly/CustomNavigationController-CustomNavigationBar

ではでは〜。