- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-07-27T04:05:51+00:00","default:src128","src128")
#author("2022-07-20T08:05:32+00:00","default:src128","src128")
&tag(SwiftUI/日本語チュートリアル1);
*目次 [#na902913]
#contents
*関連ページ [#w8181ad9]
*参考情報 [#sde37380]
*第1回:基本要素を学ぶ ~ビューを作成し,組み合わせる~ [#tc325936]
-[[【第1回】日本語版SwiftUIチュートリアル【基本要素を学ぶ】 | HIRO LAB BLOG:https://hirlab.net/nblog/category/programming/art_1375/]]
**Step 1. プロジェクトの作成 [#nd342d95]
-Xcodeを立ち上げ「Create a new Xcode project」を選択。
-iOSのAppを選択。
-Product NameをLandmarks。Organization Identifierは「net.srcw」。
**Step 2. 実行してみる [#nf02f026]
-実行してみる。
-ContentViewのTextを書き換える。
#pre{{
struct ContentView: View {
var body: some View {
Text("Hello SwiftUI!")
.padding()
}
}
}}
-ラベルが書き換わるはず。
**Step 3. テキストをカスタマイズする [#a30e9b99]
-以下のようにしてコードからカスタマイズできる。
#pre{{
struct ContentView: View {
var body: some View {
Text("Hello SwiftUI!")
.font(.title).foregroundColor(.green)
}
}
}}
-インスペクタでカスタマイズすることもできる。Cmdを押しながら「Text」をクリック。「Show Swift UI Inspector」をクリックする。フォントやフォアグラウンドからーを変更するとコードに反映される。
**Step 4. Stackを使ったビューの組み合わせ [#h54ab5da]
-複数のビューを組み合わせスタックに埋め込む。ラベルが縦に並ぶ。
#pre{{
struct ContentView: View {
var body: some View {
VStack{
Text("Turtle Rock")
.font(.title)
Text("Joshua Tree National Park")
}
}
}
}}
-配置。左寄せ。
#pre{{
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
Text("Joshua Tree National Park")
.font(.subheadline)
}
}
}
}}
-さらに複雑に
#pre{{
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding()
}
}
}}
**Step 5. イメージビューのカスタム [#rbd429d6]
-Resources.zipを取り込む。
-Resourcesフォルダを選び、「File > Add Files to Landmarks」を選ぶ。Landmarksの中にResourcesフォルダができる。
-Resourcesの中のturtlerock.jpgをAssets.xcassetsにドラッグ。
-Command+Nで「SwiftUI View」を追加。CircleImage.swiftを作成。
#pre{{
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
}
}
struct CircleImage_Previews: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
}}
-円形に切り抜く場合。
#pre{{
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
}
}
}}
**Step 6. マップビューを作る [#e278ab49]
-MapView.swiftを作成。
#pre{{
import SwiftUI
import MapKit
struct MapView: View {
@State private var region = MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
var body: some View {
Map(coordinateRegion: $region)
}
}
}}
-プレビューするにはプレビュー画面の左上の再生ボタン(Live Preview)を押す必要がある。
**Step 7. 各ビューを組み合わせる [#b79a278b]
-ContentView.swiftを開く。マップビューとイメージビューを垂直に積み上げる。
#pre{{
struct ContentView: View {
var body: some View {
VStack {
MapView()
.frame(height: 300)
CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding()
}
}
}
}}
-画像がでかすぎるので、Assets.xcassetsの中のturtlerockを2xの枠に移動する。