• 2023/1/17
• 4分

【Swift UIKit】UIToolbarとUIBarButtonItemの使い方！

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

SwiftのUIKitで画面の下部などに設置されがちなツールバーを実装できるUIToolbarの使い方をまとめていきます。

UIToolbarクラス

公式リファレンス：UIToolbar

@MainActor  class UIToolbar : UIView

UIToolbarは画面の下部などにボタンなどを複数配置するためのツールバーを実装できるクラスです。ツールバーに配置する項目はUIBarButtonItemクラスを使って定義します。

定義したUIBarButtonItemオブジェクトは配列形式でUIToolbar.itemsプロパティに渡します。

ツールバーの配置位置は自由に指定できますが主に画面下部に設置されることが多く、画面上部にはナビゲーションバーが設置されることが多いです。

おすすめ記事：【Swift UIKit】コードでNavigationBarItemを実装する方法と使い方

またSwiftUIでは実装方法が大きく異なるので詳しくは以下の記事を参考にしてください。

おすすめ記事：【SwiftUI】toolbarの使い方！アイテムにボタンを増やす方法

実装する流れ

1. UIToolbarをサイズと座標を指定してインスタンス化
2. 項目(ボタン)とスペーサーの定義
3. UIToolbar.itemsにボタンを追加

UIToolbarのインスタンス化時にサイズと位置を指定しておきます。横幅は画面サイズいっぱいに、高さは任意の値を渡しています。

おすすめ記事：【Swift UI】画面(スクリーン)の横幅を取得する方法！デバイスサイズ

またツールバーにボタンを設置する際はスペーサーを入れ込むことで余白を調整します。

import UIKit

class ViewController: UIViewController{
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let toolBarHeight = 50
        let toolBar = UIToolbar(frame: CGRect(
            x: 0,
            y: Int(UIScreen.main.bounds.height) - toolBarHeight,
            width: Int(UIScreen.main.bounds.width),
            height: toolBarHeight)
        )
        
        toolBar.sizeToFit()
        
        // スペーサー構築
        let spacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: self, action: nil)
        // 閉じるボタン構築
        let closeButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.add, target: self, action:#selector(buttonTapped))
        
        toolBar.items = [spacer, closeButton]
        self.view.addSubview(toolBar)
        
    }
    @objc  func buttonTapped() {
        print("tapped")
    }
}

ツールバーを半透明にする

ツールバーを半透明にするにはisTranslucentプロパティの値を変更します。なかなか視認しにくいので背景色を黒色に変更してみました。

self.view.backgroundColor = .black
toolBar.isTranslucent = true

デザインを変更する

ツールバーのデザインを変更するにはbarStyleプロパティにUIBarStyle型の値を渡します。

enum UIBarStyle : Int, @unchecked  Sendable {
    case `default`
    case black
}

blackを指定すると以下のような感じになります。

toolBar.barStyle  = .black

キーボードにツールバーを設置する

ツールバーをキーボードに設置することも可能です。これにより「キーボードを閉じるボタン」などを実装することができます。詳細は以下の記事を参考にしてください。

おすすめ記事：【Swift UIKit】キーボードを閉じる方法！UITextField

 override func viewDidLoad() {
  super.viewDidLoad()

  let toolBar = UIToolbar()
  toolBar.sizeToFit()
  let spacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: self, action: nil)
  let closeButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.done, target: self, action:#selector(commitButtonTapped))

  toolBar.items = [spacer, closeButton]
  textField.inputAccessoryView = toolBar
}

@objc    func closeButtonTapped() {
    self.view.endEditing(true)
}

UIBarButtonItem

公式リファレンス：UIBarButtonItem

@MainActor  class UIBarButtonItem : UIBarItem

UIBarButtonItemはツールバーやナビゲーションバーなどに配置するためのアイテムを定義するクラスです。イニシャライザが複数用意されており、さまざまなアイテムを定義することができます。

テキスト

convenience init(
    title: String?,
    style: UIBarButtonItem.Style,
    target: Any?,
    action: Selector?
)

画像

convenience init(
    image: UIImage?,
    style: UIBarButtonItem.Style,
    target: Any?,
    action: Selector?
)

システムアイテム

convenience init(
    barButtonSystemItem systemItem: UIBarButtonItem.SystemItem,
    target: Any?,
    action: Selector?
)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。