Tag: SwiftUI/日本語チュートリアル1

目次

関連ページ

参考情報

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

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