Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

SwiftUIのTabbedViewで遊んでみる

More than 1 year has passed since last update.

SwiftUIをさわり始めて数日ですが、今までのやり方で「どうやってやるの?」的なことが多くあると思いますが、今回扱うTabbarも色々変わっっているので軽くまとめます。

あと、Viewの背景色変更する方法を暫定ですがいい感じにできたのでそこも紹介します。

※スクショは自粛で〜

First Code

Tabbarでの構成でプロジェクトを作成するとこんな感じにContentViewを作成してくれます。

まずはこれだけを見ていきましょう😃

struct ContentView : View {
    @State private var selection = 0

    var body: some View {
        TabbedView(selection: $selection){
            Text("First View")
                .font(.title)
                .tabItemLabel(Image("first"))
                .tag(0)
            Text("Second View")
                .font(.title)
                .tabItemLabel(Image("second"))
                .tag(1)
        }
    }
}

SetTabItem

タブバーのアイテムを設定してあげています
画像なりテキストなり

func tabItemLabel<V>(V) -> _ModifiedContent<TabbedView<SelectionValue, Content>, _TraitWritingModifier<AnyView?>>

Sets the tab item to be used for this content.

Configuring Switch View

要調査ですがタグを振ってあげないとうまく切り替わってくれないです

func tag<V>(V) -> _AutoResultView<TabbedView<SelectionValue, Content>>

Viewの切り替え

ContentView.swift

        TabbedView(selection: $selection) {
            FirstView()
                .tabItemLabel(Image("first"))
                .tag(0)

            SecondView()
                .tabItemLabel(Image("second"))
                .tag(1)
            }
            .onAppear { print(onAppear) }


FirstView

struct FirstView : View {
    var body: some View {
            Text("First")
    }
}

SecondView

struct SecondView : View {
    var body: some View {
            Text(Second")
    }
}

Append self view background color

View全体に背景色を追加する方法ですね
正しいやり方か分からんけど、

ZStackを使うのはわかったけどSpacerの挙動がイマイチ理解できない、、

    var body: some View {

        ZStack {
            Spacer()
                .position(.zero)
            Text("First")
                .color(Color.white)
            }.background(Color.red)
            .edgesIgnoringSafeArea(.all)
    }

タブバーで表示されるViewを画面全体に表示

.edgesIgnoringSafeArea(.all)だとタブバー見えなくなちゃったので上だけで

struct ContentView : View {
    @State private var selection = 0

    var body: some View {
        TabbedView(selection: $selection) {
            FirstView()
                .tabItemLabel(Image("first"))
                .tag(0)

            SecondView()
                .tabItemLabel(Image("second"))
                .tag(1)
            }
            .onAppear { print("onAppear") }
            .edgesIgnoringSafeArea(.top)
    }
}
mcz9mm
iOS/Android開発をしています。SwiftとかKotlinを書いたり、話したりします。
shinonomeinc
東京理科大学発ベンチャー。提携大学内にソフトウェア研究所を組織し、学生向けのTech教育を提供しています。
http://shinonome.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away