SwiftUI/SwiftUI Essentials の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• SwiftUI/SwiftUI Essentials へ行く。
  • 1 (2021-07-27 (火) 13:14:23)
  • 2 (2021-07-27 (火) 13:59:46)

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をドラッグしてアセットカタログエディタに(画面分割するのが簡単か)。