5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Swift】UITabBarAppearanceについて調べ直してみた

Last updated at Posted at 2022-05-08

iOS15対応にてUITabBarAppearanceをもう一度ちゃんと調べておこうと思いました。

【iOS15】TabbarItemの色指定が反映されない不具合に対応 - Qiita

Apple Developer Documentation

サンプル

まずは適当にTabを作ります(TabBarControllerの作り方は省略)
サンプル.png

import UIKit

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // タブバーの外観設定
        self.setupTabBarView()
        // タブバーアイテムの外観設定
        self.setupTabBarItemView() 
    }

    func setupTabBarView() {
        let tabBarAppearance = UITabBarAppearance()
        // ここで細かい外観を指定する

        // 反映
        self.tabBar.standardAppearance = tabBarAppearance
    }

    func setupTabBarItemView() {
        let tabBarAppearance = UITabBarAppearance()
        let tabBarItemAppearance = UITabBarItemAppearance()
        // ここで細かい外観を指定する

        // 反映
        tabBarAppearance.stackedLayoutAppearance = tabBarItemAppearance
        self.tabBar.standardAppearance = tabBarAppearance
    }

}

UITabBarAppearance

タブバーの外観をカスタマイズするためのオブジェクト

let tabBarAppearance = UITabBarAppearance()

stackedLayoutAppearance

レイアウトの属性。初期化時に明示的な指定がなかった場合の初期値。

stackedItemPositioning

タブバー内に積み重ねられたアイテムを配置するときに使用するスキーム

automatic

自動配置

tabBarAppearance.stackedItemPositioning = .automatic

automatic.png

fill

幅全体にアイテムを分散

tabBarAppearance.stackedItemPositioning = .fill

fill.png

centered

中央配置

tabBarAppearance.stackedItemPositioning = .centered

centered.png

stackedItemSpacing

タブバーアイテムの間に挿入するスペースの量。

stackedItemPositioningが.centeredの時のみ反映

tabBarAppearance.stackedItemPositioning = .centered
tabBarAppearance.stackedItemSpacing = 200

stackedItemSpacing.png

stackedItemWidth

タブバーアイテムの幅。

stackedItemPositioningが.centeredの時のみ反映

tabBarAppearance.stackedItemPositioning = .centered
tabBarAppearance.stackedItemWidth = 20

stackedItemWidth.png
幅が小さすぎてFavoriteの文字が窮屈そうです。

inlineLayoutAppearance

インラインスタイル(iPad)で表示されるアイテムの外観属性

compactInlineLayoutAppearance

コンパクトな環境でインラインスタイルで表示されるアイテムの外観属性

selectionIndicatorTintColor

選択インジケーター画像に適用する色合いの色。

selectionIndicatorImage

選択したアイテムに描画する画像。

UITabBarItemAppearance

タブバーアイテムの外観をカスタマイズするためのオブジェクト。

let tabBarItemAppearance = UITabBarItemAppearance()

configureWithDefault(for:)

指定されたスタイルに適切な値を使用してタブバーアイテムの外観オブジェクトを構成します

tabBarItemAppearance.configureWithDefault(for: .stacked)

UITabBarItemAppearance.Style

タブバーアイテムのコンテンツのレイアウトを示す定数

stacked

垂直に積み重ねられたアイコンとタイトル(デフォルト)

inline

インラインスタイル(iPad)でアイコンとタイトルを並べて配置したレイアウト。

compactInline

コンパクトな幅の環境での使用に適した、アイコンとタイトルを並べたレイアウト。

normal

タブバーアイテムが選択されていないときに適用される外観。

selected

タブバーアイテムが選択されているときに適用される外観。

disabled

タブバーアイテムが無効になっているときに適用される外観。

focused

フォーカスされたときにタブバーアイテムに適用される外観。

UITabBarItemStateAppearance

特定の状態のタブバーアイテムの特定のカスタマイズを含むデータオブジェクト。

titleTextAttributes

タブバーアイテムのタイトルのテキストに適用する文字列属性

// 選択時の文字色を赤に指定
tabBarItemAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor.red]

titleTextAttributes.png

titlePositionAdjustment

タイトルを水平方向および垂直方向にオフセットするための追加の金額

vertical(垂直方向)

tabBarItemAppearance.selected.titlePositionAdjustment.vertical = 15

titlePositionAdjustment.png

horizontal(水平方向)

tabBarItemAppearance.selected.titlePositionAdjustment.horizontal = 50

Item1選択時
horizontal.png

Item2選択時
horizontal2.png
選択されている方が水平方向(右)に50オフセットされているようです

iconColor

アイコンの色。

// 未選択時のアイコンの色を赤に指定
tabBarItemAppearance.selected.iconColor = .red

iconColor.png

badgeTextAttributes

アイテムのバッジのテキストに適用する文字列属性。

tabBarItemAppearance.selected.badgeTextAttributes = [.foregroundColor: UIColor.blue]

badgeTextAttributes.png

badgeBackgroundColor

バッジの背景色。

tabBarItemAppearance.selected.badgeBackgroundColor = .green

badgeBackgroundColor.png

badgeTitlePositionAdjustment

バッジのタイトルを水平方向および垂直方向にオフセット。

vertical(垂直方向)

tabBarItemAppearance.selected.badgeTitlePositionAdjustment.vertical = 15

badgeTitlePositionAdjustmentv.png

horizontal(水平方向)

tabBarItemAppearance.selected.badgeTitlePositionAdjustment.horizontal = 15

badgeTitlePositionAdjustmenth.png

badgePositionAdjustment

バッジを水平方向および垂直方向にオフセット。

vertical(垂直方向)

tabBarItemAppearance.selected.badgePositionAdjustment.vertical = 15

badgePositionAdjustmentv.png

horizontal(水平方向)

tabBarItemAppearance.selected.badgePositionAdjustment.horizontal = 15

badgePositionAdjustmenth.png

参考記事

Customizing your TabView's Bar in SwiftUI - SchwiftyUI

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?