![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/SwiftUIタブで切り替えできる画面を作ろう！TabViewタブビューの使い方.png)
「 Twitterのようなタブ選択画面を作りたい… 」
「 SwiftUIで馴染みのある画面デザインを作りたい… 」
そんな時にぴったりなのが、SwiftUIの機能「TabView(タブビュー)」です！
Twitterをはじめとして、多くのアプリケーションでタブ切り替え型の画面デザインが採用されており、私たちにとって馴染みのあるデザインといえますね。
今回は、そういったタブ画面を直感的に作ることができるTabViewについて解説していきます。
[ 本記事はこんな人におすすめ ]
・SwiftUIの画面デザインについて学びたい
・自作アプリでタブ選択画面を作りたい
環境・バージョン
> Swift 5.7.2
> Xcode 14.2
> macOS 12.5 Monterey
1-1 TabViewって何？
TabViewとは、「複数のView(画面)を切り替えて表示する」SwiftUIのView機能です。
TabViewを使うことによって、ユーザーがタップして選択できるタブアイテムを配置し、それぞれのアイテムに紐付けられたView画面を切り替えることができます。
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-12.40.12-1024x571.png)
下記はTabViewを使ったシンプルなコード実装例です。
これだけの記述で、タブ選択画面の骨組みはできてしまいます。素晴らしい。
コード内容の詳細は、後述で解説します。
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/Jan-31-2023-12-52-59.gif)
struct ContentView: View {
// タブの選択項目を保持する
@State var selection = 1
var body: some View {
TabView(selection: $selection) {
PageOneView() // Viewファイル①
.tabItem {
Label("Page1", systemImage: "1.circle")
}
.tag(1)
PageTwoView() // Viewファイル②
.tabItem {
Label("Page2", systemImage: "2.circle")
}
.tag(2)
PageThreeView() // Viewファイル③
.tabItem {
Label("Page3", systemImage: "3.circle")
}
.tag(3)
} // TabView ここまで
} // body
} // View
1-2. TabViewの表示スタイル
TabViewには大きく分けて二つの表示スタイルがあります。
どちらもアプリによく使われていて、馴染みのあるデザインではないでしょうか。
[表示パターン①]
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/Jan-31-2023-13-01-38.gif)
[表示パターン②]
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/Jan-31-2023-13-06-22.gif)
表示パターン①
画面の下部に配置されているタブボタンをユーザーが選択することで、選択項目に紐づいたViewが画面上で切り替わるパターンです。
こちらはTabViewのデフォルトスタイルとなります。
表示パターン②
ユーザーが左右に画面をスワイプ操作をすることで、Viewが切り替わるパターンです。
画面下部に点々「…」が表示されており、ページの現在地を示しています。
TabViewに記述を加えることで、こちらのスタイルに切り替えることができます。
切り替え方については「3-2. TabViewの表示スタイルを変更する」項目で解説します。
2. TabViewの使用手順
前述のサンプルコードを参考に、TabViewの使用手順を見ていきましょう。
struct ContentView: View {
// タブの選択項目を保持する
@State var selection = 1
var body: some View {
TabView(selection: $selection) {
PageOneView() // Viewファイル①
.tabItem {
Label("Page1", systemImage: "1.circle")
}
.tag(1)
PageTwoView() // Viewファイル②
.tabItem {
Label("Page2", systemImage: "2.circle")
}
.tag(2)
PageThreeView() // Viewファイル③
.tabItem {
Label("Page3", systemImage: "3.circle")
}
.tag(3)
} // TabView ここまで
} // body
} // View
2-準備. 呼び出したいページを作成
まずは準備として、TabViewを用いた画面の切り替え先となるViewファイルを作成しておきましょう。
作成したViewファイルそれぞれで画面を作り、それらをTabViewに配置していきます。
サンプルコードだと、「PageOneView」「PageTwoView」「PageThreeView」の３ページを用意しています。
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-13.36.06.png)
各ページのコード構成は非常にシンプルです。
Textでページ番号を表示して、各ページの切り替えがわかりやすいように背景色を付けたのみです。
同じパターンで３つ、Viewファイルを作っています。
struct PageOneView: View {
var body: some View {
ZStack {
Color.pink // 背景色
Text("Page1")
} // ZStack
} // body
} // View
ここで作成するページの数や内容は、みなさんが作るアプリケーションによって様々です。
サンプル通りに作ってもいいですし、オリジナルで構築しても良いでしょう。
呼び出すページの準備ができたら、今回の呼び出し側、親ViewであるContentViewに戻ってTabViewの実装をしていきます。
2-1. タブの選択項目を保持する変数の作成
TabViewの選択項目を保持するための変数を作成します。
TabViewを使用するには、ユーザーが選択したタブアイテムがどれなのかを保存しておく「状態変数」が必要です。
ここでは、状態変数「selection」を作成しました。(変数名は任意)
struct ContentView: View {
@State var selection = 1 //✅ タブの選択項目を保持する
var body: some View {
// ここにTabViewコードを記入していく
} // body
} // View
2-2. TabViewを配置
body内に「TabView」を記述していきます。
TabViewの引数selectionに、先ほど作成した状態変数「selection」をバインディング「$」で指定し、紐付けます。
これでTabViewの準備はできました。
struct ContentView: View {
@State var selection = 1
var body: some View {
TabView(selection: $selection) { //✅ TabViewを作成
} // TabView ここまで
} // body
} // View
2-3. TabView内に各ページを配置
「2-準備」で作成したページをTabView内に配置していきます。
まずは、１つのページを配置してみましょう。
インスタンス化したViewにモディファイア「.tabItem」を指定してタブボタンのデザインを整えます。こちらのデザインは任意でカスタム可能です。
また、各Viewにモディファイア「.tag」を指定して、各ページが何番目の要素なのかを紐付けしておきましょう。
struct ContentView: View {
// タブの選択項目を保持する
@State var selection = 1
var body: some View {
TabView(selection: $selection) {
PageOneView() //✅ 1つ目のページをTabViewに配置
.tabItem { // ⬅︎
Label("Page1", systemImage: "1.circle")
}
.tag(1) // ⬅︎
} // TabView ここまで
} // body
} // View
画面下部にタブボタンが１つ出現し、「PageOneView」が呼び出されていることがわかりますね。
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-14.09.31-768x463.png)
同じ手順で残りの二つのViewファイルも配置していきましょう。
...
TabView(selection: $selection) {
PageOneView() //✅ 1つ目のページをTabViewに配置
.tabItem {
Label("Page1", systemImage: "1.circle")
}
.tag(1)
PageTwoView() //✅ 2つ目のページをTabViewに配置
.tabItem {
Label("Page2", systemImage: "2.circle")
}
.tag(2)
PageThreeView() //✅ 3つ目のページをTabViewに配置
.tabItem {
Label("Page3", systemImage: "3.circle")
}
.tag(3)
} // TabView ここまで
} // body
} // View
これでTabViewに３ページ全ての配置ができました。
タブボタンを選択することで、それぞれに紐づいたViewの呼び出しも実装できています◎
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/Jan-31-2023-14-49-13.gif)
3. TabViewの装飾機能
3-1. タブボタンにバッジをつける
「.badge」モディファイアを付与することで、タブボタンにバッジを付けることができます。
サンプルコード１つ目のタブに数字「999」、２つ目のタブに文字列「New」のバッジを追加してみました。
バッジは文字(String)と数字(Int)、どちらも使うことができます。
...
TabView(selection: $selection) {
PageOneView()
.tabItem {
Label("Page1", systemImage: "1.circle")
}
.tag(1)
.badge(999) // ⬅︎ Int
PageTwoView()
.tabItem {
Label("Page2", systemImage: "2.circle")
}
.tag(2)
.badge("New") // ⬅︎ String
PageThreeView()
.tabItem {
Label("Page3", systemImage: "3.circle")
}
.tag(3)
} // TabView ここまで
} // body
} // View
タブボタンにバッジが付与されていることがわかります。
この機能を使うことで、SNSアプリの通知デザインを作ることもできそうです。
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-15.21.10.png)
3-2. TabViewの表示スタイルを変更する
TabViewには２つの表示スタイルがあり、用途によって切り替えることができます。
TabViewにモディファイア「.tabViewStyle」を付与することで、表示スタイルが切り替わります。
モディファイアの記述場所はTabView処理ブロックの直下です。
...
} // TabView ここまで
.tabViewStyle(.page) // ⬅︎
} // body
} // View
これでTabViewがボタン選択型から、スライド型に切り替わりました。
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/Jan-31-2023-15-29-28.gif)
ただ、こちらの表示パターンでは、バッジをつけたり、タブボタンのデザインを装飾することができないことに気を付けておきましょう。
上記コードのままだと、バッジは反映されず、数字が小さく残ってしまっていますね。
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-15.37.14.png)
スライド型のデザインを使う場合は、「.badge」や「.tabItem」などのモディファイアは取り除いておくのがデザイン的にも綺麗かと思います。
...
TabView(selection: $selection) {
PageOneView()
.tag(1)
PageTwoView()
.tag(2)
PageThreeView()
.tag(3)
} // TabView ここまで
.tabViewStyle(.page) // ⬅︎
} // body
} // View
[Before]
[After]
![[SwiftUI]タブで切り替えできる画面を作ろう！TabView(タブビュー)の使い方](https://blog.code-candy.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-31-15.41.12.png)
まとめ
以上、今回はSwiftUIの機能「TabView」についてでした。
主な要点をおさらいしておきます。
・各ページ要素と状態変数との紐付けが必要
・二つの表示スタイルの選択が可能
・スライド表示スタイルでは「.tabItem」や「.badge」での装飾はできない
TabViewを使いこなせると、アプリ画面デザインの構築が一気に幅広くなるでしょう。
ぜひ活用してみてください！
動画の紹介
\ SHARE /
アプリ開発が学べる勉強会を開催中！
CodeCandyではアプリ開発を学ぶための勉強会を定期開催しています。
学習する習慣を身につけたい、他の参加者と作業したい、アプリ開発の基本をマスターしたい、という方のために無料で学べる勉強会です。
グループにメンバー登録して頂くと、イベント開催時にメールで通知されます。
グループのメンバーとして参加する徹底した基礎学習からマスターするiPhoneアプリ開発集中オンライン講座開講！
本書「iPhoneアプリ開発集中講座」を執筆している現役エンジニア講師陣が直接に指導！
基礎、課題実習で実践力を鍛えて、オリジナルアプリ公開までチャレンジ！
充実した転職支援もあるので、エンジニアへ転職したい人にもおすすめです！
まずは、現役エンジニアに相談できる無料相談をご利用ください。