web-dev-qa-db-ja.com

Cocoa AutoLayoutで2つのボタンを中央に配置

Cocoa Auto Layoutに問題があり、この問題を回避できません。私が達成したいのは、以下に示すように、2つのボタンを常にビューの中央に配置することです。

enter image description here

私は成功せずに多くの異なるアプローチを試しました:(ここで私を助けてください。

ios6autolayout
27
Bartek Chlebek

これを行うもう1つのトリックは、buttonの右側をsuperviewの中心から離れたスペースの半分のサイズに、button2の左側を中心から離れたスペースの半分のサイズに揃えることです。 superviewの。

ただし、これは、中央に配置する2つのビューのみを囲むスーパービューがある場合にのみ実際に機能します。

5
iain

私はこれをメモリから書いているので、うまくいけばすべての情報が正しいです。 XCode5を使用しています。これが、制約なしから始めてこれを行うことになった方法です。

  1. 両方のボタンを選択し、高さと幅を設定するために制約を追加します IBキャンバスの右下にある2番目のボタンからアクセスできる[新しい制約の追加]ウィンドウで。

  2. 両方のボタンを選択したままY位置を設定するための制約を追加。 [新しい制約の追加]ウィンドウの上のスペースまたは下のスペースのいずれかで問題ありません。

  3. 次に、ボタン1を選択し、IBキャンバスの右下にある最初のボタンからアクセスできる[新しい配置制約の追加]ウィンドウで配置制約 "コンテナ内の水平中心"を追加を選択します。デフォルトでは、追加された制約の「定数」値は0です。間違っているため、これを変更します。

  4. この時点で、ボタン1には黄色のバーが垂直に走っています。これは、ボタンの水平方向の中心がコンテナの水平方向の中心+制約の定数（0）と等しくないことを示す警告です。垂直バーの数値は、ボタンが中心からどれだけ離れているかを示します。その番号を覚えておいてください。

  5. ボタン1の黄色の縦棒をダブルクリックするか（器用さが必要）、ボタン1を選択して左側のペインに移動し、ルーラーをクリックして、「中心Xを次の位置に揃える」という制約を「選択して編集」します。

  6. 「定数」というラベルの付いたテキストボックスにステップ4の数値を入力します。ボタン1は、表示に必要なすべての制約を満たしています。幅、高さ、Y（上部スペースまたは下部スペースの制約）があり、X（水平方向の中央揃え）になりました。ただし、ボタン2には、ボタン1からピギーバックできるX位置がまだありません。

  7. ボタン2を選択、[新しい制約の追加]ウィンドウに移動し、単純に先頭のスペースをボタン1に設定（上部の白いボックスの左側のバー）。

これで、2つのボタンが作成され、常にコンテナの中央に一定の幅で配置されます。

33
jmathew

自動レイアウトの巧妙なトリックは、非表示のビューをスペーサーとして使用することです。制約システムは、通常どおりにそれらをレイアウトします。この場合、2つのボタン間のスペースが非表示になる可能性があります。この制約文字列から制約を使用できます。

@"[button][invisibleView(5)][button2(==button)]"

次に、制約設定を作成しますinvisibleView.centerX = superview.centerX。

9
Bridger Maxwell

固定幅のボタンがあり、2つの間の固定距離が必要な場合は、次の手順で作業できます。

  1. WidthとHeightconstraintをbutton1に追加します。値の例：高さ100、幅100。
  2. 両方のボタンを選択し、constraintEqual WidthsとEqual Heightsを追加します。
  3. Horizontal Spacingとbutton1の間にbutton2を追加します。または、Leading Spaceからbutton2にbutton1を追加すると言うこともできます。値の例：150
  4. button1を選択し、constraintHorizontally in Containerを-125の値で追加します。
  5. 必要に応じて、Vertical Spacing to Containerなどの他のconstrainsを追加します。

値125の例は、（button1width/2）+（Horizontal Spacing/2）に等しく、100/2 + 150/2 = 125です。

したがって、Horizontal in Containerを-125に追加すると、buttonsが左に移動し、このレイアウトが画面の中央に配置されます。

以下に添付されているレイアウトと制約の画像の例： Example Layout

Constraints on button1

4
Dashrath

以下の方法でも達成できます。

1.左ボタンの先頭スペース、右ボタンの末尾スペースを取ります。
2。先行制約と後続制約の両方のアウトレットを構築します。

 __weak IBOutlet NSLayoutConstraint *leadingConstraint;
 __weak IBOutlet NSLayoutConstraint *trailingConstraint;

3.以下の式のように定数を計算します。

NSInteger constant = (SCREEN_WIDTH - (CGRectGetWidth(leftButton.frame) + CGRectGetWidth(rightButton.frame))) / 3;
    leadingConstraint.constant = constant;
    trailingConstraint.constant = constant;

それがあなたを助けることを願っています。

1
Vishnuvardhan

基本的に、UIButtonsの内側に2つのUITableViewCellがあり、常に中央に配置され、同じ幅である必要があります。これが私がXcode7.2でそれを機能させた方法です。ちなみに、私はSwiftを使用していますが、それが何らかの形で関連している場合は。

  1. 左のボタンで、先頭と下部の制約を指定しました
  2. 右のボタンで、トレーリングと下部の制約を指定しました
  3. 右のボタンで、私はそれに左のボタンへの先頭のスペースを与えました
  4. 最後に、右のボタンで左のボタンと同じ幅の制約を指定しました。
  5. 完了。
1
jaytrixz