【SwiftUI】TabViewとListの実装とViewのフォルダ管理

10374 ワード
iOS Design Firebase SwiftUI Xcode Xcode テキストリンク

はじめに

SwiftUIでTabViewを作成し、それぞれのTabItemごとにViewを作る。
HomeViewにはListを表示し、前回作成したカード型のRowを呼び出すことを目的とする。

UIのデザインはcakesのnote風のデザインを参考にViewを作ります。

今後は今回作成したカードに前回までに実装した地図と都道府県市町村名を表示できるようにし、Firebaseで更新できるようにすることが目的です。
前回までの記事は以下を参考ください。

参考記事
【SwiftUi】経過時間の表示とListViewのセルデザイン

開発環境

OSX 10.15.7 (Catalina)
Xcode 12.2.0
CocoaPods 1.10.0

TabViewの作成とフォルダ管理

それぞれのViewはグループにまとめます。
大本のルートになるViewはContentViewです。
ContentViewの記載内容は以下のとおりです。

import SwiftUI

struct ContentView: View {

    var body: some View {
        // TabBarViewの呼び出し
        TabBarView()
    }

}

ContentviewではTabBarViewの呼び出しのみを行い、TabBarViewではHomeやSearch、Post、Info、AccountのそれぞれのViewを呼び出します。

import SwiftUI

struct TabBarView: View {
    var body: some View {

        TabView {
            // HomeView
            NavigationView{
                // HomeViewの呼び出し
                Home()
                    .navigationBarTitle("ホーム", displayMode: .inline)
            }.tabItem {
                Image(systemName: "house.fill")
                    .font(.title)
                Text("ホーム")
            }

            // SearchView
            NavigationView{
                // SearchViewの呼び出し
                Search()
                    .navigationBarTitle("みつける", displayMode: .inline)
            }
            .tabItem {
                Image(systemName: "map.fill")
                    .font(.title)
                Text("マップ")
            }


            // PostView
            Text("Post")
                .tabItem {
                    Image(systemName: "plus.circle.fill")
                        .font(.title)
                    Text("詠む")
                }

            // InfomationView
            NavigationView{
                // InfoViewの呼び出し
                Info()
                    .navigationBarTitle("おしらせ", displayMode: .inline)
            }
            .tabItem {
                Image(systemName: "info.circle.fill")
                    .font(.title)
                Text("おしらせ")
            }

            // AccountView
            NavigationView{
                // AccountViewの呼び出し
                Account()
                    .navigationBarTitle("アカウント", displayMode: .inline)
            }
            .tabItem {
                Image(systemName: "person.fill")
                    .font(.title)
                Text("アカウント")
            }
        }
        .accentColor(Color("pinkColor"))

    }
}

HomeViewにListを実装する

前回記事で作成したRowを呼び出します。

参考記事
【SwiftUi】経過時間の表示とListViewのセルデザイン

本来なら、ここのRow部分はFirebaseからデータベースを呼び出し更新できるように実装しますが、まだ実装できていないため、今回は同じ記事を出力しています。
また、今後はスクロールした際に記事を自動でロードできるようにする予定です。
今回はListの出力の様子のみ確認します。

import SwiftUI

struct Home: View {
    var body: some View {
        List {
            ForEach(0..<8){_ in
                ContentRowView()
                    .listRowInsets(EdgeInsets())
            }
        }
    }
}

Simulatorで確認したところ、スムーズにスクロールができました。
また、navigationBarTitleもスクロールしても表示され続けているため、意図したとおりに実装できました。

できれば、ListのRowごとに出力されるボーターの左側の余白を消したいけど、実装の仕方を見つけられなかったため、次回修正します。

今後実装予定のもの

・HomeViewのList内のRow部分をFireBaseから更新できるようにする。
・Search、Post、Info、AccountのそれぞれのViewを実装する。

以上です。