SwiftUI/SwiftUI Essentials

&tag(SwiftUI/SwiftUI Essentials);

目次†[edit]

目次
関連ページ
参考情報
Creating and Combining Views
Create a Custom Image View
Use SwiftUI Views From Other Frameworks
Compose the Detail View

↑

参考情報†[edit]

Apple公式サイトからサンプルプロジェクトがダウンロードできる。Completeの下に完成版のプロジェクトあり。
これを参考にしつつ自分でプロジェクトを作成するのがよさげ。

↑

Creating and Combining Views†[edit]

↑

Create a New Project and Explore the Canvas†[edit]

新規プロジェクトの作成。
「Create a new Xcode project」。
iOSのAppテンプレートを選択。
プロジェクト名は「Landmarks」。ライフサイクルで「SwiftUI App」を選択。
ContentView.swiftを選択。プレビューで確認。
「Hello World」を「Hello Swift」に変更。

↑

Customize the Text View†[edit]

テキストビューをカスタマイズする。
プレビュー画面でラベルをCmd+クリック。「Show Swift UI Inspector」を選択。
テキストを「Turtle Rock」に。
Font modifierを「Title」に。
コードを編集して「.foregroundColor(.green)」に。インスペクタから元に戻しておく。

↑

Combine Views Using Stacks†[edit]

スタックを使ってビューを積み重ねる。
テキストビューのイニシャライザを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†[edit]

アセットに画像を登録。ダウンロードしたプロジェクトのResourcesディレクトリをプロジェクトに追加(copyする)。 [email protected]をドラッグしてアセットカタログエディタに(画面分割するのが簡単か)。
新規ファイルで「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†[edit]

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†[edit]

これまでの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()
        }
    }
}

なんか公式サイトの見た目と異なるけどこれでいいのか。

↑

SwiftUI/SwiftUI Essentials

目次†[edit]

関連ページ†[edit]

参考情報†[edit]

Creating and Combining Views†[edit]

Create a New Project and Explore the Canvas†[edit]

Customize the Text View†[edit]

Combine Views Using Stacks†[edit]

Create a Custom Image View†[edit]

Use SwiftUI Views From Other Frameworks†[edit]

Compose the Detail View†[edit]

Contents

メニュー

配布物

ゲーム

ショートカット

最新の20件