[SwiftUI] ZStackの配置、余白、背景色等の設定

ZStackを使ってレイアウトをする上で、alignmet、background、frame等はどのように設定するのか確認してみます。

Swift 5.3
Xcode 12.4

 

ZStack

 
ZStackなどStackには他にVStack、HSTackやLazyVStack、LazyHStackがありました。
VStackはいわゆる平面的なY軸の垂直方向、HStackはX軸の水平方向ですが、
ZStackはZ軸の立体的な垂直方向になります。
 

複数のアイテムを設定するために、VStack、HStack、ZStackを使ってレイアウトできます。 またLazyVStack...
 
ここでは特にZStackについて細かく設定を確認します。
 

目次
1. alignment
 1.1 topLeading
 1.2 top
 1.3 topTrailing
 1.4 leading
 1.5 center
 1.6 trailing
 1.7 bottomLeading
 1.8 bottom
 1.9 bottomTrailing
2. background
3. frame
 

alignment

 
ZStackはViewを重ねますが子Viewに対して alignment ができます。デフォルトはcenterですがその他八方向に配置が可能です。

 

topLeading

Circle図形と文字列のStackです。

(青い矩形枠はStackを選択した場合に領域を表示してくれるもので、実際は枠はありません。)

 

top

 

topTrailing

 

leading

 

center

 

trailing

 

bottomLeading

 

bottom

 

bottomTrailing

 

background

 
ZStack内のView領域を背景色で色付けしてみましょう。


 
Color.blue で青色を指定しましたが、他の固定色は以下です。

  • Color.black
  • Color.blue
  • Color.gray
  • Color.green
  • Color.orange
  • Color.pink
  • Color.red
  • Color.white
  • Color.yellow
 

frame

 
ZStackの領域をframeを使って限定してみます。

これを使ってZStackを使うとこうなります。

 
またframeをSafe Areaまで広げることもできます。

 
 

References:
init(alignment:content:)
ZStack | Apple Developer Documentation
Alignment | Apple Developer Documentation
Color | Apple Developer Documentation
frame(width:height:alignment:) | Apple Developer

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。



TECH ACADEMY
iPhoneアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。



CodeCamp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。



侍エンジニア塾
侍エンジニア塾 無料体験レッスン





–>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする