SwiftUIによるカスタムレイアウトの作成

SwiftUIによるカスタムレイアウトの作成

SwiftUIでは、レイアウトのレベルを上げたり、Appのインターフェイスのビューを配置する強力なツールが利用できます。ここでは、Gridコンテナについて解説します。これにより、高度なカスタマイズが可能な2次元レイアウトが作成できるようになります。さらに、Layoutプロトコルを使用して、完全なカスタム動作を有する独自のコンテナを構築する方法についても解説します。また、レイアウトタイプ間でシームレスなアニメーション効果を作り出す方法や、優れたインターフェイスを作成するためのヒントやベストプラクティスも紹介します。

リソース
関連ビデオ

WWDC23
- アシスティブアクセスについて
WWDC22
WWDC20
- SwiftUI の Stack, Grid, Outline
WWDC19
- SwiftUIでカスタムビューを構築する
ダウンロード

♪ ♪
「SwiftUIによるカスタムレイアウトの作成」へようこそ私はPaulです Developer Documentationで働いています SwiftUIはAppのインターフェースを構成する豊富な構成要素のセットを提供しますテキスト画像グラフィックなどの組み込みViewを組み合わせカスタムや複合Viewを作成できますこれら要素を洗練されたグループに配置するため SwiftUIはレイアウトツールを提供しています
水平と垂直スタックのようなコンテナは Viewを互いに相対的に配置する場所を SwiftUIに伝えることができ Viewモディファイアは間隔や配置などをさらに制御することができますこの講演では一般的なレイアウトをより簡単に構築しより複雑なレイアウトを可能にする新しいツールを紹介します途中 SwiftUIでレイアウトを操作するヒントを提供しますまず静的なViewのセットを表示する場合に２次元のレイアウトに最適なグリッドファミリーの新しいメンバーを紹介します次に新しいレイアウトプロトコルを使用してレイアウトエンジンと直接対話できるカスタムViewコンテナタイプの作成方法を説明しますさて ViewThatFitsについて説明します Viewのコレクションから利用可能なスペースに一致する Viewを自動的に選択するコンテナタイプです最後にAnyLayoutを使用してレイアウトタイプ間のシームレスな移行を追加する方法を紹介しますこれらの新機能を使ってみるため私が手掛けているAppを見てみましょう
ここ数年私の仲間内で最高の毛皮のペットになるのは誰かという論議が交わされています私自信の意見もありますが何か一致した意見がないか投票を行うAppを作ることにしましたそして毛皮アレルギーの人々も考慮して選択肢を１つ増やしました SwiftUIでインターフェースのデザインを行うのが好きですプロトタイプの作成がプレビュー使用で簡単ですその出発点として簡単なスケッチを描きました投票が一定期間続くと想定して順位を示すリーダーボードを真ん中に置きたいです一番下に投票用のボタンを設置しますトップに投票された内容を画像で表示します
まず最初にリーダーボードを作りたいと思いますではそれを詳しく見ていきましょうリーダーボードは２次元のグリッド構成で候補者ごとの行と名前得票率得票数の列が表示されますここで実現したいことが具体的にいくつかありますまず得票率を表すprogress viewsはできるだけ大きなスペースを確保したいので２つのテキスト列はそれぞれのケースで最も広いセルを収容するのに必要な幅だけにしていますそしてこれはどんなに文字数が増えても他の言語を話す友人や異なる文字サイズのデバイスを使う人にとっても同じである必要があります次に名前は前揃えにしたいですしかし合計は後揃えにしたい Lazy gridsはスクロール可能なコンテンツに最適ですコンテナは多くのViewを持つ場合に非常に効率的です表示中か表示されようとするViewだけを読み込むからです一方コンテナは自動的にセルのサイズを両軸で調整することはできません
例えば LazyHGridは列を描画する前に列内のすべてのViewを測定できるため各列の幅の算定ができますが行の高さの算定のために全てのViewの測定はできませんこの機能を実現するために Lazy Gridは初期化時にその次元の１つについて情報提供する必要があります
Lazy gridsと SwiftUI layout container typesは 2020の「SwiftUIのStack Grid Outline」をご覧ください私の場合スクロールの必要はありませんし SwiftUIに各セルの高さと幅の両方を計算させたいのですこのレイアウトのためSwiftUIは Grid Viewを提供します Lazy gridとは異なりグリッドはすべてのViewを一度にロードするため列と行の両方にわたって自動的にセルのサイズと位置を調整することができますそのためのコードを見てみましょうこれはGridとしたリーダーボードの基本バージョンです GridViewには３つの GridRowインスタンスがあります１つの行の中で各Viewは列に対応していますこの例では各行の最初のテキストViewが最初の列に対応し進行状況Viewは２番めの列にありますそして最後のテキストViewは３列目にあります Gridはその最大のViewを保持するために必要なスペースを各行と列に割り当てていることに注意してください最初のテキスト列には長い名前に十分な幅があります進捗状況インジケーターのような柔軟なViewはGridが提供するスペースと同じだけのスペースを取りますスペースはテキスト列を確保した後に残ったものです少し調整したいのですがまず基本的なデータモデルを作成して投票数を保存できるようにします
ネットワーク上のデータを管理・共有するためロジックが必要ですがプロトタイプを作成中は単純な構造が必要ですこの型を ForEachで使い安くするために識別可能なコンフォーマンスを含め Equatableコンフォーマンスに準拠しアニメーションを変化可能にします
次にプロトタイプを作成しサンプルデータを作ります Gridに戻りステート変数を作成しサンプルデータで初期化することができますそのデータを使ってForEachで行を作ることができますレンダリング出力が変化していないのは同じデータが表示されているからですすでにかなり近いですがセルの調整が必要です現在すべてのセルは中央揃えされておりこれはGridのデフォルトですしかし覚えている限りでは名前は前揃えに値は後揃えにしたいのですそのためにGridを前揃えで初期化します使用する値は Grid内のすべてのセルに適用されます最初の２つの列は上手くいきましたが最後の列は？１つの列の調整にはその列の任意の１つのセルに gridColumnAlignmentのビュー修飾子を適用できますそこで最後の列にあるテキストViewでやってみますなるほどそこまではいいのですが各列の間に仕切りがあったほうがいいような気がします新しい行を仕切り付きの For Eachに追加するだけなら私が期待するものではないのですがこれには２つの興味深いことがありますまず仕切りが柔軟なViewであるため 1列目のスペースが広くなってしまします基本的にGridは最後の列に必要なものをいれ残りのスペースを最初の２つの列に分割しています次に他のGrid行に比べて Viewの数が少ないGrid行は missing Viewは後の列で空のセルを作成するだけです私の望みは全ての列をまたぐ仕切りでSwiftUIにはそれを行う新しいViewモデファイアがあります
Gridセル列モディファイアをViewに追加することで１つのViewがいくつかの列にまたがるようにできますこの場合３つの列にまたがって表示されます ViewがGrid全体をカバーする場合は Gridの行の外側にViewを単独で書くことで簡略化できますさてリーダーボードがよい状態になったので次に投票ボタンを見てみましょう
一見すると派手さはありませんしかし　ひとつだけ特別な要求があります一方では特定の選択肢のボタンを小さくして参加者を偏らせたくはありませんだたボタンがコンテナと同じ大きさも避けたいです iPadやMacでは非常に大きくなる可能性がありますボタンは最も幅の広いボタンテキストと同じにしますではこれをHstackで作るとどうなるのでしょう？各ボタンはテキストラベルに合うようにサイズ調整され HStackはこれらを水平方向にまとまていますこのデフォルトのスタック動作は多くは望まれますがこのプロジェクトの私の使用には全く合っていません
SwiftUIのレイアウトの基本はこちらを 2019「SwiftUIでカスタムビューを構築する」その時のコンセプトを使ってこのView階層をみて何を変更すれば望む動きになるのかを見てみましょう
まずスタックのコンテナは大きさを提案しますこれを元にスタックは３つのボタンにサイズを提案し各ボタンはそのサイズをテキストラベルに渡しますテキストViewは含まれる文字列によって実際に欲しいサイズを計算しこれをボタンに報告しますボタンが情報を受け渡しますスタックはこの情報をもとに自分のサイズを決めボタンを配置しコンテナに自分のサイズを報告しますボタンがテキストの大きさに合わせて表示されテキストViewをフレームで囲み拡大できたらどうでしょう？テキストは変更なしですがボタンは柔軟なサブViewを参照し HStackが提供する同じスペースが使用されますスタックはそのスペースを含むViewに均等に分割しますそのためボタンが同じサイズなりましたが実際のサイズはスタックのコンテナに依存しますスタックはコンテナが提供するあらゆるスペースを埋めるために拡張されますが私が望むものではありません私が欲しいのは各ボタンの理想的なサイズを尋ね最も幅の広いものを見つけそのマウントを提供するカスタムスタックタイプです幸いにもSwiftUIにはそれを行う新しいツールがありますレイアウトプロトコルを使用すると私の使用事例に合ったレイアウト処理に直接参加するカスタムレイアウトコンテナを定義することができますその様子をご覧ください特定の問題を解決するためHStackをもう一度見てこれをEqualWidthHStackに変更してみましょうこのタイプはボタンに等しく幅を割り当てますボタンの理想的な幅と同程度の幅です柔軟なフレームを使用し幅の狭いテキストのボタンがスタック内のスペースに合わせて拡張できますしかしボタンには私が測定できる理想的なサイズがありますテキストの幅です Equal Width HStackの実装を見てみましょう
まずレイアウトプロトコルに準拠した型を作成します基本的なレイアウトに必要なのは２つのメソッドですそのためスタブを追加しましょう最初のメゾットはsizeThatFitsでレイアウトコンテナの大きさを計算し報告します
私のレイアウト自身のコンテナViewからのサイズ提案であるViewサイズの入力ができます subviewsパラメーターでサブViewにサイズを提案できます
サブViewに直接アクセスできないことに注意ですその代わりサブViewの入力はサイズの提案などサブViewと特定の方法で対話できるプロキシのコレクションでサイズを提案するようなものです各プロキシは提案された具体的なサイズを返しますその回答をすべて集めて計算を行い同じ幅の HStackの具体的な大きさをそのコンテナに返します
２つ目のメソッドとして placeSubviewsを実装しますレイアウトのサブViewの表示位置を指定しますこれは同じサイズの提案とサブViewの入力を受け取りさらに範囲入力を受け取りそれはサブViewを配置する必要のある領域を表します Boundsは私が求めたサイズを実装に合わせた長方形ですいいですか　ViewはSwiftUIでサイズを選びます私のレイアウトコンテナは求めたサイズを取得します領域の原点は左上です正のXが右側で正のYが下方にあります右から左への言語環境であってもすべての配置計算を想定することができますその方向にViewをレイアウトするときフレームワークが自動的に各ViewのX位置を反転させるからですただし長方形の原点が(0,0)だと仮定しないでください特に原点が０でない場合レイアウトのサブViewを配置するメソッドが別のレイアウトの同じメソッドを呼び出すようなレイアウト合成を可能にします作業し易いように長方形には各次元の最小点中心点最大点など領域の重要な部分にアクセスするためのプロパティが用意されています
次に進む前にこれらのメソッドが持っているもう１つのパラメーターに注目してくださいこれはメゾットコールをまたいで中間計算の結果を共有するため使用する双方向キャッシュです多くのシンプルなレイアウトではこれはい必要ないです私もキャッシュを無視することにしますしかし Instrumentsを使用し Appをプロファイリングしレイアウトコードの効率を改善する必要がある場合 Instrumentsの追加を検討してくださいドキュメントをチェックするをご覧ください
では sizeThatFitsを実装してみましょう水平に配置されたすべてのボタンが同じ幅で収まるようコンテナのサイズを返したいのですまず各ボタンに提案したサイズを要求して何か返ってくるか見てみましょうサブViewの柔軟性を測るために複数の最小最大理想的なサイズ特別な提案を使用して複数の測定を行うことができまたは特定のサイズを提案することができますこの場合特定されていないサイズの提案を使います
そして戻ってきたすべてのサイズについて各寸法で最大の値を求めますこの場合金魚ボタンが幅を設定し高さはすべて同じになりますさてこれをメソッドにリファクタリングしましょうサブViewを配置するときに再び必要になるからです次にViewの間隔を計算する必要があります 10ポイントなど一定の間隔にすればいいのですがレイアウトプロトコル使用でもっとよい方法があります SwiftUIではすべてのViewはそれ自身と次のViewの間にあるスペースの量を示す間隔設定を持ちますこれらの設定はViewSpacing インスタンスで保存されレイアウトコンテナで使用できます Viewは異なるエッジで異なる値を選ぶ場合がありまた隣接するViewの種類によって異なる値もあります Viewはそれ自身とテキスト Viewの間に画像とは多少差があるスペースを必要とするかもしれませんプラットホームによってもその値は異なりますこれらの設定を無視することもできますこれはカスタムページングで組み込みスタックを初期化したときに起こることですあなた自身のレイアウトで環境設定を尊重することは自動的にApple’s interface guidelines に従う結果を得るための良い方法であり結果システムの他の部分の外観と一致しますさてどのViewもすべてのエッジに環境設定を持っていますが２つのViewを一緒にすると共通のエッジの環境設定が一致しないことがありますこの解決のため組み込みレイアウトコンテナは２つの環境設定のうち大きい方を使用します同じことを私のレイアウトで行うことができます
サブViewのプロキシは与えられた軸に沿って他のボタンに各ボタンの良い間隔の求め方を提供しますそこで値の配列を作成してみましょうサブViewを走査し各プロキシの spacingインスタンスで間隔法を呼び出し水平軸に沿った次のViewの spacingインスタンスまでの間隔を取得しますこの呼びかけは共通のエッジで両方のViewの参照を考慮しますこの配列の最初の要素は猫ボタンが金魚ボタンに対して水平方向にどれだけのスペースが必要か次に金魚のボタンが犬のボタンに対してどの程度必要か示しています配列の最後の要素は比較するボタンがないので強制的にゼロにしますさてこれをメソッドにリファクタリングしましょうこれで間隔値を組み合わせて全体の間隔の合計を求めそれを幅と高さの測定値を合わせてサイズ値を返すことができますサブViewの理想的なサイズと各サブViewの好ましい間隔を考えるとこれは私のレイアウトに必要なサイズですもう１つ必要なメソッドはplaceSubviewsです私はコンテナの境界とボタンを指示するため使用できるサブViewのプロキシのコレクションを取得しますまずsizeThatFitsメソッドで行ったのと同じように maxSizeとspacin配列を計算しますここでもこれらの値が必要になるからです次に各サブViewに使用できるサイズ案を作成します今回は理想的なサイズでなく持ってほしいサイズに基づいて作成しますボタンを同じにしたいので１つの案だけでいいのですそして境界線の先端とボタンの幅半分を加えたものとして計算された最初のサブViewの水平方向の開始位置が決まります原点がゼロであることに依存しないことに注目です代わりにminXの値から始めています最後に各サブViewのプロキシを通過して点その点がボタンから何を示すのかのステートメントおよびサイズの提案でその配置メソッドを呼び出すことができますループのたびに Viewの幅と次のViewのペアの間隔を加えて水平位置を更新し次の反復に備えますこれで終わりです新しいViewレイアウトタイプを使うとどうなるでしょう
するとこうです組み込みのHStackと同じように独自のレイアウトコンテナをインスタンス化するとボタンが水平にすべて同じ幅に配置されますここで少し立ち止まってLayoutプロトコルが過去にGeometry readerを使用したかもしれない問題をどのように解決したかをお話します Geometry readerはView サイズを測定するツールですしかしこの場合はベストな選択とは言えません Geometry readerはコンテナ Viewを測定しそのサイズをサブViewに報告するよう設計されているからですサブViewはその情報をもとに独自のコンテンツを描きます Geometry readerの使用目的では情報が下に流れることに注意してくださいリーダーが行う測定はそれ自身のコンテナのレイアウトに影響を及ぼしません
これはコンテナに合わせてスケールを描くのに最適です Geometry readerは有効なスペースをパスロジックに知らせサブView内のパスロジックが調整されますコンテナのサイズが変わればパスも変わります Geometry readerは新しいサイズを渡すからです私のボタンの場合見やすいように１つだけ取り上げますテキストViewを測定しコンテナであるフレームをどのように設定するかを決定する必要がありますそこでGeometry readerをテキストViewのオーバーレイに追加しコンテナを測定して通常の流れとは別に測定データをフレームに送信しますこの実行はレイアウトエンジンの回避となりループが発生する可能性があることに注意してくださいリーダーはレイアウトを測定しフレーム変更しますレイアウトが変更され再度測定が必要な場合があります現在これを動作させることは可能ですが注意しないと Appをクラッシュさせてしまう可能性がありますその結果この戦略は推奨されません幸いレイアウトプロトコルではレイアウトエンジン内で作業することでこの問題解決のより良い方法を提供しますではもう一度ボタンを見てみましょうここにもやりたいことがありますまず少し読みやすくするためにボタンを独自のサブViewにリファクタリングします今私の同僚の１人がより大きな文字を使用していることを知っています私のAppはデフォルトのフォントを使用して自動的に Dynamic Typeをサポートし無料で正しい動作が得られますタイプサイズを大きくするとどうなるか見てみましょうあーボタンが合わなくなってしまいました私のカスタムスタックはボタンの幅を制限せず理想的なサイズにすることを忘れないでくださいこの場合ディスプレイの幅を超えていますではどうすればいいのでしょうか？コンテナから提案されるサイズを考慮して Viewが収まらないときにレイアウトを修正してもっと複雑なことをすることもできます今回のケースは　新しいview-that-fitsコンテナを使いほとんどの作業をやってもらうことができますこの新しいタイプは私が与えたViewのリストから使用可能なスペースに収まる最初のViewを選びます
カスタムスタックをview-that-fits構造で包み垂直スタックバージョンを追加することで SwiftUIにボタンの別の配置の必要性を把握させますもちろん組み込みVStackにカスタム水平スタックのような等幅プロパティはありませんそこでカスタムスタックの垂直版も実装してみましたすでに説明したものとよく似ていますねだたし同じ幅のアイテムを横軸でなく縦軸に配置することです
そしてもちろん動的なタイプサイズのオーバーライドを解除すると水平方向のレイアウトに戻ります最後にもう１つAppを構築する必要がありますそれは上部にある画像ですプロフィールの写真をまとめて表示するような簡単なものならできますが少し楽しんでみようかとそこでViewを円形に配置しその配置を順位に応じて回転させるカスタムレイアウトタイプをもう１つ作りましたこの構成だと金魚が１位ですそして他の２つは同点２位です犬が猫を引き離した場合少し回転させて表示できますあるいは放射状配置を回転させることでより現実的な結果を表示することもできますレイアウトプロトコルで簡単に作成できます先程と同じように　２つのメソッドが必要なだけです適切なサイズでは Viewを使用可能なスペースにいれコンテナViewが提案するサイズを返します replacing-unspecified- dimensionsメソッドで具体的なサイズに変換して見ることにしますそのメソッドはコンテナが理想的なサイズを要求すると存在し得るnil値を自動的に処理しますそしてサブViewを配置するメソッドの内部でレイアウト領域のサイズに基づいた半径で中央から各サブViewをオフセットし Viewの Viewのインデックスに依存する回転を適用します基準値としてこれは Viewを円の３分の０１２分の１に配置するものです現在のランキングを反映させるためすべてのViewに等しく影響するオフセットを適用しますしかしランキングはどこで手に入れるのでしょうかレイアウトのアクセスはサブViewのプロキシのみで Viewやデータモデルにはアクセスできませんさてレイアウトにはもう１つトリックがあります各サブViewに値を保存しその値をレイアウトプロトコルのメソッド内部から読み取ることができますどのように順位情報を伝えるか見てみましょうまずレイアウトバリューキープロトコル基準した新しい型を宣言しそれにデフォルト値を与えます明確に設定しない場合Viewの値の提供に加えデフォルトの値は関連する値の型この場合は整数を確立しますそして ViewにlayoutValue view modifier を使用し値を設定する便利なメソッドを作成しますこれで View階層でレイアウト内のViewに便利なランクモディファイアを適用することができますここで各ペットのランクを計算し放射状配置にそのペットに対応するアバターViewに追加します最後にサブViewを配置するメソッドに戻りますレイアウト値のキーをインデックスとして使用し各サブViewから値を読み取るコードを追加できますそのランクを利用してオフセットを計算できますそのロジックは割愛しますが基本的にあらゆるランキングのセットに対して適切な角度を作り出しますまあ１つを除いては３つ揃ったらどうなるのでしょう？レイアウトを回転させ一列に Viewを並べる方法はないので別のレイアウトロジックで代用するしかありませんしかしこれを実現するレイアウトタイプはすでに存在します組み込みのHStackです私が望むのは３者同点となった時に HStackに移行することですそのための新しいツールがあることもわかりましたあるレイアウトタイプの使用は１つのView階層に異なるレイアウトを適用することができますレイアウトの種類を変更は Viewの同一性を維持しますここでは前に見た放射状配置がありますがこれを三者同点に依存する新しいレイアウトタイプに置き換えるだけです ThreeWayTieプロパティは状態から発生したもので変更されるとSwiftUIはそれに気づきこのViewを再描画する必要があることを認識します View階層の構造的な同一性は常に同じままなので SwiftUIはこれを新しいViewとしてでなく変更されたViewと見なしますその結果１行加えるだけでレイアウトの切り替えがスムーズに行えます実際に animation view モディファイアを追加すると放射状配置の異なる状態のアニメーションも得られます放射状配置の構成が同じデータに依存するからですそしてこれがすべての動作の様子ですボタンをタップして投票数を変更するとアバターがスムーズに動き現在の順位が反映されています
これらは AppのViewレイアウトを構成する SwiftUIの新しいツールの一部です Gridタイプを利用するとカスタマイズ性の高い静的情報の二次元レイアウトを構築することができますレイアウトプロトコルの使用で汎用的で再利用可能または特殊な例に特化したレイアウトを定義できます利用可能なスペースに最もフィットするようにSwiftUIに選ばせたい場合ViewThatFitsを使用できます AnyLayoutはレイアウト間をシームレスに移行できますありがとうございました新しいレイアウトツール

