【SwiftUI】Viewの背景設定と重ね合わせ

Viewの背景設定と、別のViewを重ねる方法を解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3
スポンサーリンク

Viewの背景設定(background)

最初の引数に背景設定するViewを指定します。
Color Viewを使うと背景色が指定可能です。

背景Viewのサイズは、デフォルトで元となるViewの表示サイズと同じになります。

alignment引数で配置方法を指定可能です。
省略した場合はデフォルトの.centerとなります。

.topLeading
(左上)
.top
(上)
.topTrailing
(右上)
.leading
(左)
.center
(中央、デフォルト)
.trailing
(右)
.bottomLeading
(左下)
.bottom
(下)
.bottomTrailing
(右下)

使用例

Viewの背景指定

スポンサーリンク

別のViewを重ねる(overlay)

最初の引数に重ねたいViewを指定します。

重ねるViewのサイズは、デフォルトで元となるViewの表示サイズと同じになります。

alignment引数で配置方法を指定可能です。
指定可能な値は、.background()と同様です。

使用例

Viewの重ね合わせ

スポンサーリンク

最後に

幾つものViewを重ねてコードが複雑になる場合は、重ね配置用のZStackを使用した方がいいでしょう。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】 Viewのレイアウト(VStack、HStack、ZStack)
SwiftUIではStackと呼ばれる部品配置用のViewを組み合わせて、レイアウトを作成します。本記事では3つのStack View(VStack、HStack、ZStack)を中心にレイアウト方法を解説します。
【SwiftUI】Viewの切り取りとマスク
Viewの一部分を切り取る方法を解説します。主に画像の切り抜き等で使える方法です。
【SwiftUI】図形の輪郭描画(stroke)
(2020/8/22 更新)図形の輪郭を描画する.stroke()の使い方を解説します。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信