Customize views - SwiftUI でプログラミング - 1
Create a new project
新しいプロジェクトを作ります。前回と同じようにSwiftPlaygroundsで作ります。
Prototype a forecast view
目指すものは
こんな感じなもの作っていきます。同じようなパーツが組み合わせてあることに注目します。
まず簡単に文字だけで天気予報を表示させます。
Text("Mon")
Text("High: 70")
Text("Low: 50")
表示は
となります。
画像をつけていきます。SF Symbolを使います。
赤丸のアイコンをクリックすると一覧が出てきますので検索で"sun"と入れると太陽の画像が出てきくるのでそれをクリックするとカーソルの位置に挿入されます。
Image(systemName: "sun.max")
そして色をつけたいのでモディファイアを付けて黄色にします。
Image(systemName: "sun.max")
.foregroundColor(.yellow)
".fore"といれてやると候補が出てくるので選んでリターンすると挿入されます。そして括弧の中に".yellow"と入力してやれば完成です。
次にこれと同じようにもう一つ横に配置したいので
"HStack"を使います。(VStackは縦方向、HStackは横方向にレイアウトします。)
これで最初に目標にしたレイアウトの完成です。
全体のコード
import SwiftUI
struct ContentView: View {
var body: some View {
HStack {
VStack {
Text("Mon")
Image(systemName: "sun.max")
.foregroundColor(.yellow)
Text("High: 70")
Text("Low: 50")
}
.padding()
VStack {
Text("Tue")
Image(systemName: "cloud.rain.fill")
.foregroundStyle(Color.blue)
Text("High: 60")
Text("Low: 40")
}
.padding()
}
}
}
Create a custom subview
同じ構造のものについては雛形を作って使いまわせるようにしていきます。
天気のコードを一つのもの
ContentViewをDayForecastに変更したものを作って
struct ContentView: View {
var body: some View {
HStack {
DayForecast()
VStack {
Text("Tue")
Image(systemName: "cloud.rain.fill")
.foregroundStyle(Color.blue)
Text("High: 60")
Text("Low: 40")
}
.padding()
}
}
}
struct DayForecast: View {
var body: some View {
VStack {
Text("Mon")
Image(systemName: "sun.max")
.foregroundColor(.yellow)
Text("High: 70")
Text("Low: 50")
}
.padding()
}
}
新しいコードを一番したに配置してContentViewの中には"DayForecast()"を配置します。"DayForecast()"は同じコードなので同じように表示されます。
ContentViewの中のもう一つも"DayForecast()"にします。これで別で定義したものを使ってContentViewの中シンプルになりました。
全体は
struct ContentView: View {
var body: some View {
HStack {
DayForecast()
DayForecast()
}
}
}
struct DayForecast: View {
var body: some View {
VStack {
Text("Mon")
Image(systemName: "sun.max")
.foregroundColor(.yellow)
Text("High: 70")
Text("Low: 50")
}
.padding()
}
}
Generalize the day with a property
新しく作ったDayForecast()をカスタマイズしていきます。
を追加して
としてやります。
struct DayForecast: View {
let day: String
var body: some View {
VStack {
Text(day)
Image(systemName: "sun.max")
.foregroundColor(.yellow)
Text("High: 70")
Text("Low: 50")
}
.padding()
}
}
ContentView()を追加した変数を適応できるように修正します。
struct ContentView: View {
var body: some View {
HStack {
DayForecast(day: "Mon")
DayForecast(day: "Tue")
}
}
}
プレビューでは
となります。
この記事が気に入ったらサポートをしてみませんか?