struct Leaderboard: View {
    var body: some View {
        Grid {
            GridRow {
                Text("Cat")
                ProgressView(value: 0.5)
                Text("25")
            }
            GridRow {
                Text("Goldfish")
                ProgressView(value: 0.2)
                Text("9")
            }
            GridRow {
                Text("Dog")
                ProgressView(value: 0.3)
                Text("16")
            }
        }
    }
}

5:16 - Data model

struct Pet: Identifiable, Equatable {
    let type: String
    var votes: Int = 0
    var id: String { type }

    static var exampleData: [Pet] = [
        Pet(type: "Cat", votes: 25),
        Pet(type: "Goldfish", votes: 9),
        Pet(type: "Dog", votes: 16)
    ]
}

5:41 - Final Leaderboard

struct Leaderboard: View {
    var pets: [Pet]
    var totalVotes: Int

    var body: some View {
        Grid(alignment: .leading) {
            ForEach(pets) { pet in
                GridRow {
                    Text(pet.type)
                    ProgressView(
                        value: Double(pet.votes),
                        total: Double(totalVotes))
                    Text("\(pet.votes)")
                        .gridColumnAlignment(.trailing)
                }

                Divider()
            }
        }
        .padding()
    }
}

10:53 - Layout protocol stubs for required methods

