🌭

SwiftUIでTabViewを使う

2023/12/15に公開

iOS

SwiftUI

tech

Overview

SwiftUIで画面下のタブメニューを作成したいときに、TabViewという機能を使えば簡単に作成することができます。

こちらの公式チュートリアルがわかりやすいのでそのまま進めていけばおしゃれなUIを作るのが体験できます。

summary

公式より引用

タブを使ったユーザーインターフェースを作成するには、TabViewにビューを配置し、各タブのコンテンツにtabItem(:)モディファイアを適用します。iOSでは、badge(:)のようなbadge修飾子を使用して、各タブにバッジを割り当てることもできます。

次の例では、3つのタブを持つタブビューを作成し、それぞれにカスタム子ビューを表示しています。最初のタブには数値バッジ、3番目のタブには文字列バッジがあります。

TabView {
    ReceivedView()
        .badge(2)
        .tabItem {
            Label("Received", systemImage: "tray.and.arrow.down.fill")
        }
    SentView()
        .tabItem {
            Label("Sent", systemImage: "tray.and.arrow.up.fill")
        }
    AccountView()
        .badge("!")
        .tabItem {
            Label("Account", systemImage: "person.crop.circle.fill")
        }
}

このように書けば簡単にタブメニューを作成できる。

//
//  ContentView.swift
//  LunchApp
//
//  Created by 橋本純一 on 2023/12/15.
//

import SwiftUI

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")
                }

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

スクリーンショット

thoughts

今回は画面下にタブメニューを配置するUIをSwiftUIで作ってみました。公式チュートリアルを参考にして、そのまんまなんですけど、作ったソースコードはこちらです。開発体験が良さそうなフレームワークなので、皆さんも勉強してみてください。

Overview

summary

thoughts

Discussion