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

コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

記事を書くほどでもないけれどメモっておきたいこと

テスト投稿。

例えばiphone7 の画面サイズ

750 × 1334
半分375 × 667

iOS
more