web-dev-qa-db-ja.com

iOS：AutoLayoutを使用してビューの中央を別のビューの下部に合わせる方法

ヘッドタイトルの中央と青いタイトルの下部のimageViewの位置合わせを維持したい。

Autolayoutを使用してどうすればよいですか？

画面4.0インチ [screen 4.7inches] 画面4.7インチ screen 4.0inches [screen 4.7inches

iosios-autolayout
13
ACMango

これを行う方法はたくさんあります。その方法の1つを紹介します。

よし、これを一歩ずつやっていきましょう。

ステップ1

まず、楕円形の画像の中心を長方形の画像の下部に揃えるために、長方形のビューをContainer View。

このコンテナビューにはff属性があります。

  • 透明な背景色
  • 幅は画面の幅と同じです
  • 高さは長方形のビューの高さの2倍になります（後で
    理由がわかります）。

コンテナービューの制約：

  • リーディングはスーパービューのリーディングと同じです
  • スーパービューの上部のスペースは0
  • スーパービューで水平方向の中央に配置されます。
  • 自己でアスペクト比を設定します。

完了すると、制約は次のようになります。

enter image description here

ステップ2

長方形の画像ビューの場合、制約は次のようになります。

  • Leadingは、コンテナビューのLeadingと同じです
  • コンテナビューの上部のスペースは0です
  • トレーリングは、コンテナビューのトレーリングと同じです。

  • 楕円形の画像ビューでアスペクト比を設定する

    • 楕円形の画像ビューでアスペクト比を設定する。この長方形のビューのサイズの変化は、楕円形のビューのサイズの変化に比例します。

次のようになります。

enter image description here

ステップ3

今回は、楕円形ビューの制約：

  • コンテナビューの水平方向の中央に配置
  • コンテナビューでも垂直方向に中央揃え

  • 自分でアスペクト比を設定する

    •アスペクト比を自分で設定すると、長方形のビューのサイズが拡大したときに、楕円形のビューのサイズを変更しても歪みが生じません。

これは結果になります：

enter image description here

ステップ4

追加すべき非常に重要なビューが1つあります。このビューは、長方形のビューが常にコンテナービューの半分のサイズになるようにし、楕円形のビューの中心が常に長方形のビューの下部に揃うようにします。そのため、追加するこのビューをダミービューと呼びます。

ダミービューにはff属性があります。

  • 透明な背景色
  • 幅と高さの値は1でなければなりません

ダミービューの制約：

  • コンテナビューの垂直方向の中央に配置
  • コンテナビューの水平方向の中央に配置
  • 幅と高さは固定です。
  • 長方形のビューで垂直間隔を割り当てる

これはどのように行われるべきかです：

enter image description here

上記の手順を実行すると、効果が得られます。

これは制約の概要になります：

enter image description here

これがお役に立てば幸いです。 :)

これが機能することの証明！

私はそれをシミュレーターで実行しました...：D

iphone 4：

enter image description here

iPhone 5：

enter image description here

iphone 6：

enter image description here

iPhone 6 Plus：

enter image description here

13
final static

ステップ1：以下に示すようにビューを作成します。

enter image description here

手順2：3つのエッジすべてに背景ビューの制約を設定します。

enter image description here

ステップ3：独自の比率を設定します。それ以来、身長が分からないとのことですが、.

enter image description here

ステップ4：中央ビューを選択し、必要に応じて幅と高さの制約を追加します。

enter image description here

手順5：以下に示すように、スーパービューでセンタービューを水平センターとして設定します。

enter image description here

ステップ6：次に、背景ビューと中央ビューの両方を選択します。整列制約を「垂直中心」に設定します。

enter image description here

ステップ7：これで、以下のような間違った定数の警告のある制約を確認できます。その制約を選択します

enter image description here

ステップ8：接続インスペクタで、「2番目のアイテム」を選択し、「下」に変更します

enter image description here

ステップ9：以上です。警告がある場合は、制約を更新します。任意の画面サイズでさまざまなシミュレータをチェックインできます。

enter image description here

これを達成するために、スーパービューや新しい兄弟は必要ありません。ビューを中央に配置し、別のビューの下部/上部として保持する簡単な方法。

19
Dinesh Raja

これはあなたを助けるかもしれません。完全にAutoLayoutに基づいており、追加のビューは必要ありません。

  • まず、高さと幅、およびカバー画像の位置にいくつかの制約を設定します。 （青いもの）

全高の0.4で、幅と同じ幅です。その制約を確認できます。

step1

  • 次に、アバター（緑）の画像の高さと幅を修正し、横方向の中央に配置します。

次に、カバー画像とアバター画像の両方を選択し、それらを下辺に揃えます。

step3

今これを回します。

step4

  • 最後のステップとして、「下をカバー画像に合わせる」を選択し、定数をアバター画像の高さの半分にします。できた！

step5

これは私が今見つけた最も簡単な方法です。

7
XueYu

ビューではなく、画像に対して自動レイアウト制約を適用する必要があります。詳細を取得するには https://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints

1
Dhruv Khatri

2つのビュー（固定ビューと浮動ビュー）があり、フロートの高さが固定されている場合は、-height/2値を使用して、フロートから固定までの垂直方向のスペースを設定できます。例：ボタンの高さが20の場合、垂直スペースを値-10で固定ビューに設定します

enter image description here

0
Mahdi Moqadasi

最初に背景画像を配置し、最初にWHILE HODLING SHIFTを手動でドラッグして、適切なサイズになるまで| o |をタップします。画面右下のアイコンを見て、マージンオプションのチェックを外し、左0、上0、右0を実行します。次に、下がより大きい数になります（自動生成されます）

次に、2番目のUIImageを配置します...配置してサイズを好きなように変更してください...同じアイコンに| o |それをタップして高さと幅を与えます...制約を追加します... 2番目に移動して左側に最後に移動します（2つの積み重ねられた長方形のように）。それをタップして、「コンテナ内で水平に...小さい画像でコントロールを押したまま、大きい画像にドラッグして離します...縦の間隔をタップします...

最後に... || o |のように見える右端のアイコン三角形があります...画像の1つが選択されている間...下部の「フレームを更新」をタップします

0
RubberDucky4444