Viewを定義する
Published by @SoNiceInfo at 6/24/2020
Viewを自分で定義することで使い回すことができます。
さらに別ファイルで定義して呼び出すこともできます。
Viewとは
SwiftUIにおいてViewは非常に重要です。
構造体を定義する際にViewプロトコルに準拠させてbodyに表示したいViewを記述することによりViewを作成できます。View内でViewを呼び出すことによりアプリのUIが完成します。
実はText, Image, HStackといった要素はすべてViewです。
Viewの作り方
Viewを自分で定義して同じコードをひとつにまとめることで開発・メンテナンスが楽になります。Viewを作成する基本の型はこの様になっていて、別のViewからViewName()で呼び出せます。
struct ViewName: View {
var body: some View {
Text("This is custom View")
}
}Viewの作成例
ここではEmojiTileというViewを作成します。EmojiTileは受け取った文字列と色を使ってそのとおりに表示する正方形のようなViewです。Textに文字列、backgroundで色を指定することで表示できます。Viewでは様々なModifier(修飾子)が利用できますがここではpadding(余白)とcornerRadius(角丸)を利用しています。EmojiTileが準備できたらContentView内で呼び出します。VStackで縦にEmojiTileを並べて表示します。
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
EmojiTile(text: "😀", color: .blue)
EmojiTile(text: "😉", color: .green)
EmojiTile(text: "😊", color: .purple)
EmojiTile(text: "😀", color: .blue)
}
}
}
struct EmojiTile: View {
var text: String
var color: Color
var body: some View {
Text(text)
.font(.custom("Emoji", size: 50))
.padding(50)
.background(color)
.cornerRadius(10)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Viewを別ファイルに書き出す
自分で定義してパーツ化したViewは別ファイルに書き出すことができます。ContentView.swiftにすべて書いていくと可読性が下がっていくので別ファイルに書き出します。
ここではEmojiTileをEmojiTile.swiftというファイルに書き出します。
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
EmojiTile(text: "😀", color: .blue)
EmojiTile(text: "😉", color: .green)
EmojiTile(text: "😊", color: .purple)
EmojiTile(text: "😀", color: .blue)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
//
// EmojiTile.swift
//
import SwiftUI
struct EmojiTile: View {
var text: String
var color: Color
var body: some View {
Text(text)
.font(.custom("Emoji", size: 50))
.padding(50)
.background(color)
.cornerRadius(10)
}
}
struct EmojiTile_Previews: PreviewProvider {
static var previews: some View {
EmojiTile(text: "", color: .blue)
}
}
