SwiftUIでのタブの作り方

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を使ってImageTextを並べて表示します。

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の基本的なビューを解説しています。

アールケー開発

「基礎から学ぶ SwiftUI」というタイトルの本を執筆しました。WWDC 2019で発表され、iOS 13やmacOS…

詳しくは上記の記事をご覧ください。

スポンサーリンク
最新情報をチェックしよう!