0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-11-20

はじめに

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の作成とフォルダ管理

TabBarView_swift.png

それぞれの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を実装する

Home_swift.png

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

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

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

import SwiftUI

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

iPhone_11_–_14_2.png

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

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

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

以上です。

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?