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()
            }
        }
    }
    
  • なんか公式サイトの見た目と異なるけどこれでいいのか。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-07-29 (木) 13:51:51