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

この記事からわかること

  • Swift/UIKitUIToolbar実装方法の使い方
  • 画面下部ボタンアイコンを設置する方法
  • UIBarButtonItem使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

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")
    }
}
【Swift UIKit】UIToolbarとUIBarButtonItemの使い方!

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

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

self.view.backgroundColor = .black
toolBar.isTranslucent = true
【Swift UIKit】UIToolbarとUIBarButtonItemの使い方!

デザインを変更する

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

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

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

toolBar.barStyle  = .black
【Swift UIKit】UIToolbarとUIBarButtonItemの使い方!

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

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

おすすめ記事:【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)
}
【Swift UI】TextFieldのキーボードを閉じる方法と@FocusStateの使い方

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

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index