SwiftUI/日本語チュートリアル1 の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• SwiftUI/日本語チュートリアル1 へ行く。
  • 1 (2022-04-11 (月) 15:28:30)
  • 2 (2022-07-20 (水) 17:05:32)

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

目次†

関連ページ†

参考情報†

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

• 【第1回】日本語版SwiftUIチュートリアル【基本要素を学ぶ】 | HIRO LAB BLOG

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