SwiftUI の履歴(No.2)

Tag: SwiftUI

目次†

目次
関連ページ
参考情報
第1回：基本要素を学ぶ ~ビューを作成し，組み合わせる~

↑

参考情報†

【第1回】日本語版SwiftUIチュートリアル【基本要素を学ぶ】 | HIRO LAB BLOG…公式チュートリアルを日本語で解説したもの。

↑

第1回：基本要素を学ぶ ~ビューを作成し，組み合わせる~†

↑

Step 1. プロジェクトの作成†

Xcodeを立ち上げ「Create a new Xcode project」を選択。
iOSのAppを選択。
Product NameをLandmarks。Organization Identifierは「net.srcw」。

↑

Step 2. 実行してみる†

実行してみる。

ContentViewのTextを書き換える。

struct ContentView: View {
    var body: some View {
        Text("Hello SwiftUI!")
            .padding()
    }
}

ラベルが書き換わるはず。

↑

Step 3. テキストをカスタマイズする†

以下のようにしてコードからカスタマイズできる。

struct ContentView: View {
    var body: some View {
        Text("Hello SwiftUI!")
            .font(.title).foregroundColor(.green)
    }
}

インスペクタでカスタマイズすることもできる。Cmdを押しながら「Text」をクリック。「Show Swift UI Inspector」をクリックする。フォントやフォアグラウンドからーを変更するとコードに反映される。

↑

Step 4. Stackを使ったビューの組み合わせ†

複数のビューを組み合わせスタックに埋め込む。ラベルが縦に並ぶ。

struct ContentView: View {
    var body: some View {
        VStack{
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
        }
    }
}

配置。左寄せ。

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

さらに複雑に

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. イメージビューのカスタム†

Resources.zipを取り込む。
Resourcesフォルダを選び、「File > Add Files to Landmarks」を選ぶ。Landmarksの中にResourcesフォルダができる。
Resourcesの中のturtlerock.jpgをAssets.xcassetsにドラッグ。

Command+Nで「SwiftUI View」を追加。CircleImage.swiftを作成。

import SwiftUI

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

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

円形に切り抜く場合。

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
    }
}

↑

Step 6. マップビューを作る†

MapView.swiftを作成。

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. 各ビューを組み合わせる†

ContentView.swiftを開く。マップビューとイメージビューを垂直に積み上げる。

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の枠に移動する。