【SwiftUI】公式チュートリアルをやってみよう #6 | カスタムViewを組み合わせる

カスタムViewを組み合わせる

ContentViewの表示

ではまず、第3弾までで作成したContentViewを表示します。

ContentViewには、3つのテキストが表示されております。

VStackの追加

続いて、ContentViewにVStackを追加します。

既に実装されているVStackを囲うように、新たなVStackを追加しました。

MapViewの追加

続いて、新たに追加したVStackの1番上に、MapViewを追加します。

追加したMapViewには、frame(height:)で高さを指定しております。

実装できましたら、ライブプレビューボタンをタップし、マップを表示させましょう。

CircleImageの追加

続いて、MapViewの下に、CircleImageを追加します。

表示位置の調整

CircleImageが表示されましたら、表示位置を調整します。

まず、offset(y: -130)で、CircleImageを上方向に130ポイントずらしております。yは縦方向を示しており、上から下へいくほど数値が大きくなるため、-値を指定すると、上へずれることになります。

CircleImageが上へずれたことにより、CircleImageとTextとの間に大きな余白が生じるため、padding(.bottom, -130)を実装し、下の余白部分を減らしております。

Spacerの追加

続いて、画面下部にSpacerを追加します。

Spacerを追加することにより、他のViewが上に押し上げられます。

セーフエリアを無視する

上のプレビュー画像では、画面上部の、時間やWi-Fiアイコン表示部分にはマップが表示されておりません。この部分を、セーフエリアと呼びます。この部分までViewを表示するには、edgesIgnoringSafeArea()を実装します。

MapViewに、edgesIgnoringSafeArea(.top)を実装することで、上部のセーフエリアを無視するようになります。

今回のチュートリアルはここまでとなります。ありがとうございました。