web-dev-qa-db-ja.com

ビューのサイズを比例させるオートレイアウト

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

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

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

ここに私が試したものがあります：

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

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

両方のビューを、それらが満たすべきスペースに比例してサイズ変更できるようにする方法はありますか？

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

xib LayoutConstraints definitions

ありがとう！

[〜＃〜] edit [〜＃〜]

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

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)]>
iosinterface-builderios6autolayoutnslayoutconstraint
48
Simon Germain

これは、制約を固定幅、高さに設定し、SuperviewのcenterXに合わせてダミービュー（dummyView）を追加することで解決できます。ビューおよび右ビューdummyViewへの水平間隔制約。

enter image description hereenter image description here

10
Yatheesha B L

私はおそらく解決策を考え出すのに遅れていますが、これは実際に行うことができます非常に簡単に in [〜＃〜] ib [〜＃〜]。

最初に、IViewを追加し、スーパービューの4つのエッジすべてに固定します。

次に、最初のサブビューを追加し、それに応じて配置します（ig：x = 0、y = 0、高さ=固定の高さ、幅= IViewに対して相対的な幅= 4つのエッジすべてにピン留めしました）。

IViewと最初のサブビューの両方を選択し、等しい幅制約を追加します。もちろん、これは自動レイアウトでの位置決めのエラーを表示しますが、これは（まだ）望んでいるものではないので問題ありません。

トリックが登場：Equal Widths制約を選択し、Multiplier必要な比率（たとえば、最初のサブビューをUIViewの1/4にしたい場合は1：4）。 2番目のサブビューとTadaaaaaaに対して手順を繰り返します。

enter image description here

75
Benjamin

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

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

enter image description here

これらは、2番目（右）のビューにあった制約です。

enter image description here

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

enter image description here

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];
10
Ian L

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

enter image description here

9
Rémy Virin

他の人が述べたように、キーは「ピン幅を均等に」制約に乗数を設定して、ビューの幅が互いに倍数になるようにします。 XCode 5.1では、Interface Builderでこれを設定する機能が追加されるはずですが、それまでは、コードで設定する以外に別のオプションがあります。 「Pin Widths Equally」制約を作成した場合は、右側のユーティリティパネルのIdentity Inspectorに移動し、「User Defined Runtime Attributes」を探します。キーパスが「multiplier」、タイプが「number」、値が目的の比率に等しい新しい属性を追加します。

Multiplier set as a runtime attribute, as described above.

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

6
JiBB
  1. コードの2つの幅の制約を削除するか、IBの優先順位を下げます。そうしないと、制約が厳しくなります。

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

    // 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];
1
an0

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

1
Beninho85

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

1
Eugene Braginets

自動レイアウトにあなたがどれだけ慣れているのかはわかりません。

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

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

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

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

0
lxt