struct MyEqualWidthHStack: Layout {
    func sizeThatFits(
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout Void
    ) -> CGSize {
        // Return a size.
    }

    func placeSubviews(
        in bounds: CGRect,
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout Void
    ) {
        // Place child views.
    }
}

13:44 - Maximum size helper method

private func maxSize(subviews: Subviews) -> CGSize {
    let subviewSizes = subviews.map { $0.sizeThatFits(.unspecified) }
    let maxSize: CGSize = subviewSizes.reduce(.zero) { currentMax, subviewSize in
        CGSize(
            width: max(currentMax.width, subviewSize.width),
            height: max(currentMax.height, subviewSize.height))
    }

    return maxSize
}

15:40 - Spacing helper method

private func spacing(subviews: Subviews) -> [CGFloat] {
    subviews.indices.map { index in
        guard index < subviews.count - 1 else { return 0 }
        return subviews[index].spacing.distance(
            to: subviews[index + 1].spacing,
            along: .horizontal)
    }
}

16:33 - Size that fits implementation

func sizeThatFits(
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout Void
) -> CGSize {
    // Return a size.
    guard !subviews.isEmpty else { return .zero }

    let maxSize = maxSize(subviews: subviews)
    let spacing = spacing(subviews: subviews)
    let totalSpacing = spacing.reduce(0) { $0 + $1 }

    return CGSize(
        width: maxSize.width * CGFloat(subviews.count) + totalSpacing,
        height: maxSize.height)
}

