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

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

[【iOS15】TabbarItemの色指定が反映されない不具合に対応 - Qiita](https://qiita.com/maeken_0216/items/8e098c669ff9f84b569e)

[Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uitabbarappearance)

# サンプル

まずは適当にTabを作ります（TabBarControllerの作り方は省略）
![サンプル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/c531420d-8105-052f-6e97-fd6be30f18f3.png)


```swift
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

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

```swift
let tabBarAppearance = UITabBarAppearance()
```

## stackedLayoutAppearance

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

## stackedItemPositioning

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

### automatic

自動配置

```swift
tabBarAppearance.stackedItemPositioning = .automatic
```
![automatic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/2fb07e08-a00d-fbf3-0880-fae61e11b997.png)

### fill

幅全体にアイテムを分散

```swift
tabBarAppearance.stackedItemPositioning = .fill
```

![fill.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/db016cd0-f429-d206-498b-4b64b37b1d39.png)

### centered

中央配置

```swift
tabBarAppearance.stackedItemPositioning = .centered
```
![centered.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/69e87695-f486-2a82-4da1-fba3cb417230.png)


## stackedItemSpacing

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

stackedItemPositioningが.centeredの時のみ反映

```swift
tabBarAppearance.stackedItemPositioning = .centered
tabBarAppearance.stackedItemSpacing = 200
```
![stackedItemSpacing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/1daae60a-49eb-1e30-2964-9351d263f32d.png)

## stackedItemWidth

タブバーアイテムの幅。

stackedItemPositioningが.centeredの時のみ反映

```swift
tabBarAppearance.stackedItemPositioning = .centered
tabBarAppearance.stackedItemWidth = 20
```
![stackedItemWidth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/ac36648e-d152-1e4d-22b5-160cbcaa42fe.png)
幅が小さすぎてFavoriteの文字が窮屈そうです。

## inlineLayoutAppearance

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

## compactInlineLayoutAppearance

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

## selectionIndicatorTintColor

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

## selectionIndicatorImage

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

# UITabBarItemAppearance

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

```swift
let tabBarItemAppearance = UITabBarItemAppearance()
```

## configureWithDefault(for:)

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

```swift
tabBarItemAppearance.configureWithDefault(for: .stacked)
```

## UITabBarItemAppearance.Style

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

### stacked

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

### inline

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

### compactInline

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

## normal

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

## selected

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

## disabled

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

## focused

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

# UITabBarItemStateAppearance

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

## titleTextAttributes

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

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

![titleTextAttributes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/ddb4c021-87e7-2c2d-b47d-39d4c33767a3.png)

## titlePositionAdjustment

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

### vertical（垂直方向）

```swift
tabBarItemAppearance.selected.titlePositionAdjustment.vertical = 15
```
![titlePositionAdjustment.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/152447ec-d851-ddbb-5649-6c3d98d22dcc.png)

### horizontal（水平方向）

```swift
tabBarItemAppearance.selected.titlePositionAdjustment.horizontal = 50
```

Item1選択時
![horizontal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/1cce0b82-d7fc-c1f2-cc0a-a16909af2e2c.png)

Item2選択時
![horizontal2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/33c62b8a-d00d-9f16-36d4-2dba984f385b.png)
選択されている方が水平方向（右）に50オフセットされているようです

## iconColor

アイコンの色。

```swift
// 未選択時のアイコンの色を赤に指定
tabBarItemAppearance.selected.iconColor = .red
```
![iconColor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/c347ff50-85a4-4cbc-7c8c-660e369afbe0.png)

## badgeTextAttributes

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

```swift
tabBarItemAppearance.selected.badgeTextAttributes = [.foregroundColor: UIColor.blue]
```
![badgeTextAttributes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/78f963ac-7997-66ee-03fb-ddc7752d3f91.png)

## badgeBackgroundColor

バッジの背景色。

```swift
tabBarItemAppearance.selected.badgeBackgroundColor = .green
```
![badgeBackgroundColor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/2d495ac7-05ff-29ad-8e26-263d813cca46.png)

## badgeTitlePositionAdjustment

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

### vertical（垂直方向）

```swift
tabBarItemAppearance.selected.badgeTitlePositionAdjustment.vertical = 15
```
![badgeTitlePositionAdjustmentv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/6e23ea49-03db-e463-cd7d-b0120efeba1e.png)

### horizontal（水平方向）

```swift
tabBarItemAppearance.selected.badgeTitlePositionAdjustment.horizontal = 15
```

![badgeTitlePositionAdjustmenth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/978eb57e-4cee-ec82-b544-b59fff71870d.png)

## badgePositionAdjustment

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

### vertical（垂直方向）

```swift
tabBarItemAppearance.selected.badgePositionAdjustment.vertical = 15
```

![badgePositionAdjustmentv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/f843f800-95d7-5f28-90d3-1f2671b1b96a.png)

### horizontal（水平方向）

```swift
tabBarItemAppearance.selected.badgePositionAdjustment.horizontal = 15
```
![badgePositionAdjustmenth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643790/c67de5e3-262b-67e2-ec52-26ca3fd2401c.png)

参考記事

[Customizing your TabView's Bar in SwiftUI - SchwiftyUI](https://schwiftyui.com/swiftui/customizing-your-tabviews-bar-in-swiftui/)