スクリーンショット_2019-12-16_16

【Xcode】超初心者のためのSwiftUIチュートリアル4

【Xcode】超初心者のためのSwiftUIチュートリアル1
【Xcode】超初心者のためのSwiftUIチュートリアル2
【Xcode】超初心者のためのSwiftUIチュートリアル3
の続きです。

今回は「Creating and Combining Views(ビューの作成と結合)」のラスト、セクション6「Compose the Detail View(詳細ビューを作成する)」を進めていきます。

Appleの公式チュートリアルはこちらを参照してください。日本語で閲覧したい方は、自動翻訳機能のあるGoogleChromeなどのブラウザを使用するといいでしょう。

1.ContentViewファイルにVStackを付け加える

今回は、ContentView.swiftファイルの中に、前回作った地図(MapView)とイメージ画像(CircleImage)を挿入してビュー画面を作り込んでいきます。

左側のプロジェクトナビゲーターからContentView.swiftを開きます。

スクリーンショット 2019-12-31 22.42.24

開いたら、もうひとつVStackを追加します。一番上にあるVStackをcommand⌘を押しながらクリックし、ポップアップから「Embed in VStack」を選びます。スクリーンショット 2019-12-31 22.44.35

これで今あるVStackを内包する新しいVStackができました。このVStackの中にアイテムを入れ込んでいきます。

スクリーンショット 2019-12-31 22.46.37

2.地図画像をContentViewに表示する

新しく作成したVStackのすぐ下にMapView()と書き、地図の高さを300に指定します。

スクリーンショット 2020-01-01 1.19.10_1

コードを直接書くか、いつものようにcommand⌘+クリック→Show SwiftUI Inspector...を選んで下図のポップアップを出します。FrameのHeightに300と入力します。

スクリーンショット 2019-12-31 22.49.31

コードを書き終わって、オートプレビューモードにします。

スクリーンショット 2019-12-30 12.12.24

すると、下図のように表示されます。MapView.swift(チュートリアル3の目次8参照)のプレビューでは画面いっぱいだった地図が、高さ300ptの枠内で表示されます。

スクリーンショット 2019-12-31 22.52.26

3.イメージ画像を表示する

地図が表示されたら、次はイメージ画像を表示しましょう。mapViewの下の方にCircleImage()と書いてください。すると地図のすぐ下にCircleImage.swiftに作成したイメージ画像が追加されます。

スクリーンショット 2020-01-01 1.19.10

スクリーンショット 2019-12-31 22.53.31

4.イメージの位置を移動する

デザインを調整するために、CircleImageの位置を上に移動させ、地図と重ねます。下のようにコードを追記しましょう。

スクリーンショット 2019-12-31 23.55.13

下の図を見てもらうとわかりますが、青いラインの四角が本来CircleImageが入っていた位置です。そこから130pt上に移動して表示されます。
基本的なことですが、yでタテの位置、xでヨコの位置を指定できます。

スクリーンショット 2020-01-01 0.31.28

.paddingは余白を作るコードですが、数値をマイナスにすると余白が縮小します。これで移動したCircleImageとタイトルのHStackの間隔が元通りになりました。

4.部品全体を上へ移動させる

VStackの一番下の方にある.padding()の下に「Spacer()」を入力しましょう。

スクリーンショット 2020-01-01 1.25.38

これで下のスペースが拡張して、他のアイテムグループが全体的に画面の上方に押し上げられます。

スクリーンショット 2019-12-31 22.59.34

5.地図を上の端まで表示させる

この状態で地図の上端を見ると、表示がセーフエリアで見切れています。ちょっとカッコ悪いので、地図の端をセーフエリアを超えて表示させるために、下のコードを追加しましょう。

スクリーンショット 2019-12-31 23.55.27

スクリーンショット 2019-12-31 23.07.54_1

これでContentView.swiftの完成です。

スクリーンショット 2020-01-01 1.10.37

コードは下に書いてあるので参考にしてください。

ContentView.swift

import SwiftUI
struct ContentView: View {
   var body: some View {
       
       VStack {
           
           MapView()
               .edgesIgnoringSafeArea(.top)
               .frame(height: 300.0)
               
           
           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()
           
           Spacer()
       }
   }
}

ここまでスムーズにチュートリアルを進められたでしょうか。swiftで使ってきたstoryboardとは書き方が全く違いますが、HTML&CSSをやったことのある人は、少し似たような感じでコードを書くことができますね。
次回からは第2のステップとなる「Building Lists and Navigation(建物リストとナビゲーション)」の解説を書いていきます。

【Xcode】超初心者のためのSwiftUIチュートリアル1
【Xcode】超初心者のためのSwiftUIチュートリアル2
【Xcode】超初心者のためのSwiftUIチュートリアル3


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとー♪
3
40代にしてプログラミングの勉強を始めました。swiftやmicro:bitについてあれこれ書いていきます。時々3Dプリンターについてもメモします。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。