web-dev-qa-db-ja.com

自動レイアウトのボタンの幅と間隔が等しい

Autolayout制約を使用して、ビュー内のいくつかの同様のサイズのボタンのサイズを自動的に変更して、次の効果を得ようとしています。

サイズ変更前

Before stretching

サイズ変更後の望ましい効果

After stretching

ご存じのように、ボタンのサイズは同じにし、各ボタンの間隔も一定の20ポイントにする必要があります。最初はかなりシンプルに見えるので、次の制約を設定します。

  • ボタン:左隣からのスペース= 20(左端および右端のボタンを含む)
  • ボタン:右隣からのスペース= 20(左端および右端のボタンを含む)
  • ボタン:同じ幅

サイズ変更後に実際に何が起こるか

enter image description here

プレビュー中、またはiPhone /シミュレーターでアプリをテスト実行すると、ボタンのサイズが変更され、ボタンに設定した同じ幅制約にも従いません。実際、ビューを含むビューも、新しいボタンのサイズに合わせてサイズ変更されます。インターフェースビルダーでこの問題を純粋に修正する方法を誰もが知っていますか?

22
Jian Jie

設定:
-等しい幅すべてのボタンの
-水平間隔すべてのボタンの間
-leading最初のボタンのスーパービューに、trailing最後のボタンのスーパービュー
仕事をする必要があります。スーパービューに問題がない場合(例:ScrollViewの制約がない)

15
dobranoc

インターフェイスビルダーでは、上記のようにボタン間の間隔の制約を設定します。次に、それらすべてをコマンド選択して、選択したオブジェクトに適用する「等しい幅」制約を指定できます。

7
B H

最後に、この問題を解決する方法を忘れてしまいました。私はそれが魅力のように機能することをテストしました。

  1. 20単位のマージンでスペースアイテムに制約を追加する
  2. 年齢に制約を加える
  3. トリッキーな部分
    • 各アイテムに対して、parentに等しい幅の制約を追加します
    • この新しい制約をすべて選択し、そのプロパティを変更します
    • 乗数を値1:5に設定します
    • 定数を-24に設定します(アイテムと親Edgeの間の6つの分離は120を与え、これに乗数値1:5を掛けると24を与えます)
    • アイテムフレームの更新

それでおしまい!以下の画像は、インターフェイスビルダーでの動作を示しています。

interface builder result

シミュレーションサイズを「フリーフォーム」に設定し、さまざまな幅をテストします(これを330に設定しました)。

4
Marek R

この問題は、間違ったcontent hugging priorityおよびcontent compression Resistance priority。したがって、それらを低コンテンツハグおよび高圧縮抵抗として設定する必要があります(すべて同じ値にする必要があります)。

コンテンツのハグは、成長とコンテンツの圧縮に対する見方に抵抗する特性であるため、抵抗の優先順位は、縮小に対する見方に抵抗することです。これらの詳細については、この 質問 を参照してください。

3
iHulk