SwiftUI Tutorial : Creating and Combining Viewsやってみた #Swift

SwiftUIの勉強でTutorialをやっていってるメモ書きです。
ちなみに今回は「Creating and Combining Views」をやっていきます。

リポジトリはこちら「toshihirooya/SwiftUI-Tutorial」

大体時間にして40minぐらいのチュートリアルみたいです。
あと、チュートリアルの検証環境は下記のような感じ。

環境	バージョン
mac os	10.15.2
Xcode	11.3

Section 1. Create a New Project and Explore the Canvas

検証用のプロジェクトを用意する。
- Project名「Landmarks」
- User Interfaceはもちろん「SwiftUI」を選択する。
XcodeのResumeボタンタップするとプレビューが表示されます。
デフォルトのプロジェクトだとSwiftUIでは下記のような二つのStructで構成されていて、一つ目の構造体がViewを定義するもので、二つ目の構造体がプレビューを構成しています。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Section 2. Customize the Text View

続いてTextViewをカスタマイズしていきます。
まずはコードを下記のように修正して
- Textの文字列を「Tutorial Rock」にする。
- fontを「.title」に設定
- テキストの色を「.green」に設定
TextのアトリビュートをメソッドチェーンでつなげてBuilder形式っぽく設定していく感じ

ContentView.swift

struct ContentView: View {
    var body: some View {
        Text("Tutorial Rock")
            .font(.title)
            .foregroundColor(.green)
    }
}

あと、PreviewからもViewの修正ができるようです。

PreviewでViewを`⌘+Click`でメニュー表示	`Show SwiftUI Inspector...`選択で設定を変更できる

あと、コードを⌘ + クリックしてもViewのアトリビュートを設定できる

Textを`⌘ + Click`する	Show SwiftUI Inspector...で設定できる

最後にコードを修正すると自動でPreviewにも反映されます。

Section 3. Combine Views Using Stacks

続いてStackを駆使してViewを並べていきます。
HStackにembeddedされているTextの間にSpacerを設定するとTextが画面の端にくるぐらいのSpaceが入るみたい。

ContentView.swift

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Tutorial Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
    }
}

Section 4. Create a Custom Image View

続いてカスタムViewを作っていきます。作るCustomViewはImageを円形に切り抜くViewです。
まずはSwiftUIの新しいファイルを追加します。

ファイルが追加できたらImageを画面中央に追加します。

CircleImage.swift

struct CircleImage: View {
    var body: some View {
        Image("safari")
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

続いてCircleImageを作っていきます。

Imageを円形にした	Imageの淵を灰色にした	影をつけた	Imageの淵を白色にした

CircleImage.swift

struct CircleImage: View {
    var body: some View {
        Image("safari")
            .clipShape(Circle()) // Imageを円形に切り出す
            .overlay(Circle().stroke(Color.white, lineWidth: 4)) // 切り出したImageの淵に線を描く
            .shadow(radius: 10) // 影をつける
    }
}

Section 5. Use UIKit and SwiftUI Views Together

続いてMapKitを使ってMapを表示するviewの作成をやっていきます

MapView.swift

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

Previewの再生ボタンを押すと地図が表示される。

Section 6. Compose the Detail View

あとは作ったViewを組み合わせていきます。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .edgesIgnoringSafeArea(.top)
                .frame(height: 300)

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Tutorial Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

最後に完成形がこちら