ios - ビューサイズを比例的に保つAutoLayout

Question

私は次のことを達成しようとしています：

xibに2つのビューがあり、エッジ（側面と上面の両方）から20ピクセル離れている必要があります
サイズを変更する必要がある2つのビューは同じサイズではありません
それらは20ピクセル離れている必要があります
それらの幅は、親ビューの幅に対して一定である必要があります

Widths equally私はそれを行うことについてのチュートリアルを読みました、そしてそれはうまくいきます、しかしそれに関する問題はそれが私が望まない同じ幅とピンを持つ両方のビューを必要とするということです。

これが私が試したことです：

左側のビューに先頭のスペース制約を追加して20ピクセルにします
左側のビューに上部スペースの制約を追加して20ピクセルにします
右側のビューに上部スペースの制約を追加して20ピクセルにします
右側のビューにテーリングスペースの制約を追加して、20ピクセルにします
両方のビューに水平方向の間隔の制約を追加して20ピクセルにします

私が遭遇している問題は、左側のビューのサイズが変更されず、右側のビューがスペースを埋めて20ピクセルの水平方向のスペースを維持することです。

両方のビューを、埋める必要のあるスペースに比例してサイズ変更する方法はありますか？

これが私のレイアウトと制約のスクリーンショットです：

xibレイアウト制約の定義

ありがとう！

編集

デバイスを回転させようとすると、次の警告が表示されます。

2012-10-11 08:59:00.435 AutolayoutTest[35672:c07] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want.
    Try this: (1) look at each constraint and try to figure out which you don't expect;
    (2) find the code that added the unwanted constraint or constraints and fix it. (Note:  
    If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>",
    "<NSLayoutConstraint:0x8a68ad0 H:[UIView:0x8a69430(90)]>",
    "<NSLayoutConstraint:0x8a6ba40 H:[UIView:0x8a69430]-(20)-[UIView:0x8a6b1d0]>",
    "<NSLayoutConstraint:0x8a6ba00 H:[UIView:0x8a6b1d0]-(20)-|   (Names: '|':UIView:0x8a6b7e0 )>",
    "<NSLayoutConstraint:0x8a6b940 H:|-(20)-[UIView:0x8a69430]   (Names: '|':UIView:0x8a6b7e0 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x7199aa0 h=--& v=--& V:[UIView:0x8a6b7e0(568)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>

score 76 · Accepted Answer

私はおそらく解決策を思いつくのに遅れていますが、これは実際にはIBで非常に簡単に行うことができます。

まず、UIViewを追加し、スーパービューの4つのエッジすべてにピン留めします。

次に、最初のサブビューを追加し、それに応じて配置します（ig：x = 0、y = 0、height =固定の高さ、width = 4つのエッジすべてに固定したUIViewを基準にした幅）。

UIViewと最初のサブビューの両方を選択し、EqualWidths制約を追加します。もちろん、これは自動レイアウトでのポジショニングのエラーを示しますが、これは（まだ）あなたが望むものではないので問題ありません。

次に、トリックがあります。EqualWidths制約を選択し、乗数を必要な比率に編集します（たとえば、最初のサブビューをUIViewの1/4にする場合は1：4）。2番目のサブビューとTadaaaaaに対して手順を繰り返します。

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

score 10 · Accepted Answer

自動レイアウトは初めてですが、あなたの質問に出くわし、それは良い挑戦になると思いました。（これが理想的な解決策ではない場合の私の警告です！）

コードに幅の制約を追加する必要があります。これは、最初に幅の制約なしにNIBに2つのビューを追加することで実現しました。これらは、最初の（左側の）ビューの制約です。

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

これらは、2番目の（右）ビューに対して私が持っていた制約です。

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

これにより、2番目のビューに不要な追加の制約が残ります。以下に示すように、スーパービューと2番目のビューの間にスペースが表示されます。

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

IBでその制約を削除すると、レイアウトがあいまいになります（サブビューに幅がないため）。ただし、コードで削除できます。まず、コンセントを設定し、IBに接続します。

@property (nonatomic, strong) IBOutlet NSLayoutConstraint *view2superviewLeadingConstraint;

次に、View ControllerでviewDidLoad、次を使用して削除できます。

[self.view removeConstraint:self.view2superviewLeadingConstraint];

最後に、幅の制約を追加します。ここで重要なのは、スーパービューの幅に基づいて幅を何パーセントにするかを指定する乗数パラメーターです。また、定数パラメーターをIBで設定された先頭/末尾の合計と等しくなるように設定する必要があることにも注意してください。

NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.3 constant:-20];
[self.view addConstraint:constraint1];

NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.7 constant:-40];
[self.view addConstraint:constraint2];

score 10 · Accepted Answer

これは、制約が固定幅、高さに設定され、SuperviewのcenterXに位置合わせされたダミービュー（ dummyView ）をもう1つ追加することで解決できます。次に、左側のビューと右側のビューの水平方向の間隔の制約をdummyViewに追加します。

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

score 9 · Accepted Answer

9

アスペクト比を選択するだけです：

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

于 2014-10-23T13:38:56.323 に答える

score 6 · Accepted Answer

他の人が述べているように、重要なのは、「ピン幅を等しく」制約に乗数を設定して、ビューの幅が互いに倍数になるようにすることです。XCode 5.1は、Interface Builderでこれを設定する機能を追加する必要がありますが、それまでは、コードで設定する以外に別のオプションがあります。「PinWidthsEqually」制約を作成する場合は、右側のユーティリティパネルのIdentity Inspectorに移動し、「UserDefinedRuntimeAttributes」を探します。キーパス「multiplier」を使用して新しい属性を追加し、「number」と入力して、値を目的の比率に等しくします。

上記のように、実行時属性として設定された乗数。

これはInterfaceBuilderには反映されませんが、ビューを使用するときに適用されます。

score 1 · Accepted Answer

コード内の2つの幅の制約を削除するか、IBでの優先順位を下げてください。そうしないと、過度に制約されます。

コードで、緑のビューと青のビューの間の幅の比率を記述するための制約を追加します。

// Assuming the ratio you want is green_view_width : blue_view_width = 1 : 2
NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5f constant:0.f];
[commonSuperview addConstraint:c];

score 1 · Accepted Answer

Interface Builderで、右ボタンでビューをドラッグします（黒いポップアップを表示するには少しだけ）。
ポップアップメニューでを選択しますAspect Ratio。

score 1 · Accepted Answer

1

アスペクト比プロパティを使用してXCode6で使用できるようになりました

于 2014-10-15T15:52:16.660 に答える

score 0 · Accepted Answer

自動レイアウトにどれだけ慣れているかわからないので、これがすでに知っていることである場合はお詫びします。

自動レイアウトを使用する場合、同じプロパティに複数の制約を割り当てることができます。特定の状況下では、これらの制約は互いに矛盾する可能性があります。これが、表示されている警告の原因です。

投稿したスクリーングラブから、いくつかの制約を明示的に設定したように見えます。たとえば、左側の緑色のビューには、「幅（90）」という制約があります。これは、幅が90に等しくなければならないことを意味します。正確にポイントします。

スクリーンショットだけでは他の制約が何にマップされているかは不明ですが、おそらくここで起こっているのは、これらの明示的な制約が問題を引き起こしていることです-ビューが利用可能な領域に合うように拡大または縮小する必要があるという自動サイズ変更制約がありますが、それらの同じビューには正確な幅である必要がある制約。

これはさまざまな方法で修正できます。ビューの明示的な幅の制約を削除するか、優先度を変更できます（デフォルトでは制約は「必須」ですが、オプションに変更できます）。

ios - ビューサイズを比例的に保つAutoLayout

9 に答える 9

Related

Reference