16:51 - Place subviews implementation

func placeSubviews(
    in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout Void
) {
    // Place child views.
    guard !subviews.isEmpty else { return }
  
    let maxSize = maxSize(subviews: subviews)
    let spacing = spacing(subviews: subviews)

    let placementProposal = ProposedViewSize(width: maxSize.width, height: maxSize.height)
    var x = bounds.minX + maxSize.width / 2
  
    for index in subviews.indices {
        subviews[index].place(
            at: CGPoint(x: x, y: bounds.midY),
            anchor: .center,
            proposal: placementProposal)
        x += maxSize.width + spacing[index]
    }
}

18:07 - Custom layout instantiation

MyEqualWidthHStack {
    ForEach($pets) { $pet in
        Button {
            pet.votes += 1
        } label: {
            Text(pet.type)
                .frame(maxWidth: .infinity)
        }
        .buttonStyle(.bordered)
    }
}

20:12 - Buttons helper view

struct Buttons: View {
    @Binding var pets: [Pet]

    var body: some View {
        ForEach($pets) { $pet in
            Button {
                pet.votes += 1
            } label: {
                Text(pet.type)
                    .frame(maxWidth: .infinity)
            }
            .buttonStyle(.bordered)
        }
    }
}

21:08 - Final voting buttons view

