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

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」。
  • Interfaceは「SwiftUI」。

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の準備(上記日本語チュートリアルサイトからダウンロードし展開)。
• 「File > Add Files to Landmarks」でResourcesフォルダを選択。Landmarksの中にResourcesフォルダができる。
• Resourcesの中のturtlerock.jpgをAssets.xcassetsにドラッグ(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 MapKit」重要。

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

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件