# ContentsView

[SwiftUI 開発記録](https://hackmd.io/29GdyEJPQ2yDAmajfRq0Gw?both#SwiftUI-%E9%96%8B%E7%99%BA%E8%A8%98%E9%8C%B2)


[TOC]

#### 機能追加情報
> [time=Sat, Apr 20, 2024 5:21 AM]

##### ホームビュー表示時に、画面をスワイプして別画面を表示させられるように改良

HomeView() //タブ1番目
    .tabItem { //見た目
        Image(systemName: "house")
        Text("ホーム")
    }
    .tag(Tab.home) // タグを設定

を下記に変更

TabView(selection: $selectedTab) { //タブ1番目
    ForEach(1...2, id: \.self) { val in
        HomeView() // 任意のページにスワイプ
    }
}
.tag(Tab.home) // タグを設定
.tabViewStyle(PageTabViewStyle())
.tabItem {
    Image(systemName: "house")
    Text("ホーム")
}

---

> [time=Sat, Apr 20, 2024 3:33 AM]

##### 各タブに移動してもタイトルが「ホーム」となっていたため、各タブへの移動を記録し、タイトルを適宜変更するように実装

@State private var selectedTab: Tab = .home // 初期値をホームに設定

enum Tab {
    case home, calendar, report, search, settings
}

各ビューのモディファイアにタグを設定

.tag(Tab.home) // タグを設定

// タブに応じたタイトルを返す関数
private func title(for tab: Tab) -> String {
    switch tab {
        case .home:
            return "ホーム"
        case .calendar:
            return "カレンダー"
        case .report:
            return "レポート"
        case .search:
            return "検索"
        case .settings:
            return "設定"
    }
}

.navigationTitle("ホーム")
↓
.navigationTitle(title(for: selectedTab))

---

#### now code

//
//  ContentView.swift
//  Financial_iPhoneApp
//
//  Created by 有田健一郎 on 2024/02/26.
//

import SwiftUI
import SwiftData

struct ContentView: View { //アプリ起動時の共有画面
    
    @State private var selectedTab: Tab = .home // 初期値をホームに設定
    
    init() {
        UITabBar.appearance().backgroundColor = UIColor(Color(0xfaf0e6, alpha:1.0))
        // TabViewの背景色(薄茶色)
        
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor(Color(0xfaf0e6, alpha:1.0))
        appearance.titleTextAttributes = [.foregroundColor: UIColor.black, .font : UIFont.systemFont(ofSize: 30)]
        appearance.titlePositionAdjustment.vertical = 5
        appearance.accessibilityFrame = CGRect(x: 20, y: 20, width: 20, height: 100)
        
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
        UINavigationBar.appearance().compactAppearance = appearance
    }
    
    enum Tab {
        case home, calendar, report, search, settings
    }
    
    var body: some View {
        // プラスボタン実装
        NavigationStack {
            TabView(selection: $selectedTab) {
                HomeView() //タブ1番目
                    .tabItem { //見た目
                        Image(systemName: "house")
                        Text("ホーム")
                    }
                    .tag(Tab.home) // タグを設定
                
                CalendarView() //タブ2番目
                    .tabItem {
                        Image(systemName: "calendar")
                        Text("カレンダー")
                    }
                    .tag(Tab.calendar) // タグを設定
                
                GraphView() //タブ3番目
                    .tabItem {
                        Image(systemName: "chart.line.uptrend.xyaxis")
                        Text("レポート")
                    }
                    .tag(Tab.report) // タグを設定
                
                SearchView() //タブ4番目
                    .tabItem {
                        Image(systemName: "magnifyingglass")
                        Text("検索")
                    }
                    .tag(Tab.search) // タグを設定
                
                SettingView() //タブ5番目
                    .tabItem {
                        Image(systemName: "gearshape")
                        Text("設定")
                    }
                    .tag(Tab.settings) // タグを設定
            }
//            .accentColor(.green) //ここでタブのアクセント色の指定
            
            //タイトル
            .navigationTitle(title(for: selectedTab))
            .navigationBarTitleDisplayMode(.inline)
        }
    }
    
    // タブに応じたタイトルを返す関数
    private func title(for tab: Tab) -> String {
        switch tab {
        case .home:
            return "ホーム"
        case .calendar:
            return "カレンダー"
        case .report:
            return "レポート"
        case .search:
            return "検索"
        case .settings:
            return "設定"
        }
    }
}

extension Color { //Colorオブジェクトの拡張(Hex値を使用するため)
    init(_ hex: UInt, alpha: Double = 1) {
        self.init(
            .sRGB,
            red: Double((hex >> 16) & 0xFF) / 255,
            green: Double((hex >> 8) & 0xFF) / 255,
            blue: Double(hex & 0xFF) / 255,
            opacity: alpha
        )
    }
}

#Preview {
    ContentView()
}

> [time=Sat, Apr 20, 2024 3:29 AM][name=ariken][color=#31b4ed]

---
#### old

//
//  ContentView.swift
//  Financial_iPhoneApp
//
//  Created by 有田健一郎 on 2024/02/26.
//

import SwiftUI
import SwiftData

struct ContentView: View { //アプリ起動時の共有画面
    
    init() {
        UITabBar.appearance().backgroundColor = UIColor(Color(0xfaf0e6, alpha:1.0))
        // TabViewの背景色(薄茶色)
        
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor(Color(0xfaf0e6, alpha:1.0))
        appearance.titleTextAttributes = [.foregroundColor: UIColor.black, .font : UIFont.systemFont(ofSize: 30)]
        appearance.titlePositionAdjustment.vertical = 5
        appearance.accessibilityFrame = CGRect(x: 20, y: 20, width: 20, height: 100)
        
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
        UINavigationBar.appearance().compactAppearance = appearance
    }
    
    var body: some View {
        
        // プラスボタン実装
        NavigationStack {
            TabView {
                HomeView() //タブ1番目
                    .tabItem { //見た目
                        Image(systemName: "house")
                        Text("ホーム")
                    }
                CalendarView() //タブ2番目
                    .tabItem {
                        Image(systemName: "calendar")
                        Text("カレンダー")
                    }
                GraphView() //タブ3番目
                    .tabItem {
                        Image(systemName: "chart.line.uptrend.xyaxis")
                        Text("レポート")
                    }
                SearchView() //タブ4番目
                    .tabItem {
                        Image(systemName: "magnifyingglass")
                        Text("検索")
                    }
                SettingView() //タブ5番目
                    .tabItem {
                        Image(systemName: "gearshape")
                        Text("設定")
                    }
            }
//            .accentColor(.green) //ここでタブのアクセント色の指定
            
            //タイトル
            .navigationTitle("\nホーム")
            .navigationBarTitleDisplayMode(.inline)
//            .padding(.vertical, 20) // タブビュー下の空白
        }
        
       
    }
}

extension Color { //Colorオブジェクトの拡張(Hex値を使用するため)
    init(_ hex: UInt, alpha: Double = 1) {
        self.init(
            .sRGB,
            red: Double((hex >> 16) & 0xFF) / 255,
            green: Double((hex >> 8) & 0xFF) / 255,
            blue: Double(hex & 0xFF) / 255,
            opacity: alpha
        )
    }
}

#Preview {
    ContentView()
}

> [time=Sat, Apr 20, 2024 3:29 AM][name=ariken][color=#31b4ed]