SwiftUI/日本語チュートリアル1 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• SwiftUI/日本語チュートリアル1 へ行く。
• SwiftUI/日本語チュートリアル1 の差分を削除

#author("2022-07-21T05:40:47+00:00","default:src128","src128")
#author("2022-07-21T07:16:00+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」。
--Interfaceは「SwiftUI」。

**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の準備(上記日本語チュートリアルサイトからダウンロードし展開)。
-「File > Add Files to Landmarks」でResourcesフォルダを選択。Landmarksの中にResourcesフォルダができる。
-Resourcesの中のturtlerock.jpgをAssets.xcassetsにドラッグ(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を作成。「import MapKit」重要。
#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の枠に移動する。