iOS15対応にてUITabBarAppearanceをもう一度ちゃんと調べておこうと思いました。
【iOS15】TabbarItemの色指定が反映されない不具合に対応 - Qiita
サンプル
まずは適当にTabを作ります(TabBarControllerの作り方は省略)
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
fill
幅全体にアイテムを分散
tabBarAppearance.stackedItemPositioning = .fill
centered
中央配置
tabBarAppearance.stackedItemPositioning = .centered
stackedItemSpacing
タブバーアイテムの間に挿入するスペースの量。
stackedItemPositioningが.centeredの時のみ反映
tabBarAppearance.stackedItemPositioning = .centered
tabBarAppearance.stackedItemSpacing = 200
stackedItemWidth
タブバーアイテムの幅。
stackedItemPositioningが.centeredの時のみ反映
tabBarAppearance.stackedItemPositioning = .centered
tabBarAppearance.stackedItemWidth = 20
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]
titlePositionAdjustment
タイトルを水平方向および垂直方向にオフセットするための追加の金額
vertical(垂直方向)
tabBarItemAppearance.selected.titlePositionAdjustment.vertical = 15
horizontal(水平方向)
tabBarItemAppearance.selected.titlePositionAdjustment.horizontal = 50
Item2選択時
選択されている方が水平方向(右)に50オフセットされているようです
iconColor
アイコンの色。
// 未選択時のアイコンの色を赤に指定
tabBarItemAppearance.selected.iconColor = .red
badgeTextAttributes
アイテムのバッジのテキストに適用する文字列属性。
tabBarItemAppearance.selected.badgeTextAttributes = [.foregroundColor: UIColor.blue]
badgeBackgroundColor
バッジの背景色。
tabBarItemAppearance.selected.badgeBackgroundColor = .green
badgeTitlePositionAdjustment
バッジのタイトルを水平方向および垂直方向にオフセット。
vertical(垂直方向)
tabBarItemAppearance.selected.badgeTitlePositionAdjustment.vertical = 15
horizontal(水平方向)
tabBarItemAppearance.selected.badgeTitlePositionAdjustment.horizontal = 15
badgePositionAdjustment
バッジを水平方向および垂直方向にオフセット。
vertical(垂直方向)
tabBarItemAppearance.selected.badgePositionAdjustment.vertical = 15
horizontal(水平方向)
tabBarItemAppearance.selected.badgePositionAdjustment.horizontal = 15
参考記事