✨ Bottom bar 実装

[tora-muscle]

🎫 関連課題

• ✨ Act 画面実装 #4
• ✨ Plan Do -result 画面実装 #8

✨ 実現したいこと

• 先週の振り返りアイコン

• 今週のやることページ（week）アイコン

• カレンダーアイコン

• 色

  • 選択時00DBB5
  • 通常時96A7AF

🚩 やらないこと

• 内部ロジック（login処理など）の実装
• ライトモードへの対応

🔀 達成条件

• イメージ通りに画面実装

👀 備考

• figma

[tora-muscle]

🎨 デザイン変更

変更点

• custom.app.badge.checkmark.fill → custom.square.fill
• calendar→ custom.checkmark.circle.fill

[tora-muscle]

🔧 要件追加

• Plan Do -result画面からAct画面遷移時
  • Bottom barには戻るボタンのみ追加

[tora-muscle]

🗒 メモ : flutterのように個別のWidgetとしてBottom bar を切り出したい

SwiftUIでボトムバーを再利用するには、以下のように自分自身を表示するViewを構造体で作成して、他の画面で使用する。

struct BottomBar: View {
    var body: some View {
        // Bottom Bar Content Here
    }
}

別の画面では、次のようにBottomBarを使用することができる。

struct SomeView: View {
    var body: some View {
        VStack {
            // Some View Content Here
            BottomBar()
        }
    }
}

[tora-muscle]

🗒 メモ : Font.systemの引数でどんなデザインになるか

• size : 単純にサイズ
• weight : 文字の太さ
• design : 文字等間隔、丸文字など...

https://capibara1969.com/1981/
この記事がわかりやすかった🙌

[tora-muscle]

🗒 .renderingMode(.template)を定義した際、先に.frame()すると怒られる件について

.renderingMode(.template)はサイズが指定されていない画像に対して変更を加える。
よって、.renderingMode(.template)より先に.frame(width: 30.0)などを定義すると

Cannot infer contextual base in reference to member 'template'
Value of type 'some View' has no member 'renderingMode'

と怒られる

self.tabItems[index].view
                    .tabItem {
                        Image(systemName: self.tabItems[index].image)
                            .renderingMode(.template)
                            .foregroundColor(self.selectedIndex == index ? Color("UIColorGreen") : Color("UIColorGray"))
                            .padding(.bottom, 30.0)
                            .frame(width: 30.0)
                    }

[tora-muscle]

🗒 タブバーの色を変更する方法

• 想定していた「条件分岐での色変更」の実装は難しく、.accentColor()で変更するしかなかった
• タブバー自体の色変更はviewのプロトコルイニシャライザで指定するしかないようだ。。。
  • しかもしかも！UIcolorしか指定できないのはダサいし悲しすぎ！！

struct BottomBar: View {
    
    // ボトムバーの色を定義
    init() {
        UITabBar.appearance().backgroundColor = .darkGray
        UITabBar.appearance().unselectedItemTintColor = .gray
        }

参考文献 ▼
https://tech.amefure.com/swift-tabview
他にも「バッジ表示方法」など、詳しくまとまっているから今後助けてもらえそう！

⚠️ 追記 ⚠️

• 色に関してはイニシャライザで任意の色を設定する方法があった！

[tora-muscle]

👀 備考

#3 (comment)

残件ありにつき、本課題はまだ進行中とする
なお、作業ブランチは #8 時に作成したブランチとする

[tora-muscle]

👀 残件

- [ ] figma更新

• タブバーをセーフエリア内に収める

[tora-muscle]

🗒 カスタムタブバーの実装方法

• Stackを使い分けることで任意の形のタブバーを実装することができた
• アイコン選択と表示画面の連動部分の実装はモデルとしてアイコンに view を紐づけることで解決！

▼ モデル

struct BottomBarItem {
    let image: String
    let view: AnyView
}

▼ 中身

let bottomBarItems = [
        BottomBarItem(image: "graduationcap.fill", view: AnyView(ActView())),
        BottomBarItem(image: "square.fill", view: AnyView(PlanDoView())),
        BottomBarItem(image: "checkmark.circle.fill", view: AnyView(CheckView()))
    ]

タブバーの実装

//MARK: ボトムバーの実装
struct BottomBar: View {
    
    // タブの選択値と初期値.
    @State private var selected = 0
    
    var body: some View {
        
        ZStack {
            
            // 背景色.
            Color.backGroundColorGray.ignoresSafeArea()
            
            // メイン画面部分はTabViewで定義.
            TabView(selection: $selected) {
                ForEach(0 ..< 3) { index in
                    bottomBarItems[index].view
                        .tag(index)
                }
            }
            // PageTabスタイルを利用する(インジケータは非表示).
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            
            VStack {
                
                Spacer(minLength: 0)
                
                // タブビュー部分.
                HStack {
                    ForEach(0 ..< 3) { index in
                        Image(systemName: bottomBarItems[index].image)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 20, height: 20)
                            .onTapGesture {
                                self.selected = index
                            }
                            .foregroundColor(self.selected == index ? Color.black : Color.gray)
                    }
                }
                .padding(.vertical, 10.0)
                .padding(.horizontal, 20.0)
                .background(Color.white.clipShape(Capsule()))
                .shadow(color: Color.black.opacity(0.3), radius: 5, x: -5, y: 5)
            }
        }
    }
}

▼ 参考記事

• https://github.com/hoshi005/custom-tab/blob/master/Custom%20TabView/ContentView.swift#L49
• https://www.youtube.com/watch?v=TJfI3-qdta8

[tora-muscle]

👀 残件

• デザイン部分の修正