web-dev-qa-db-ja.com

iOS Autoレイアウトでボタンに等間隔と等幅を追加する方法

Xcodeの自動レイアウト制約は初めてです。 UITabBarと6 UIButtonsのような底面図が1つあります。制約なしに、各ボタンに5つのスペースパディングを使用してこれらのボタンを配置しました。各ボタンの幅は50です。今、私は自動レイアウトを使用してすべての画面サイズをサポートすることでそれを作ろうとしています。

ストーリーボードの制約では、6つのボタンに同じ幅を設定し、各ボタン間に60のスペースを作りました。最初のボタン0を先行スペースに設定し、最後のボタン0をテール制約に設定します。

buttons with equal width and flexible spacesすべてのデバイスサイズのビュー間。

誰も私を助けてくれますか？ヘルプを探しています。前もって感謝します。

enter image description here

iosswiftautolayoutnslayoutconstraint
25
Yuvaraj.M

この画像を確認して、以下のような制約を作成します...

enter image description here

RESULT：-さまざまなサイズでプレビュー

enter image description here

Stackview（iOS 9.0以降の場合）

enter image description here

注：iOS 9以降のアプリを作成する必要がある場合は、UIStackViewが別のオプションです

56
EI Captain v2.0

IOS 9とXcode 7では、UIStackViewと3つまたは4つの自動レイアウト制約のみで期待どおりの結果を得ることができます。

次の手順では、ストーリーボードを使用します。

  1. 6個のUIButtonsと5個のUIViewsを作成します。それらを水平に揃えます。ビューに色を付けます。

enter image description here

  1. すべてのビューとボタンを選択し、Stackボタンをクリックします。すべてのボタンと色付きのビューがUIStackViewに配置されます。

enter image description here

  1. スタックビューを選択し、Utilitiesパネルに移動して、Attributes Inspectorアイテムを選択します。そこで、Distributionボタンをクリックして、[Fill Equally]を選択します。

enter image description here

  1. 現時点では、スタックビューの高さはボタン固有のコンテンツサイズに依存しています。うまくいけば、手順5に進みます。ただし、必要に応じて、スタックビューに高さの制約を与えることができます。スタックビューを選択し、Pinボタンをクリックし、Heightボタンをチェックし、必要な値を追加して、Add 1 Constraintボタンをクリックします。

enter image description here

別の方法として、スタックビューの各要素の高さを幅に合わせたい場合は、スタックビューの最初のボタンを選択し、Pinボタンをクリックし、Aspect Ratioを選択してクリックしますAdd 1 Constraintボタン。

enter image description here

Document outline（左パネル）でアスペクト比の制約が正しいことを確認できます。必要に応じて、Attribute inspector（右パネル）の別の制約で変更できます。

enter image description here

  1. ここで、スタックビューに外部制約を設定します。スタックビューを選択します。 pinボタンをクリックし、Constrain to marginボタンが選択されていないことを確認し、先頭、末尾、および下の制約をゼロに設定します。下部の制約がView Controllerのビューに関連していることを確認してください。次に、Update Framesボタンを[コンテナ内のすべてのフレーム]に変更します。 Add 3 Constraintsボタンをクリックできるようになりました。

enter image description here

これで、スタックビューが設定されました。

enter image description here

さらなる発言：

色付きのビューの幅をボタンの幅と一致させる必要がない場合は、UIButtonsのみでスタックビューを構築し、Attribute inspectorのスタックビューに間隔を追加するだけです。ただし、スタックビューの背後に背景色を追加する方法を見つける必要があります。 Appleは、 UIKit Framework Reference でそれについて述べています：

UIStackViewは、UIViewの非レンダリングサブクラスです。独自のユーザーインターフェイスは提供しません。代わりに、配置されたビューの位置とサイズを管理するだけです。その結果、いくつかのプロパティ（backgroundColorなど）はスタックビューに影響しません。

4つの異なるスタックビューでXcodeプロジェクトをビルドしました。

  • 1つは色付きのビューで、埋め込みのUIButtons固有のコンテンツサイズの高さに依存しています。
  • 色付きのビューとUIButton "幅と高さが等しい"制約を持つもの、
  • 色付きのビューと独自の高さ制限のあるもの、
  • 色付きのビューはないが、スペースがあり、色付きのビュー内に埋め込まれたもの。

このプロジェクトは、この GitHub repo にあります。

9
Imanou Petit

iOS 9には、UIStackViewと呼ばれる新しいUIKitクラスがあります。あなたが望むように、ビューを水平または垂直に積み重ねるのに非常に役立ちます。このチュートリアルをご覧ください： Raywenderlich：UIStackView Tutorial

0
Anand V

すべてのボタンを選択し、Xcodeのピンメニューで

  1. 選択したビューの右側に最も近い隣の赤い線を選択して、左上のビューから右上のビューに水平方向の制約を作成します
  2. 選択したビューの左側に最も近い隣の赤い線を選択して、右上のビューから左上のビューに水平方向の制約を作成します
  3. 選択したビューの一番近い側にある赤い線を選択して、トップビューから垂直方向の制約を作成します
  4. [高さ]、[等しい幅]の近くのチェックボックスを選択し、[Add 22 Constraints "をクリックします
0
Manisha