【SwiftUI】スワイプで画面を切り替える方法(TabView)

2024.10.08
Java基本

本記事では、SwiftUIのTabViewを使用して、画面を左右にスライドすることで画面表示を切り替えることができる機能について解説していきます。

画面下にタブを表示して、そのタブを選択することで画面表示を切り替えることができる方法については以下の記事で解説していますのでぜひご覧ください！

2024.09.18

https://jinluvman.com/archives/2024/09/18/2017

本記事では、TabViewを使用してタブを押すことで画面を切り替えることができる機能について解説していきます。TabViewとはTabViewとは、画面下に用意したタブをクリックすることで複数のビューを切り替えて表示することを可能にする機能です。タブを利用した機能は、LINE,Twitter,Instagramなど多くのアプリケーションで採用されており、IOSアプリ開発には必要不可欠な機能であると言えます。TabViewを活用することで、便利でスタイリッシュなツール系アプリを作成することできます。TabViewを設置早速TabViewを設置していきます。TabV...

1. TabViewを設置する
2. スライドで画面を切り替えられるように変更
3. 最後に

TabViewを設置する

まずは一般的なInstagramやTwitterのように画面下に表示されているタブを選択することで、画面の表示を切り替えることができる機能を実装します。

詳細は上で紹介した記事で解説していますので割愛しますが、以下のようにタブのあるビューを作成します。これが基本的なTabのあるビューになります。

@State var selectedTag = 1
    var body: some View {
        TabView(selection: $selectedTag){
            Text("ホーム画面").tabItem { Label("Home", systemImage: "house")}.tag(1)
            Text("検索画面").tabItem { Label("Edit", systemImage: "sparkle.magnifyingglass") }.tag(2)
            Text("編集画面").tabItem { Label("Edit", systemImage: "pencil.tip.crop.circle.fill") }.tag(3)
            Text("ゴミ箱").tabItem { Label("Trush", systemImage: "pencil.tip.crop.circle.fill") }.tag(4)
        }
    }

実行結果

スライドで画面を切り替えられるように変更

一般的なタブビューを実装できましたので、この状態からスライドで切り替えられるビューを作っていきます。

スライドビューに切り替えるにはTabView()に対して.tabViewStyle()を指定し、パラメータとしてPageTabViewStyle()を設定します。

.tabViewStyle(PageTabViewStyle())はモディファイアの1つで、この値を設定することで、タブビューのスタイルを画面をスライドすることでタブを切り替えることができるスタイルに変更することができます。

またスライドビューを使用する際には、本来画面下に表示されるタブが表示されなくなるため、tabItem{}の設定が不要となります。

@State var selectedTag = 1
    var body: some View {
        TabView(selection: $selectedTag){
            Text("ホーム画面").frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white).tag(1)
            Text("検索画面").frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.green).tag(2)
            Text("編集画面").frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.blue).tag(3)
            Text("ゴミ箱").frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.gray).tag(4)
        }.tabViewStyle(PageTabViewStyle())
    }

初期表示