テックキャンプ162日目〜Toolbarを全ページに表示する

kobasaです(´ω`*)
だいぶ遠回りしてましたが、ようやくToolbarを全ページに表示できました!
全ページに表示するにはNavigation Controllerを使用するんですね。
今回はストーリーボードを交えた設定方法になります。

始めにトップページのコントローラーを選択した状態で
Editor → Embed in → NavigationControllerを選択してストーリーボード上に表示します。

次にToolbarの設定を記述するコントローラーを作成します。
CocoaTouchClassでファイルを作成します。サブクラスにUINavigationControllerを選択。
ストーリーボードのNavigationControllerのクラスに、先ほど作成したコントローラーを紐づけておきます。

またアトリビュートインスペクタのBarVisibilityの項目でShowToolbarにチェックを入れます。
上部に表示されるナビゲーションバーが不要ならShowNavigationBarのチェックを外します。
次はコントローラーの記述です。

import UIKit

class NavigationController: UINavigationController,UINavigationControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.delegate = self
    }
    
    // 画面出現前の呼び出しメソッド
    func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {

        let camera = UIBarButtonItem(barButtonSystemItem: .camera, target: self, action: #selector(pushCamera))
        let compose = UIBarButtonItem(barButtonSystemItem: .compose, target: self, action: nil)
        let option = UIBarButtonItem(barButtonSystemItem: .organize, target: self, action: nil)
        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        viewController.toolbarItems = [flexibleSpace, camera, flexibleSpace, option, flexibleSpace, compose, flexibleSpace]
        
    }
    
    // カメラボタン呼び出しメソッド
    @objc func pushCamera() {
        print("cameraOK")
    }
}

まずDelegateを読み込んで、willShowの関数内にツールバーの設定をします。
ツールバーに表示されるボタンを下記の記述で作成しています。
UIBarButtonItem(barButtonSystemItem: .アイコン, target: self, action: 呼び出すメソッド)
ストーリーボードではアイコンの種類が豊富なんですが、コードで指定する場合は一部しか使えない?
タグや歯車アイコン使いたかったんですけど。設定する方法があるのかも。

viewController.toolbarItemsの配列に定義したボタンを入れていきます。入れた順に左から表示されます。
ツールバーの背景色はストーリーボードのStandardとScrollEdgeで設定しています。

やっとツールバーを表示させることができました!次はボタンを押したときの動きですね!

コメント

タイトルとURLをコピーしました