web-dev-qa-db-ja.com

AutoLayout：サイズ変更可能なスーパービューの2つのUIViewを垂直方向に中央揃え

スーパービューに2つのUIButtonがあり、高さのサイズを変更できます。 2つのボタンの間には一定の垂直方向の間隔が必要ですが、サイズ変更時に2つのボタンがスーパービューの中央に留まるように、上下の間隔のサイズを変更する必要があります。

以下に示すように、各ボタンのスーパービューまでの間隔と、ボタン間の一定の垂直方向の間隔に、2つ以下の制約（優先度が等しい）を作成してみました。 enter image description here

（ここでそれが等しくない理由は、このビューが4 "画面の場合はIBで指定された高さで定義されているが、3.5"画面の場合は縮小できるためです。）ただし、これではうまくいきません。アプリの実行中のスクリーンショットからわかるように： enter image description here

両方とも「以下」に設定されている場合でも、2つの制約自体が等しい値である必要があることをAutoLayoutに伝えたい場合とほぼ同じです。私がやろうとしていることをする方法はありますか、それとももっと良い方法はありますか？

iphoneiosautolayout
18
Jamie Forrest

これはIBで行うのはとても簡単です。

1）⌃button1から上にドラッグします。 「コンテナ内で水平方向に中央揃え」を選択します。

2）⌃button1から左にドラッグします。 「コンテナの垂直方向の中央」を選択します。

3）button2でも同じようにします。

4）残りの作業は、ボタンのサイズを変更することだけです。これは、このように見えるためです。

enter image description here

これも非常に簡単です。

5）⌃button1から左にドラッグします。 「先行スペースからコンテナマージン」を選択します。

6）⌃button1から右にドラッグします。 「トレーリングスペースからコンテナマージン」を選択します。

7）button2でまったく同じことを行います。

完成品は次のようになります（NB私はそれらを完全に中央に配置しませんでしたが、簡単に十分にできました）：

enter image description here

enter image description here

14
smileBot

垂直方向の中央に配置する最も簡単な方法は、NSLayoutAttributeCenterY制約を追加することです。できれば、ビューの中央に近い要素に追加します。また、すべてのビューに垂直方向の間隔の制約がある場合、それらはすべて中央に配置されます。ビュー階層をいじったり、スペーサービューを追加したりする必要はありません。

[self.view addConstraint:
    [NSLayoutConstraint constraintWithItem:button2 
                                 attribute:NSLayoutAttributeCenterY
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeCenterY 
                                multiplier:1.0 
                                  constant:0]];

位置を調整する必要がある場合は、定数を設定してください。例：constant:-30は30ポイント上に移動します。

ビューのさまざまな論理領域に基づいて要素を固定することもできます。たとえば、最初のボタンをビューの高さの25％に固定する場合は、乗数を0.5に設定できます。

7
Jason Moore

Rdelmarに同意しました。ビュー階層を保持する場合の別のオプションがあります。

現在、制約を使用して上部と下部のボタンの間隔を空けています。代わりに、2つの空のUIViewsを作成します。これらは、スペーサーとして使用されます。ボタンの上部と下部に1つずつ配置する必要があります。自動レイアウト制約を使用して、これら2つのスペーサービューの高さが常に等しいことを確認してください。ボタンの上部と下部、およびスーパービューの上部と下部にそれぞれ固定されていることを確認してください。

VFLの場合：V:|-[spacer1(==spacer2)]-[button1]-(20)-[button2]-[spacer2(==spacer1)]-|。

コードでこれを行う必要があるかもしれませんが、IBがこれを実行できるかどうかはわかりません。

4
Maarten

これを実現する1つの方法は、2つのボタンを別のUIViewで囲み、そのビューをコントローラーのビューの中央に配置することです。ボタンに、このビューの上部と下部までの固定距離、およびボタン間の固定距離、またはビューの固定高さを指定します。

2
rdelmar