SwiftUIでタブを作るにはTabView
を使用します。本記事ではSwiftUIでのタブの作り方を解説します。
基本的な構造
TabView
は次のような構造で使用します。
struct ContentView: View {
var body: some View {
TabView {
// --- ここから ---
// タブ内に表示するビュー
Text("Tab 1") // 実際には Text を使うのではなく、カスタムビューとなる
.tabItem {
// タブのラベル部分のビュー
Text("Item 1")
}
// --- ここまで ---
// --- ここから ---
// タブ内に表示するビュー
Text("Tab 2") // 実際には Text を使うのではなく、カスタムビューとなる
.tabItem {
// タブのラベル部分のビュー
Text("Item 2")
}
// --- ここまで ---
// --- ここから ---
// タブ内に表示するビュー
Text("Tab 3") // 実際には Text を使うのではなく、カスタムビューとなる
.tabItem {
// タブのラベル部分のビュー
Text("Item 3")
}
// --- ここまで ---
// 上記のように「ここから」と「ここまで」の間の部分をタブアイテムの数だけ繰り返す
}
}
}
TabView
について
TabView
はSwiftUIのコンテナビューです。サブビューをタブアイテムとして表示します。
tabItem
モディファイアについて
tabItem
モディファイアはタブアイテムのラベルを作成するモディファイアです。
各プラットフォームでのプレビュー
上記のサンプルコードをビューに組み込んで表示すると、iPhoneでは次のように表示されます。
iPadでは次のように表示されます。
macOSでは次のように表示されます。
ラベルの作り方
タブのラベルはtabItem
モディファイアで定義します。引数に表示するビューを指定しますが、この引数はクロージャー形式となっています。そのため、トレイリングクロージャーの構文を利用して、より直感的にサブビューを定義できます。
テキストだけのラベル
テキストだけのラベルは、上記のサンプルコードのようにText
を使って作ります。
.tabItem {
Text("ラベルのタイトル")
}
アイコンだけのラベル
アイコンだけのラベルにするときは、Text
の代わりにImage
を使います。
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
Text("Tab 1")
.tabItem {
Image(systemName: "folder")
}
Text("Tab 2")
.tabItem {
Image(systemName: "tray")
}
Text("Tab 3")
.tabItem {
Image(systemName: "externaldrive")
}
}
}
}
ただし、macOSアプリの場合はタブのラベルに画像を表示できないので、何も表示されません。
アイコンとテキストを組み合わせたラベル
アイコンとテキストを組み合わせたラベルを作るには、他のビューを定義するときと同様に、VStack
を使ってImage
とText
を並べて表示します。
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
Text("Tab 1")
.tabItem {
VStack {
Image(systemName: "folder")
Text("Folder")
}
}
Text("Tab 2")
.tabItem {
VStack {
Image(systemName: "tray")
Text("Tray")
}
}
Text("Tab 3")
.tabItem {
VStack {
Image(systemName: "externaldrive")
Text("External Drive")
}
}
}
}
}
なお、画像とテキストを水平に表示しようと、HStack
を使っても垂直に並んでしまいます。垂直方向しかサポートされていません。
また、macOSアプリの場合は画像は表示できないので、テキストだけが表示されます。
タブの周囲の余白について
macOSアプリの場合、padding
モディファイアで余白を入れないと、ウインドウのフレームとタブのフレームが隣接してしまうので、padding
を入れましょう。
struct ContentView: View {
var body: some View {
TabView {
Text("Tab 1")
.tabItem {
VStack {
Image(systemName: "folder")
Text("Folder")
}
}
Text("Tab 2")
.tabItem {
VStack {
Image(systemName: "tray")
Text("Tray")
}
}
Text("Tab 3")
.tabItem {
VStack {
Image(systemName: "externaldrive")
Text("External Drive")
}
}
}
#if os(OSX)
.padding()
#endif
}
}
上記のように#if os(OSX)
でmacOSアプリのときだけ、.padding()
を行うように指定しています。
自著の紹介
「基礎から学ぶSwiftUI」という本を執筆しました。この記事で取りあげたTabView
も含めたSwiftUIの基本的なビューを解説しています。
詳しくは上記の記事をご覧ください。