プロジェクト作成

XCodeでプロジェクトを作成します。

Appを選択してNextをクリックします。

プロジェクト名をios-websiteとして作成しました。
InterfaceをSwiftUI、LangageをSwiftにしてNextをクリックします。

作成場所を任意の場所に指定してCreateをします。

すると初期画面イメージが表示されます。

Tab作成

Tabを作成していきます。
TabViewを配置して作成したい項目にtabItem修飾子をつけます。
使い方は、+ボタンからTabViewを検索すると出てきます。

ConteantView.swiftに下記のように記述してみます。

ContentView.swift

	//
	//  ContentView.swift
	//  ios-website
	//
	//  Created by eriko on 2022/10/07.
	//

	import SwiftUI

	struct ContentView: View {
	    var body: some View {
-	        VStack {
-	            Image(systemName: "globe")
-	                .imageScale(.large)
-	                .foregroundColor(.accentColor)
-	            Text("Hello, world!")
-	        }
-	        .padding()
+	        TabView {
+	            Text("TOP")
+	                .tabItem {
+	                    Image(systemName: "house.fill")
+	                    Text("TOP")
+	                }
+	            Text("お問合せ")
+	                .tabItem {
+	                    Image(systemName: "envelope.fill")
+	                    Text("お問合せ")
+	                }
+	        }
	    }
	}

	struct ContentView_Previews: PreviewProvider {
	    static var previews: some View {
	        ContentView()
	    }
	}

コピペ用

TabView {
    Text("TOP")
        .tabItem {
            Image(systemName: "house.fill")
            Text("TOP")
        }
    Text("お問合せ")
        .tabItem {
            Image(systemName: "envelope.fill")
            Text("お問合せ")
        }
}

記述できると、右のイメージにも反映されます。

「お問合せ」をクリックすると、メッセージも「お問合せ」に変化します。

確認画面・エミュレーターのバージョン選択
上部ボタンから確認したい端末のバージョンを変更できます。

Home画面作成

ヘッダーメニューから「File > New > FIie..」でSwiftUI Viewを新規作成します。ファイル名は「TopView」とします。

作成できると、左側にTopViewが追加されます。

TopViewを選択して下記のように記述します。
VStackは、VStack内のコンテンツを縦に並べてくれます。

TopView.swift

import SwiftUI

struct TopView: View {
    var body: some View {
        VStack{
            Text("TOP").font(.title)
            VStack{
                Text("Bluecode,lifestyle development").font(.title).foregroundColor(.white)
            }.frame(maxWidth:.infinity).frame(height:200)
                .background(.blue)
            VStack{
                Text("websiteの最新情報")
                    .font(.title2)
                    .padding(.bottom, 50.0)
                Text("最新情報をご案内します。")
            }.frame(height:400)
        }
        
    }
}

struct TView_Previews: PreviewProvider {
    static var previews: some View {
        TopView()
    }
}

Viewが自動で最新に反映されるので確認します。（少し時間がかかる場合があります）

ContentView反映

これを、ContentViewに反映させます。

ContentView.swift

	import SwiftUI

	struct ContentView: View {
	    var body: some View {
	        TabView {
-	            Text("TOP")
+	            TopView()
	                .tabItem {
	                    Image(systemName: "house.fill")
	                    Text("TOP")
	                }
	            Text("お問合せ")
	                .tabItem {
	                    Image(systemName: "envelope.fill")
	                    Text("お問合せ")
	                }
	        }
	    }
	}

	struct ContentView_Previews: PreviewProvider {
	    static var previews: some View {
	        ContentView()
	    }
	}

イメージを確認すると、TopViewの内容がTopタブをクリックしたときに表示されます。

Contactフォーム画面作成

同様に「ContactFormView.swift」というファイルを作成します。
ヘッダーメニューから「File > New > FIie..」でSwiftUI Viewを新規作成します。ファイル名は「ContactFormView」とします。
まずは見た目を整えます。

ContactFormView.swift

import SwiftUI

struct ContactFormView: View {
    
    @State var name = ""
    @State var email = ""
    @State var contactBody = ""
    
