【Swift UI】HStack/VStack/ZStackの違いと組み込む方法!LazyHStackの使い方

この記事からわかること

  • Swift(Xcode)の使い方
  • HStack/VStack/ZStack違い
  • LazyHStack/LazyVStack使い方メリット

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

SwiftのHStack/VStack/ZStackを組み込む方法とそれぞれの違いを備忘録がてらまとめておきます。

HStack/VStack/ZStackの違いと意味

Swiftでは要素を並べる方法を3つのタイプから指定できます。

HStack:Horizontal stack(横)

HStackはHorizon(水平)の言葉通り中に指定している要素を横並びに並べることができるコードです。

HStack {
    Text("テキスト左")
    Text("テキスト右")
}

先に記述されている要素を左に後に記述されている要素を右側に配置します。

VStack:Vertical stack(縦)

VStackはVertical(縦)の言葉通り中に指定している要素を縦並びに並べることができるコードです。

VStack {
    Text("テキスト上")
    Text("テキスト下")
}

ZStack:Depth stack(重ねる)

ZStackはDepth(深さ)の言葉通り中に指定している要素をZ軸上に重ねて並べることができるコードです。

「Z軸」とは座標軸を表す言葉で「X軸」、「Y軸」、「Z軸」の3つから構成されているうちの1つです。X軸は横、Y軸は縦、Z軸は立体的に見た方法へ伸びていく軸線です。

ZStack {
    Text("テキスト:下側に重なる")
    Text("テキスト:上側に重なる")
}

先に記述されている要素が下側に後に記述されている要素がその上側に配置されます。

ZStackの重なる優先度は記述順だけでなく.zIndex(順番号)というモディファイア(修飾子)を使うことで変更できます。下記のように数字で重なり順を指定することで通常とが逆の重なり順にすることができます。

ZStack {
    Text("テキスト:下側に重なる").zIndex(2)
    Text("テキスト:上側に重なる").zIndex(1)
}

H/V/ZStackの組み込み方法

H/V/ZStackをコードの中に組み込む方法は複数あります。

1.直接コードを書く

一番直感的なのがコードをそのまま直書きすることです。

HStack {
    Text("テキスト左").padding()
    Text("テキスト右").padding()
}

2.ライブラリから部品をドラッグ&ドロップ

Xcodeの新規プロジェクト編集画面

2つ目は「ツールバー」にある「」ボタンを押すと出てくる「ライブラリ」メニューからドラッグ&ドロップする方法です。一番左の「View」タブの中を下にスクロールすると「layout」の中にそれぞれのStackが出てくるのでそれを組み込みたい箇所にドラッグ&ドロップするだけです。

xcodeのライブラリを表示させて部品をドラッグ&ドロップさせる

ライブラリ」メニューは一度部品を追加すると消えてしまうので連続で追加したい場合は「option」キーを押しながら「」ボタンを押すと上部に閉じるマークが出て追加では消えないようにすることができます。

3.Embed in ○Stackで追加

エディタに記述されている要素(TextやHStackなどでもOK)を「command」ボタンを押しながら右クリックするとポップアップが表示されます。

xcodeのEmbed in ○Stackで追加

その中にそれぞれ「Embed in ○Stack」があるのでクリックするだけで指定した要素を囲むように○Stackを配置してくれます。ちなみに「Embed」は「埋め込む」という意味です。

LazyHStack/LazyVStackの意味と使い方

実はHStack/VStackにはさらにLazyHStack/LazyVStackというLazy付きのものが存在します。通常のHStack/VStackとの違いは表示部分だけ読み込むことです。

使い方は基本的にScrollViewと併用して使います。ScrollViewを使う時は中の要素数が多く、画面には表示しきれないことが多いです。その際に画面外の要素まで読み込むのが通常のHStack/VStack、画面に表示されている部分のみ読み込み、スクロール時に必要な分だけ都度読み込むのがLazyHStack/LazyVStackです。

つまりメモリに負荷がかからないように効率良く使ってくれるのです。

ScrollView(.vertical) {
    LazyVStack {
        ForEach(1...50000, id: \.self) {
            Text("Contents \($0)")
        }
    }
}

例えば良くある繰り返し表示させる上記のようなコードを通常のVStackに変えると以下のようなエラーが発生しました。これはプレビューを作成するのに処理が重たくなってしまっていることが原因で5秒以上かかってしまい発生したようです。

Updating a preview from  in addText.app (84468) took more than 5 seconds.

私がSwift UI学習に使用した参考書

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index