struct StackedButtons: View {
    @Binding var pets: [Pet]

    var body: some View {
        ViewThatFits {
            MyEqualWidthHStack {
                Buttons(pets: $pets)
            }
            MyEqualWidthVStack {
                Buttons(pets: $pets)
            }
        }
    }
}

22:30 - Radial size that fits

func sizeThatFits(
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout Void
)  -> CGSize {
    // Take whatever space is offered.
    return proposal.replacingUnspecifiedDimensions()
}

22:52 - Radial place subviews without offsets

func placeSubviews(
    in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout Void
) {
    let radius = min(bounds.size.width, bounds.size.height) / 3.0
    let angle = Angle.degrees(360.0 / Double(subviews.count)).radians
    let offset = 0 // This depends on rank...

    for (index, subview) in subviews.enumerated() {
        var point = CGPoint(x: 0, y: -radius)
            .applying(CGAffineTransform(
                rotationAngle: angle * Double(index) + offset))

        point.x += bounds.midX
        point.y += bounds.midY

        subview.place(at: point, anchor: .center, proposal: .unspecified)
    }
}

23:42 - Rank value

private struct Rank: LayoutValueKey {
    static let defaultValue: Int = 1
}

extension View {
    func rank(_ value: Int) -> some View {
        layoutValue(key: Rank.self, value: value)
    }
}

24:21 - Radial place subviews with offsets

func placeSubviews(
    in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout Void
) {
    let radius = min(bounds.size.width, bounds.size.height) / 3.0
    let angle = Angle.degrees(360.0 / Double(subviews.count)).radians

    let ranks = subviews.map { subview in
        subview[Rank.self]
    }
    let offset = getOffset(ranks)

    for (index, subview) in subviews.enumerated() {
        var point = CGPoint(x: 0, y: -radius)
            .applying(CGAffineTransform(
                rotationAngle: angle * Double(index) + offset))
        point.x += bounds.midX
        point.y += bounds.midY
        subview.place(at: point, anchor: .center, proposal: .unspecified)
    }
}

25:18 - Final profile view

struct Profile: View {
    var pets: [Pet]
    var isThreeWayTie: Bool

    var body: some View {
        let layout = isThreeWayTie ? AnyLayout(HStackLayout()) : AnyLayout(MyRadialLayout())

        Podium() // Creates the background that shows ranks.
            .overlay(alignment: .top) {
                layout {
                    ForEach(pets) { pet in
                        Avatar(pet: pet)
                            .rank(rank(pet))
                    }
                }
                .animation(.default, value: pets)
            }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

WWDC22

WWDC20

WWDC19