【SwiftUI】さまざまなTabView

TabViewとは

SwiftUIで使用できるViewのことで、
どういうViewかというと、Lineのように下のバーにいろんなタブがあって、タップすることで上の画面が切り替わるという機能です。
一番左をタップすれば、友達リストやスタンプが表示されたり、
メッセージをタップすれば、メッセージリストが表示されたりと、TabViewを実装することで、
簡単にあのような画面を作成することができます。

TabViewではLineのトップ画面のようなものだけではなく、
さまざまなViewを作成できます。
主に、以下のようなものがあります。

• 1. DefaultTabViewStyle(デフォルト)
• 2. PageTabViewStyle
• 3. CarouselTabViewStyle

1. DefaultTabViewStyle

上記で説明したLineのようなTabViewである。
デフォルトなので、tabViewStyleモディファイアを指定しない場合は、このViewスタイルで表示される。

import SwiftUI

@main
struct AppMain: App {
    
    @UIApplicationDelegateAdaptor (AppDelegate.self) var appDelegate
    
    class AppDelegate: UIResponder, UIApplicationDelegate {
        
            func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
                return true
            }
        }
        
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}


struct ContentView: View {

    var body: some View{
        TabView{
            Text("チュートリアル1")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
                }
                .tag(0)
            Text("チュートリアル2")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("second")
                }
                .tag(1)
            Text("チュートリアル3")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("third")
                }
                .tag(2)
        }
    }
}

theシンプルのTabViewですね。
Lineの下のタブのようなUIを簡単に実装できます。
上ではImageですでにswiftuiで用意されている画像を使ってますが、自分で画像を指定することも可能です。

2. PageTabViewStyle

import SwiftUI

@main
struct AppMain: App {
    
    @UIApplicationDelegateAdaptor (AppDelegate.self) var appDelegate
    
    class AppDelegate: UIResponder, UIApplicationDelegate {
        
            func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
                return true
            }
        }
        
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {

    var body: some View{
        TabView{
            Text("チュートリアル1")
                .frame(width: UIScreen.main.bounds.size.width, height: 500)
                .background(Color(red: 0.8, green: 0.8, blue: 0.8))
                .tag(0)
            Text("チュートリアル2")
                .frame(width: UIScreen.main.bounds.size.width, height: 500)
                .background(Color(red: 0.6, green: 0.99, blue: 0.6))
                .tag(1)
            Text("チュートリアル3")
                .frame(width: UIScreen.main.bounds.size.width, height: 500)
                .background(Color(red: 1, green: 0.75, blue: 0.78))
                .tag(2)
        }
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
    
    }
}

TabViewに対して、
TabViewのモディファイである.tabViewStyle(PageTabViewStyle())
を指定することで、以下のような画面を作成できる。

よくチュートリアルで説明を簡単に横スクロールで説明していくスタイルであったり、
利用規約で使われたりする。

.tabViewStyle(CarouselTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))を指定することで、
画面スワイプした時に、今何番目の画面なのかを表示してくれる機能がある。

3. CarouselTabViewStyle

struct SampleTabBarView:View{
    
    var body: some View{
        TabView{
            Text("チュートリアル1")
                .frame(width: 300, height: 500)
                .background(Color(red: 0.8, green: 0.8, blue: 0.8)) 
                .tag(0)
            Text("チュートリアル2")
                .frame(width: 300, height: 500)
                .background(Color(red: 0.6, green: 0.99, blue: 0.6)) 
                .tag(1)
            Text("チュートリアル3")
                .frame(width: 300, height: 500)
                .background(Color(red: 1, green: 0.75, blue: 0.78)) 
                .tag(2)
        }
        .tabViewStyle(CarouselTabViewStyle())
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
    }
}