【Xcode/SwiftUI】TabBarを作ってみよう

実装

追加ファイル

FirstView, SecondView, ThirdView, ForthView, FifthViewを追加

HomeView.swift (メインのView)

import SwiftUI

struct HomeView: View {
    var body: some View {
        TabView {
            FirstView()
                .tabItem {
                    // タブの画像
                    Image(systemName: "face.smiling")
                    // タブ下のテキスト
                    Text("First")
                }
            SecondView()
                .tabItem {
                    Image(systemName: "play.rectangle.fill")
                    Text("Second")
                }
            ThirdView()
                .tabItem {
                    Image(systemName: "mic.slash.fill")
                    Text("Third")
                }
            ForthView()
                .tabItem {
                    Image(systemName: "sunrise.fill")
                    Text("Forth")
                }
            FifthView()
                .tabItem {
                    Image(systemName: "bolt.circle.fill")
                    Text("Fifth")
                }
        }
        // タブのカラーを指定
        .accentColor(.orange)
    }
}

FirstView ~ FifthVIew

import SwiftUI

struct <#何番目の#>View: View {
    var body: some View {
        VStack(spacing: 40) {
            Text("<#何番目の#>Viewだよ")
                .font(.largeTitle)
            Image("img_baseball")
                .resizable()
                .frame(width: 100, height: 100)
        }
    }
}

画像はテキトーなもの入れておけばOKです。


◎今日の格言

ー Andrew Jackson

Andrew
Andrew

One man with courage makes a majority.

(一人の勇気が大多数を生み出す)

この記事は役に立ちましたか?

はい
いいえ
貴重なフィードバックありがとうございます!