残りのスペースにビューを自動レイアウト(プログラムで) 質問する

残りのスペースにビューを自動レイアウト(プログラムで) 質問する

自動レイアウト制約を追加する方法プログラム的に残りのスペースにビューを中央に配置するにはどうすればよいでしょうか (下の例の図を参照)。

ここに画像の説明を入力してください

現時点では、下部にコンテナ ビューを追加し、コンテナ ビュー内でビューを中央に配置していますが、コンテナ ビューを使用せずに他の解決策があるかどうか疑問に思っています。

ベストアンサー1

これを行うには、スペーサー ビューを追加する必要があります。

いくつかの意見から始めましょう:

いくつかの見解

ルート ビューの上部 70% を占めるようにピンクのビューを設定します。まず、ルート ビューの 4 つの端すべてにピン留めします。

ピンクの制約

次に、下の制約を 2 つの方法で編集します。まず、最初の項目がピンクのビューであることを確認し、次に乗数を 0.7 に設定します。次に、ピンクのビューのフレームを更新します。

ピンクの制約が調整されました

次に、スペーサー ビューを追加します。実行時にスペーサー ビューを表示したくないので、非表示にします。非表示のビューもレイアウトには関与します。制約を設定する前に、青いビューの左側にスペーサーを配置します。

スペーサーを追加しました

ここで、ピンク色のビューの下部からルート ビューの下部までスペーサーを伸ばすための制約を作成します。幅は重要ではないので、スーパービューの左端に固定して細くします。

スペーサー制約

これで、ブルービューを設定する準備ができました。まず、固定サイズを指定します。

青のサイズ制約

次に、ルート ビューで水平方向に中央揃えします。

青の水平中央

3 番目に、その垂直中心をスペーサーの垂直中心に固定します。

青の縦中央

必要な制約はこれだけです。すべてのフレームを更新して確認します。

すべてのフレームを更新

アシスタント エディターのプレビューを使用してテストできます。

プレビュー

スペーサー ビューはプレビューには表示されませんが、レイアウトには引き続き含まれることに注意してください。

おすすめ記事