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

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

Swift 5.3
Xcode 12.4

 




VStack

 
VStackなどStackには他にHStack、ZSTackやLazyVStack、LazyHStackがありました。
 

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

目次
1. alignment
 1.1 center
 1.2 leading
 1.3 trailing
2. spacing
3. Spacer()
4. background
5. frame
6. Divider
 

alignment

 
alignment は水平方向に左・右・中央に寄せる操作になります。

 

center

(青い矩形枠はVStackを選択した場合に領域を表示してくれるもので、実際は枠はありません。またpadding()が追加されているのでそのまま使っていますが外す事も可能です。)

 

leading

 

trailing

 

spacing

 
垂直方向のView間の余白をCGFloatで指定します。
 


 
Text() に付随するpadding()が別の余白を形成しているので外してみます。

尚、padding() は上下左右に細かく設定することも可能です。

 
spacing 間隔を100にしてみるとこのようになります。


 
また、マイナスの設定もでき、上下の位置が逆転します。

 

Spacer()

 
Spacer()を使うと上寄せや下寄せが可能となります。
例えば、”Hello, world!” を上寄せするには、

これは、画面サイズを計算せずに中央と上下に分散してレイアウトしたい場合などに役立つかもしれません。

 

background

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


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

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

frame

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

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

frameの左端に文字列を揃えたい時はalignmentを変えます。


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

 

Divider

 
VStackを分割するラインを Diver() を使って引くことができます。

 

細い線ですが分割されています。

残念ながらDivider()では太さを調整できないので
frameで細長い矩形を代用するなど他の方法を使います。

 

References:
init(alignment:spacing:content:)
VStack | Apple Developer Documentation
Horizontal alignment modes | Apple Developer Documentation
padding(_:) | Apple Developer Documentation
Spacer | Apple Developer Documentation
Color | Apple Developer Documentation
frame(width:height:alignment:) | Apple Developer
Divider | Apple Developer Documentation




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

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



TECH ACADEMY
iPhoneアプリコース


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



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


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



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


シェアする

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

フォローする