web-dev-qa-db-ja.com

画面サイズごとに異なる自動レイアウト制約を設定する方法

静的セルを含むtableViewがあります。セルには、それを完全に埋めるImageViewが含まれます。そして、もう1つ小さなImageViewsがあります。このImageViewsを制約付きで配置します。制約のサイズ変更について質問があります。 if/elseループをプログラミングせずに、デバイスサイズごとに異なる制約定数を設定するにはどうすればよいですか。ストーリーボードに設定する方法はありますか?たとえば、10の定数値を使用した親レイアウトへの主要な制約があります。これはiPhone 5画面では問題ありませんが、iPhone 6/6/6画面では10を超える必要があります。

iPhone5の自動レイアウト

Screen Shot

iPhone6自動レイアウト

Screen shot

20
Vitya Shurapov

コードを1行も書かずに!

私のジュニア開発者が私に同じ質問をすると、当時の制約のためにどのようにiPhoneSEとiPhone6を区別することができるかという質問がありました

if device == iPhoneSE { 
   constant = 44 
} else if device == iPhone6 {
   constant = 52
}

この問題を克服するために、ライブラリ レイアウトヘルパー を作成したため、1行のコードを記述せずに各デバイスの制約を更新できます。

enter image description here

ステップ1

NSLayoutHelperを制約に割り当てます

enter image description here

ステップ2

必要なデバイスの制約を更新します

enter image description here

ステップ3

アプリを実行して、マジックを見る

enter image description here

9
dreamBegin

非常に簡単。 Storyboardで異なるサイズのクラスの定数値を変更できます。私はあなたにそれを理解できるようになるいくつかのステップを与えています。

このビューでわかるように、まず定数を作成します enter image description here

次に、他のサイズクラスの値を変更する定数を選択します。 enter image description here

トリッキーな部分になりました。定数を選択した後、属性インスペクターで、定数の値を確認できます。すぐ横に、「定数」の左側にPLUS(+)記号があります。 enter image description here

それをクリックして、必要なサイズクラスを選択します。ここでは、iPadのサイズに対して、通常の高さ、通常の幅を選択しました。 enter image description here

次に、新しい値を指定します。したがって、通常は値61である定数は、iPadサイズクラスのサイズクラスでレンダリングされると10として機能します。 enter image description here

出力は次のとおりです-iPhone 4- enter image description here

iPad Air- enter image description here

ご覧のとおり、同じ定数は異なるサイズのクラスに対応するランタイムで異なる値を持ちます。

私の説明がお役に立てば幸いです。

55
Saheb Roy

最後に、私の場合に有効な解決策を見つけました。

  1. 透明なビューを配置し、(背景画像上の)ポスターのフレームに合うように必要なオフセットを使用して、スーパービュー(背景画像)にAlign Center X/Yを追加しました- 透明なビューの制約 =
  2. 次に、その透明なビューのスーパービュー(背景画像)に等しい幅/高さを付け、乗数を同じ幅に変更します(手動で0.61を選択しました)
  3. その後、1枚のポスターを着陸させました。また、オフセットを使用して垂直と水平の両方を中央に配置し、この制約のセットを使用しました-Superviewに比例した幅、アスペクト比。
  4. そして最後に、2番目のポスターをこの制約で配置しました-先行スペースをPoster1に、CenterYをPoster1に位置合わせし(私の場合はオフセットを使用)、等しい幅/高さです。 ポスター1/2の制約

その結果、私は本当に適応性のある自動レイアウトを持っています

4
Vitya Shurapov