Tag: SwiftUI/SwiftUI Essentials
関連ページ†
参考情報†
- Apple公式サイトからサンプルプロジェクトがダウンロードできる。Completeの下に完成版のプロジェクトあり。
- これを参考にしつつ自分でプロジェクトを作成するのがよさげ。
Creating and Combining Views†
Create a New Project and Explore the Canvas†
- 新規プロジェクトの作成。
- 「Create a new Xcode project」。
- iOSのAppテンプレートを選択。
- プロジェクト名は「Landmarks」。ライフサイクルで「SwiftUI App」を選択。
- ContentView.swiftを選択。プレビューで確認。
- 「Hello World」を「Hello Swift」に変更。
Customize the Text View†
- テキストビューをカスタマイズする。
- プレビュー画面でラベルをCmd+クリック。「Show Swift UI Inspector」を選択。
- テキストを「Turtle Rock」に。
- Font modifierを「Title」に。
- コードを編集して「.foregroundColor(.green)」に。インスペクタから元に戻しておく。
Combine Views Using Stacks†
- スタックを使ってビューを積み重ねる。
- テキストビューのイニシャライザをCmd+クリックして、構造化編集のポップオーバーを表示し、「VStackに組み込む」を選択する。
- 画面右上の「+」ボタンをクリックしライブラリを表示。テキストエディタにドラッグする。
- テキストビューのプレースホルダを「Joshua Tree National Park」に変更。フォントを「sbuheadline」に編呼応。
- VStackのイニシャライザを変更。
VStack(alignment: .leading) {
- キャンバスで"Joshua Tree National Park”をCmd-クリックし、Embed in HStackを選択。
- 最終的に以下のように変更する。
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()
}
Create a Custom Image View†
- アセットに画像を登録。ダウンロードしたプロジェクトのResourcesディレクトリをプロジェクトに追加(copyする)。 turtlerock@2x.jpgをドラッグしてアセットカタログエディタに(画面分割するのが簡単か)。
- 新規ファイルで「SwiftUI View」から「CircleImage.swift」を作成。
- さらに円形にクリップする。
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
}
}
- さらに白色のボーダーを追加。さらにシャドーを追加。
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 7)
}
}
Use SwiftUI Views From Other Frameworks†
- MapViewを作成する。
- 「File New File」で「Swift UI View」を選び「MapView.swift」を作る。
- 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)
}
}
- ライブプレビューで確認できる。左側の再生ボタン。
Compose the Detail View†
- これまでのViewを組み合わせる。
- ContentView.swiftを選ぶ。
- MapViewとCircleImage、Spacerを追加。最終的に以下のように。
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("Joshua Tree National Park")
Spacer()
Text("California")
}
.font(.subheadline)
.foregroundColor(.secondary)
Divider()
Text("About Turtle Rock")
.font(.title2)
Text("Descriptive text goes here.")
}
.padding()
Spacer()
}
}
}
- なんか公式サイトの見た目と異なるけどこれでいいのか。