使用者インタフェイスを設計を大きく見ると適当なインタフェイスカンポナントを選んでビューをどうやって配置するかを決めた後、異なる画面とビュー間の移動を実装することです。
SwiftUIはボタン、ラベル、スライダー、トグルビューのようにアフリを開発するときに使用される様々な種類の使用者インタフェイスカンポナントを持っています。また、SwiftUIは使用者インタフェイス構成方法と画面の方向と大き左によって対応する方法を定義するレイアウトビューを提供します。
今度の章はSwiftUIで含まれているStackコンテナビューを説明するし、使用者インタフェイス設計を比較的に簡単にする方法を説明します。
スタックビューに対する説明が終わったら柔軟なフレームの概念を扱って、どうするとレイアウトでビューの大きさを調整できるかどうかを説明する。
21.1 SwiftUI ステック
SwiftUIはVStack,HStack,ZStack(z-axis)形の三つのスタックレイアウトビューを提供します。
スタックはSwiftUI Viewファイル内で下位ビューたちがスタックビューで入れるようにします。
VStack {
Image(systemName:"goforward.10")
Image(systemName:"goforward.15")
Image(systemName:"goforward.15")
}
21.2 Spcacer, alignment, padding
21.3 コンテナの子ビューの制限
コンテナビューは直接な子ビューを十個で制限します。そうでない場合はアラーを出します。
もし10個が溢れる場合Stackの中でStackを使う方法もありましたが、Groupビューと言う方のコンテナがあります。
此れは10個の下位ビュー制限を避ける事ではなく、Groupは複数のビューで作業を実行する時も有用です。例え、Groupビューたちを含まって隠れる命令をあげば一つの命令で全てのビューを隠れることができます。
21.4 動的 HStackと VStack変換
設計段階でHStackにするかそれともVStackでするかに対する決定は最後にするべき事です。SwiftUIはレイアウトに使用者されるスタックターフ内で動的に変更できる様にします。此れはAnyLayoutインタフェイスを生成するしHStackLayoutまたはVStackLayoutコンテナで割り当てできます。
この例題はAnyLayoutインタフェイスを状態変数で割り合ってVStackLayoutコンテナを使用して子ビューを重ねるように構成します。その後このレイアウトを使って二つのImageビューを定例します。最後にmyLayoutで割り当てられたコンテナターフを横向きと縦向きを切り替える二つのButtonビューを追加します。
21.5 テキスト線制限とレイアウト優先順位
デフォルトで、HStackはTextビューを一列で見せます。例えば次のHStack宣言部は一つのImageビューと二つのTextビューを取れます。
ある条件ではうまく動作するかもしれませんが、使用者インタフェイスこのテキストを一行で表示しなければならない場合も出てくるでしょう lineLimit() 修正者を使うと決めることができます。
行制限はテキストが表示される最大及び最小行数を提供する範囲を指定することができます。
.lineLimit(1...4)
Priorityに対するガイドがいなければスタックビューたちの長さと空き交換空間に基づきTextビューをどうやって切るかを決定されます。テキストビュー宣言部でPriorty情報がいなければスタックはどんなビューのテキストが最も重要するかを知る方法がありません。
此れは、layoutPriority()修正者を使って解決することができます。此れはスタックであるビューで追加される事ができますし、該当ビューにPriorityレベルを指す値を伝達することができます。
前の例題で、'Flight times:"テキストより目的名前が持っとも大事すると仮定すれば
21.6 伝統的なスタックvs.遅延スタック
Stack:
? a pile of objects, typically one that is neatly arranged.
~ Old Norse stakkr ‘haystack’, of Germanic origin.
多い数のビューを持っているスタックがScrollViewで入られている場合はとても一般的である。これで含まれたビューまたはデバイス仮面の可視領域を超えて拡張されるコンテンツを使用者がスクロールできられるするビューでします。
既存のHStack及びVStackビューを使う時にシステムで含まれた下位ビューたちが現在使用者に表示されているかどうかは関係なく初期化する時すへての下位ビューを生成しまする耐部分の要求事項にはこれが問題できないかも知らないですが、スタックで数千個の下位ビューがある状況には性能低下につながる可能性があります。
この問題を解決するためにSwiftUIはLazyVertical及びHorizontalスタックビューも提供します。このようなビューは既存のスタックビューと同じ宣言構文を使用しますが必要なときだけサブビューを生成するように設計されています。例え、使用者がスタックをスクロールする時に現在画面の外であるビューは使用者に表示される点で到達する後だけで生成されます。ビューが領域を外れるとSwiftUIは該当ビューを解除しても以上もはやシステムリソースを占有しないです。
Extra arguments at positons #11, #12 in call //error
既存のスタックで初めてサブビューの問題が発生するときLazyStackで切り替える方がいいです。
21.7 SwiftUI Frame
frame
? a rigid structure that surrounds or encloses something such as a door or window.
~ in Middle English, ‘make ready for use’, probably led to frame; it also gave rise to the specific meaning ‘prepare timber for use in building’,
基本的には自身のコンテントと自信が属するレイアウトによって自動的に大きさが調整されます。大部分のビューの大きさと位置はスタックレイアウトを使用して調整できるんですが、時にはビュー自体が特定の大きさな領域にあわ当たることもあります。そのためSwiftUIは修正できるframe修正者を提供します。
frame修正者が無ければテキストビューはコンテントに当て大きさが調整されます。
もしビューの内容が動的に変更される場合には問題が発生することがあります。例えば、テキストが長くなれば切られる問題が発生します。
その問題はframe内で最大領域と最小領域を指定すると解決されます。
また、最小値と最大値をそれぞれ0と無限大に設定して使用可能する全ての領域を占有するように構成することもできます。
.frame(minWidth:0, maxWidth:.infinity, minHeight: 0, maxHeight: .infinity)
複数の修正者が連結されるとビューの模様に営業を与えることを記憶しはしょう。
デフォルトで、frameは画面をSafeAreaを遵守します。安全領域外であると判断することはCamaeraNotchが占める部分と時間、Wifiなどとアイコンを表示する画面の上段が入れます。SafeArea外まで拡張される様にframeを構成するとedgesIgnoringSafeArea()修正者を使用すると安全領域を無視してしまいます。
21.8 frameとGeometryReader
geometry:
? the branch of mathematics concerned with the properties and relations of points, lines, surfaces, solids, and higher dimensional analogs.
~ Greek, from gē ‘earth’ + metria 'measure'
フレイムはビューたちを入れているコンテナなの大きさによって調整される様に実装することもできます。此れはGeometryReaderでビューを包んでいるコンテナの大きさを区別するためにreaderを利用してできます。これはframeの大きさを計算するのに使用されます。次の例題は二つのTextビューを含まれているVStackの大きさを基準にしてTextビューの大きさを設定します。
21.9 要約
Component:
? a part or element of a larger whole, especially a part of a machine or vehicle.
~ Latin component- ‘putting together’, from the verb componere, from com- ‘together’ + ponere ‘put’. Compare with compound1.
使用者インタフェイスを設計することはコンポーネント持ってきて直感的な使用者経験を提供する様に画面に配置することでする使用者インタフェイスレイアウト設計の過程を簡単にするためにSwiftUIは幾つのレイアウトビューとコンポーネントを提供します。
基本的に、ビューはコンテンツとビューを含まっているコンテナで適用された制限によって大きさがきめります。優先順位設定をするとコンテナ中の他のビューの大きより減らとか増やすことができる
ビューで割り当てる空間をより効果的に制御するためにビューで柔軟なフレームを適用することができます。GeometryReaderを使用してビュー大きを調整することができます。