はじめに

SwiftUIでそれぞれのViewのレイアウトをデザインする時に必要なGeometryReaderを用いて、グリッドシステムを考えることを目的とする。

ただし、今回Iphone11、Iphone8、IpadPro12inchのそれぞれをSimulatorで確認しましたが、心から満足できるデザインになっていません。まだまだ改善が必要な点をご了承ください。

前回までの記事は以下を参考ください。

参考記事
【SwiftUI】AppデザインのためにGeometryReaderを理解する

開発環境

OSX 10.15.7 (Catalina)
Xcode 12.2.0
CocoaPods 1.10.0

SwiftUIのレイアウトシステム

画面サイズいっぱいの１ページのViewを想定します。
縦にスクロールせず、横にスクロールもしない場合のAppデザインを考えます。
まずは画面全体を10分割しました。
そのためにGeometryReaderを用いて、それぞれのRow部分のframeに.frame(width: container.size.width, height: container.size.height/10)を実装しました。

参考文献
How to provide relative sizes using GeometryReader

struct ContentView: View {
    
    var body: some View {
        
        // parent View
        VStack {
            // クロージャーの"g"は任意で設定可能
            GeometryReader { container in
                
                // Container
                VStack {
                    
                    // section1
                    ZStack {
                        
                        // a horizontal line
                        HStack{
                            
                            Image(systemName: "doc")
                            Text("First One")
                        }
                    // parentViewの幅いっぱい、縦は全体の1/10に設定。
                    }.frame(width: container.size.width, height: container.size.height/10, alignment: .center)
                    .border(Color.blue)
                    
                    // section2
                    ...略...
                }
            }
        }
    }
}

グリッドシステムを考える

GeometryReaderを使って、画面サイズを10分割しました。
それらをX個分の高さを設定するために、frame(width: container.size.width, height: container.size.height/10 * 4)と記載内容を変更しました。"*4"を追加することによって、グリッドシステムを考えます。合計の比率を10になるように設定すれば、画面の高さの計算を簡単にすることができます。

下のイメージでは一つ目のセクションを"4"、二つ目のセクションを"4"、そして、三つ目のセクションを"2"で設定しました。

struct gridView: View {
    var body: some View {
        
        // parent View
        VStack {
            // クロージャーの"g"は任意で設定可能
            GeometryReader { container in
                
                // Container
                VStack {
                    
                    // section1
                    ZStack {
                        
                        // a horizontal line
                        HStack{
                            
                            Image(systemName: "doc")
                            Text("First One")
                        }
                    // parentViewの幅いっぱい、縦は全体の1/10に設定。
                    // Row部分を４つ分の高さを設定する。
                    }.frame(width: container.size.width, height: container.size.height/10 * 4, alignment: .center)
                    .border(Color.blue)
                    
                    // section2
                    ZStack {
                        
                        // a horizontal line
                        HStack{
                            
                            Image(systemName: "doc")
                            Text("Second One")
                        }
                    // parentViewの幅いっぱい、縦は全体の1/10に設定。
                    // Row部分を４つ分の高さを設定する。
                    }.frame(width: container.size.width, height: container.size.height/10 * 4, alignment: .center)
                    .border(Color.blue)
                    
                    // section3
                    ZStack {
                        
                        // a horizontal line
                        HStack{
                            
                            Image(systemName: "doc")
                            Text("Third One")
                        }
                    // parentViewの幅いっぱい、縦は全体の1/10に設定。
                    // Row部分を２つ分の高さを設定する。
                    }.frame(width: container.size.width, height: container.size.height/10 * 2, alignment: .center)
                    .border(Color.blue)
                    
                }
            }
        }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    }
}

#実装のイメージ
Iphone11

Iphone8

iPad Pro（12.9inch）

iPad Pro（12.9inch）の方はデザインとバランスがあまり美しくないですね。Iphone8も悪くはないけど...って感じです。

特にPaddingの設定など余白については改善が必要です。

参考文献
SwiftUI Shifting Display Left

struct imageView: View {
    
    @State var color = Color.black.opacity(0.7)
    @State var email = ""
    @State var pass = ""
    
    @State var visible = false
    
    var body: some View {
        
        ZStack(alignment: .topTrailing) {
            
            VStack {
                
                GeometryReader{container in
                    Color.init("pinkColor")
                    VStack {
                        
                        // Logo Section
                        VStack(alignment: .center) {
                            
                            GeometryReader{rowSection1 in
                                
                                VStack(alignment: .center) {

                                    Image("logo")
                                        .resizable()
                                        .frame(width: rowSection1.size.height/10 * 7, height: rowSection1.size.height/10 * 7, alignment: .center)
                                        
                                    Text("Haiku de Go")
                                        .font(.largeTitle)
                                        .fontWeight(.heavy)
                                        .foregroundColor(Color.white)
                                        
                                }.padding(.top, rowSection1.size.height/10 * 0.5)
                                .frame(maxWidth: .infinity, maxHeight: .infinity)

                            }
                            
                        }.frame(width: container.size.width, height: container.size.height/10 * 4, alignment: .center)
                        
                        // Email,password Section
                        VStack(alignment: .center) {
                            
                            Text("Log in to your account")
                                .font(.title)
                                .fontWeight(.bold)
                                .foregroundColor(self.color)
                            
                            TextField("Email", text: self.$email)
                                .padding()
                                .font(.title2)
                                .background(RoundedRectangle(cornerRadius: 4).stroke(self.email != "" ? Color("borderColor") : self.color, lineWidth: 2))
                                .background(Color.white)
                                .padding()
                            
                            HStack {
                                
                                VStack {
                                
                                    if self.visible {
                                        
                                        TextField("Password", text: self.$pass)
                                            .font(.title2)
                                    } else {
                                        
                                        SecureField("Password", text: self.$pass)
                                            .font(.title2)
                                    }
                                }
                                Button(action: {
                                    
                                }, label: {
                                    Image(systemName: self.visible ? "eye.slash.fill" : "eye.fill")
                                        .font(.title2)
                                        .foregroundColor(color)
                                })
                                
                            }
                            .padding()
                            .background(RoundedRectangle(cornerRadius: 4).stroke(self.pass != "" ? Color("borderColor") : self.color, lineWidth: 2))
                            .background(Color.white)
                            .padding()
                            
                            HStack {
                                
                                Spacer()
                                Button (action: {
                                    
                                }, label: {
                                    Text("Forget passward")
                                        .fontWeight(.bold)
                                        .foregroundColor(self.color)
                                })
                            }.padding()
                        }.frame(width: container.size.width, height: container.size.height/10 * 4, alignment: .center)
                        
                        // Login Button Section
                        VStack(alignment: .center) {
                            
                            Button (action: {
                                
                                // self.verify()
                            }, label: {
                                Text("Log in")
                                    .foregroundColor(color)
                                    .font(.title2)
                                    .fontWeight(.bold)
                                    .padding(.vertical)
                                    .frame(width: UIScreen.main.bounds.width - 200)
                            }).background(Color.white)
                            .cornerRadius(10)
                        }.frame(width: container.size.width, height: container.size.height/10, alignment: .center)
                    }
                }
            }
            
            // RegisterButton 右上に配置
            Button(action: {
                
            }, label: {
                Text("Register")
                    .fontWeight(.bold)
                    .foregroundColor(self.color)
            })
            .padding()
        }
    }
}

以上です。