Open3
SiwftUI Tutorials のハンズオン記録
オーリアはじめに
以下のチュートリアルをやっていく。
SwiftUI Tutorials | Apple Developer Documentation
学習時に使用したコードはこちら。
構成
- Chapter1. SiwftUI Essentials
- Creating and Combining Views
- Building Lists and Navigation
- Handing User Input
- Chapter2. Drawing and Animation
- Drawing Path and Shapes
- Animating Views and Transitions
- Chapter3. App Design and Layout
- Composing Complex Interfaces
- Working with UI Controls
- Chapter4. Framework Integration
- Interfacing with UIKit
- Creating a watchOS App
- Creatign a macOS App
オーリアChapter1. SiwftUI Essentials - Creating and Combining Views
Section1: Creating and Combining Views
- ランドマーク共有アプリを作成
- ランドマーク詳細ビュー
- ビューのレイアウト
- スタックを使用してレイヤー化
- 画像のビューコンポーネント
- テキストのビューコンポーネント
- スタックを使用してレイヤー化
- ビューに地図を追加
- 標準の MapKit コンポーネントを組み込み
- ビューのレイアウト
- ランドマーク詳細ビュー
- LandmarksApp.swft
- App プロトコル
- SwiftUI アプリのライフサイクルを使用
- @main
- アプリのエンドボイントを特定
- App プロトコル
- View ファイル
- Viewプロトコル
- View のコンテンツとレイアウトを記述
- プレビュー
- ビューのプレビュー
- Viewプロトコル
Section2: Customize the Text View
(編集ミスって内容消えました...)
Section3: Combine Views Using Stacks
- View の body プロパティ
- View 内容、レイアウト
- Stack
- 複数の View をグループ化するもの
- 縦、横、上下(重ね) の3種類がある
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack() {
Text("oshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding()
}
.padding()
}
}
Stack を使って直感的に宣言できるのは良さそう
Section4: Create a Custom Image View
- 画像アセット
- Assets.xcassets に画像をドラッグ & ドロップ
- Image() で画像アセット名を指定
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay {
Circle().stroke(.white, lineWidth: 4)
}
.shadow(radius: 7)
}
}
Section5: Use SwiftUI Views From Other Frameworks
- フレームワークの使用
- SwiftUI と同じファイルで import するだけ
- ＠State
- 複数のビューから修正できるアプリのデータ
- パディング
- ${変数} で値への参照を渡すことができる？
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)
}
}
Section6: Compose the Detail View
- Layout View へのモディファイアーの適用
- Layout 内へのすべての要素にモディファイアーを適用する
- ex. Stack
struct ContentView: View {
var body: some View {
VStack {
MapView()
.ignoresSafeArea(edges: .top)
.frame(height: 300)
CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack() {
Text("oshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
.font(.subheadline)
.foregroundColor(.secondary)
Divider()
Text("About Turtle Rock")
.font(.title2)
Text("Describe text goes here.")
}
.padding()
Spacer()
}
}
}