[SwiftUI] VStack と HStack によるレイアウト

複数のアイテムを設定するために、VStack、HStack、ZStackを使ってレイアウトできます。

またLazyVStack, LazyHStackというのも新しく追加されました。

Xcode 13.4.1

Stack

 
SwiftUIのTextやImageなどのviewは、個別のbody propertyでlayoutを記述します。

但し、body propertyは単一のviewしか返さないので
複数のviewを扱うためにStackを使います。

  • VStack
    垂直方向に並べます。


 

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

  • HStack
    水平方向に並べます。


 

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

  • ZStack
    Viewを重ねることができます。


 

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

 

VStack

 
Projectを作成してHello Worldが記述されているところから
「Text」を選択してCommand + クリックでActions ダイアログを表示
Embed in VStack」を選びます。

Text()がVStackで挟まれた状態になります

このTextにもう1つTextを追加して垂直方向に並べてみましょう。

Xcodeの右上にある「+」アイコンをクリックし
「□」を選択するとContorl Viewsを選べるようになり、
そのなかにTextがあります。

TextをそのままEditorのHello Worldの下にドラッグ

この辺りは直接記述したほうが早い気がしますが、使い方として覚えておきましょう(但し、やり方が変更されることも多いです)

Previewで見ると文字列が垂直方向に並んで配置されました。

Code Editorの「VStack」を選択してInspectorからAlignmentの「左寄せ」を選ぶと
.leadingに設定されるのがわかります。

Previewでは2列の先頭が左に寄せられています。

 

HStack

 
VStackど同様の設定をしてみましょう

「Text」を選択してCommand + クリックでActions ダイアログを表示
Embed in HStack」を選び、Text()をLibraryから追加します。

Text(“Placeholder”) が横に並んでレイアウトされているのがわかります。

 

ZStack

 

VStackど同様の設定をしてみましょう

「Text」を選択してCommand + クリックでActions ダイアログを表示
Embed in VStack」を選び、Circle()をLibraryから追加します。

Circle()をModifiresでサイズを指定します。ただこのままではText()がわからないのでCircle()にforegroundColorでオレンジ色をつけてみます 

 
円と文字列が重なりました。

 

LazyZStack/LazyHStack

 
Lazyというのは「怠惰な」という意味ですが、きっちり表示するデータを揃えているとメモリがいっぱいになるので、(いい加減に?)見えているところしか用意していないという機能のようです。

たとえばスクロールListなどで、たくさんのTextを読み込んでいきます。ただスクロールして見えなくなってしまうものも取り込んだままだとメモリを圧迫することになるので、適当に表示されているところだけにしてもいいじゃん的なことをやってくれるものです。

LazyVStackにはサンプルコードがあるのですが、ForEachの回数が少ないので効果がわかりませんでしが、回す回数を増やしてみるとどのようになるかわかります。

このコードではエラーとなります。
Previewのエラーではありますがいずれにしてもこれは使えないということです。

VStackをLazyVStackに変更

とりあえずエラーにはならず、表示がされています。

LazyHStackも同様です。
ScrollView(.horizontal) と水平方向のスクロールに変更します。

 
 
References:
SwiftUI Tutorials — Tutorials | Apple Developer Documentation
VStack – SwiftUI | Apple Developer Documentation
HStack – SwiftUI | Apple Developer Documentation
ZStack | Apple Developer Documentation
LazyVStack | Apple Developer Documentation
LazyHStack | Apple Developer Documentation



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

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


TECH ACADEMY
iPhoneアプリコース


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


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




誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

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

フォローする