LoginSignup
0
0

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 1 year has passed since last update.

@minimumskills(Minimum Skills)inbluecode株式会社

iOSで簡易コーポレートサイト（アプリ）を作成する #1 -TOP画面とContact画面編-

Last updated at Posted at 2023-03-13

プロジェクト作成

XCodeでプロジェクトを作成します。
000001.jpg
Appを選択してNextをクリックします。
000010.jpg
プロジェクト名をios-websiteとして作成しました。
InterfaceをSwiftUI、LangageをSwiftにしてNextをクリックします。
000020.jpg
作成場所を任意の場所に指定してCreateをします。

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

Tab作成

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

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("お問合せ")
        }
}

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

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

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

Home画面作成

ヘッダーメニューから「File > New > FIie..」でSwiftUI Viewを新規作成します。ファイル名は「TopView」とします。
000080.jpg
作成できると、左側にTopViewが追加されます。
スクリーンショット 2022-07-05 14.46.25.png
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が自動で最新に反映されるので確認します。（少し時間がかかる場合があります）
000100.jpg

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タブをクリックしたときに表示されます。
000110.jpg

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()
    }
}

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

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()
	    }
	}

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

最終的なコード

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()
    }
}

関連コンテンツ

0
0
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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?