【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を使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

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

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index