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の基本的なビューを解説しています。
詳しくは上記の記事をご覧ください。
