うるおいらんど

【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)

とすればおkです。

 

デフォルトでは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)
        }
    }

コレで準備はおkです。

 

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

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

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

 

ではでは〜。

Comments

コメントはありません。

現在コメントフォームは工事中です。