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では次のように表示されます。

iPhoneでの表示
iPhoneでの表示

iPadでは次のように表示されます。

iPadでの表示
iPadでの表示

macOSでは次のように表示されます。

macOSでの表示
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")
                }
        }
    }
}
iPhoneでの表示
iPhoneでの表示

ただし、macOSアプリの場合はタブのラベルに画像を表示できないので、何も表示されません。

macOSでの表示
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")
                    }
                }
        }
    }
}
iPhoneでの表示
iPhoneでの表示

なお、画像とテキストを水平に表示しようと、HStackを使っても垂直に並んでしまいます。垂直方向しかサポートされていません。

また、macOSアプリの場合は画像は表示できないので、テキストだけが表示されます。

macOSでの表示
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()を行うように指定しています。

macOSでの表示
macOSでの表示

自著の紹介

基礎から学ぶSwiftUI」という本を執筆しました。この記事で取りあげたTabViewも含めたSwiftUIの基本的なビューを解説しています。

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

著書紹介

Authored Books

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Akira Hayashi (林 晃)のアバター Akira Hayashi (林 晃) Representative(代表), Software Engineer(ソフトウェアエンジニア)

アールケー開発代表。Appleプラットフォーム向けの開発を専門としているソフトウェアエンジニア。ソフトウェアの受託開発、技術書執筆、技術指導・セミナー講師。note, Medium, LinkedIn
-
Representative of RK Kaihatsu. Software Engineer Specializing in Development for the Apple Platform. Specializing in contract software development, technical writing, and serving as a tech workshop lecturer. note, Medium, LinkedIn

目次