    var body: some View {
        VStack{
            Text("Contact").font(.title)
                            
            VStack{
                Text("お問合わせフォーム").font(.headline).foregroundColor(.white)
            }
            .frame(maxWidth:.infinity)
            .frame(height:100)
            .background(.blue)
            
            VStack{
                Text("お問合わせ内容を入力してください。").padding()
                Group{
                    TextField("お名前",text:$name)
                        .keyboardType(.default)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                        
                    Text("お名前は必須です。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                    
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("email",text:$email)
                        .keyboardType(.emailAddress)
                        .textInputAutocapitalization(.never)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text("emailは必須かつemailの形式で入力してください。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("問合わせ内容",text:$contactBody)
                        .keyboardType(.emailAddress)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text("問合せ内容は必須かつ1文字以上10文字以内で入力して下さい。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Button(action:{
                      
                }){
                    Text("送信")
                        .frame(minWidth: 160)
                        .foregroundColor(.white)
                        .padding(12)
                        .background(Color.accentColor)
                        .cornerRadius(8)
                }

                Spacer()
                    
            }.frame(maxWidth:.infinity).frame(height:500)
                            
        }
    }
}

struct ContactFormView_Previews: PreviewProvider {
    static var previews: some View {
        ContactFormView()
    }
}

確認するとこんな感じです。

ContentView反映

ContentViewに追加して、Tabにしていきます。

ContentView.swift

	import SwiftUI

	struct ContentView: View {
	    var body: some View {
	        TabView {
	            TopView()
	                .tabItem {
	                    Image(systemName: "house.fill")
	                    Text("TOP")
	                }
-	            Text("お問合せ")
+	            ContactFormView()
	                .tabItem {
	                    Image(systemName: "envelope.fill")
	                    Text("お問合せ")
	                }
	        }
	    }
	}

	struct ContentView_Previews: PreviewProvider {
	    static var previews: some View {
	        ContentView()
	    }
	}

一旦、見た目に必要なデータは揃いました。

最終的なコード

ContentView

ContentView


import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            TopView()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("TOP")
                }
            ContactFormView()
                .tabItem {
                    Image(systemName: "envelope.fill")
                    Text("お問合せ")
                }
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

TopView

TopView

import SwiftUI

struct TopView: View {
    var body: some View {
        VStack{
            Text("TOP").font(.title)
            VStack{
                Text("Bluecode,lifestyle development").font(.title).foregroundColor(.white)
            }.frame(maxWidth:.infinity).frame(height:200)
                .background(.blue)
            VStack{
                Text("websiteの最新情報")
                    .font(.title2)
                    .padding(.bottom, 50.0)
                Text("最新情報をご案内します。")
            }.frame(height:400)
        }
        
    }
}

struct TView_Previews: PreviewProvider {
    static var previews: some View {
        TopView()
    }
}

ContactFormView

ContactFormView

import SwiftUI

struct ContactFormView: View {
    
    @State var name = ""
    @State var email = ""
    @State var contactBody = ""
    
    var body: some View {
        VStack{
            Text("Contact").font(.title)
                            
            VStack{
                Text("お問合わせフォーム").font(.headline).foregroundColor(.white)
            }
            .frame(maxWidth:.infinity)
            .frame(height:100)
            .background(.blue)
            
            VStack{
                Text("お問合わせ内容を入力してください。").padding()
                Group{
                    TextField("お名前",text:$name)
                        .keyboardType(.default)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                        
                    Text("お名前は必須です。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                    
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("email",text:$email)
                        .keyboardType(.emailAddress)
                        .textInputAutocapitalization(.never)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text("emailは必須かつemailの形式で入力してください。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("問合わせ内容",text:$contactBody)
                        .keyboardType(.emailAddress)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text("問合せ内容は必須かつ1文字以上10文字以内で入力して下さい。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Button(action:{
                      
                }){
                    Text("送信")
                        .frame(minWidth: 160)
                        .foregroundColor(.white)
                        .padding(12)
                        .background(Color.accentColor)
                        .cornerRadius(8)
                }

                Spacer()
                    
            }.frame(maxWidth:.infinity).frame(height:500)
                            
        }
    }
}

struct ContactFormView_Previews: PreviewProvider {
    static var previews: some View {
        ContactFormView()
    }
}

関連コンテンツ