【SwiftUI】複数のStackView組み合わせ解説！
- 2023.06.25
- SwiftUI
- VStack, 複数のStackView
本記事では、複数のStackViewを組み合わせて使用する方法を実際のコードとViewを示しながら解説していきます。
実際にHStackやVStackを組み合わせてアプリケーションを使用したいけどStackViewを複数使用するとどんな見た目になるのかのイメージがつかない人に向けての記事になります。
StackViewがわからない人はぜひ以下の記事でStackViewとはなんぞや。というところを確認してから来てください。
では早速具体例をもとに解説していきます。
複数のStackViewの組み合わせとは
本記事で書いていく「複数のStackViewの組み合わせ」とは、Vstackの中でHStack記述し、その中にまた別の要素を記述していくなどの使い方のことを示しております。言い方を変えると、StackViewを入れ子にすることを示しています。
StackViewは、中に入れた要素が常に直接自身を囲んでいるStackViewのルールに従って並べられるという動きになるという点を意識して記事を読み進めていただくとより理解が深まると思います。
VStackとHStack
まずはVStackとHStackを使用して、お互いのStackViewの中に入れて記述していく方法を書いていきます。
VStack内にHStack
縦の箱の中に要素を入れていき、そのVStackの中の要素の一つとしてHStackを入れていくイメージです。
まずは、VStackの中に四角、HStack、丸を入れていきます。
VStack {
Rectangle()
.foregroundColor(.green)
.frame(width: 100, height: 100)
HStack{
Circle()
.foregroundColor(.black)
.frame(width: 100, height: 100)
Circle()
.foregroundColor(.black)
.frame(width: 100, height: 100)
}
Circle()
.foregroundColor(.red)
.frame(width: 100, height: 100)
}実行結果
VStack内に四角、HStack(丸、丸)、丸を入れていくとご覧のように基本は全ての要素がVStackに従い縦に並んでいることがわかります。
VStack内の一つの要素としてHStackがあり、HStackは他の要素と同じように縦に並んでいますが、HStack内の要素はHStackのルールに従い、横並びで表示されます。
HStack内にVStack
続いて、先ほどとは逆のHStack内にVStackを入れていきます。図形は全く同じものを使用します。
HStack {
Rectangle()
.foregroundColor(.green)
.frame(width: 100, height: 100)
VStack{
Circle()
.foregroundColor(.black)
.frame(width: 100, height: 100)
Circle()
.foregroundColor(.black)
.frame(width: 100, height: 100)
}
Circle()
.foregroundColor(.red)
.frame(width: 100, height: 100)
}実行結果
同じ図形を使用しているのにも関わらず、全く異なる配置になることが確認できました。
今回は全体のルールとしてはHStackに従い横並びになっており、VStack配下にある黒丸2つだけが縦並びになるという配置になっています。
このように、複数のStackViewを組み合わせた場合には、内側に配置されたStackViewは外側のStackViewのルールに従って配置されるが、内側のStackView内に配置された要素は内側のStackViewのルールに従って配置されていることがわかります。
簡潔に言い換えると、各要素は直接自分を囲っているStackViewのルールに従うと表現することができます。
VStackとZStack
中に入れた要素を先頭に記述した順から奥に配置していくStackViewである、ZStackを使用した組み合わせも実例をもとに見ていきます。
ZStack内にVStack
ZStackの中にVStackを入れていきます。ZStackの要素の中の一つとしてVStackが配置されるイメージです。
ZStack {
Rectangle()
.foregroundColor(.green)
.frame(width: 200, height: 200)
VStack{
Circle()
.foregroundColor(.red)
.frame(width: 100, height: 100)
Circle()
.foregroundColor(.red)
.frame(width: 100, height: 100)
}
}実行結果
この例では、ZStackは上に書いた要素から奥に配置されていくというルールがあるため、緑の四角の前にVStackが配置されました。
そしてVStackで囲われた赤丸が縦に2つ並んでいることが確認できます。
VStack内にZStack
逆バージョンも確認していきます。
VStack {
Rectangle()
.foregroundColor(.green)
.frame(width: 200, height: 200)
ZStack{
Rectangle()
.foregroundColor(.red)
.frame(width: 200, height: 200)
Circle()
.foregroundColor(.yellow)
.frame(width: 100, height: 100)
}
}実行結果
VStackの中にZStackを入れると、緑の四角とZStackが縦に並び、ZStack内の赤い四角と黄色い丸が奥から順に並武ことが確認できます。
VStackとHStackとZStack
最後に、応用編のような形で3つのStackViewを組み合わせた図形の配置を見ていきます。
VStack {
Rectangle()
.foregroundColor(.green)
.frame(width: 200, height: 200)
ZStack{
Rectangle()
.foregroundColor(.red)
.frame(width: 200, height: 200)
VStack{
Circle()
.foregroundColor(.cyan)
.frame(width: 90, height: 90)
HStack{
Circle()
.foregroundColor(.cyan)
.frame(width: 90, height: 90)
Circle()
.foregroundColor(.cyan)
.frame(width: 90, height: 90)
}
}
}
HStack{
Circle()
.foregroundColor(.purple)
.frame(width: 100, height: 100)
ZStack{
Rectangle()
.foregroundColor(.yellow)
.frame(width: 110, height: 110)
Circle()
.foregroundColor(.purple)
.frame(width: 100, height: 100)
}
}
}実行結果
最後は、VStack,HStack,ZStackをそれぞれ適当に組み合わせて更に下の階層までStackViewを組み合わせたものを作ってみました。
大枠はVStackで囲んでおり、その中に緑の四角、ZStack、HStackを配置してみました。VStack内では2番目と3番目の要素であるZStack,HStackの中身について軽く触れていきます。
2番目のZStackは、赤い四角とVStackが並んでおり、VStack内では青い丸が1つとHStackが、そのHStack内では青い丸が2つ入っている構造になっております。
3番目のHStack内では、紫の丸とZStackが並んで入っており、ZStack内では黄色い四角と紫の丸が配置されています。コード内の各StackViewに階層ごとに色をつけているのでそちらも参考にしてみてください！
最後に
本記事では、SWIFTUIで使用するStackViewを複数使用する方法について解説してきました。SWiftUIについて、if文やwhile文についての解説記事も書いているのでぜひそちらもご覧ください。
-
前の記事
記事がありません
-
次の記事
【SwiftUI】基本図形(四角や丸)を簡単解説 2023.07.13
