Help us understand the problem. What is going on with this article?

Autolayoutを使って、UIViewをAspectFitで配置する

More than 3 years have passed since last update.

特定の UIView のアスペクト比を維持したまま、所定の範囲内に収める方法です。
UIImageView の Aspect fit を UIView でやる感じ。

とりあえず適当に UIView を配置

UIView を2つ配置します。
黒い UIView が親、オレンジ色の UIView が子になります。
子のアスペクト比を維持したまま、親の中に収まるようにリサイズされることになります。

親の Autolayout を設定

今回は適当に、上下左右に16ポイントのスペースを開けて、画面いっぱいになるように設定します。

設定後、シミュレーターで実行してみた結果です。
上下左右に16ポイント分のスペースが開いて、画面いっぱいにリサイズされました。

子の Autolayout 設定

子にアスペクト比の制約をつけます。
今回はアスペクト比を16:9にします。

子に、Equal Widths と Equal Heights をつけます。
※しばらく Autolayout でエラーみたいに出ますが、気にせず進めてください。

指定した Equal Widths の制約を、less than or equal に変更します。

Equal Heights の制約も同様に、less than or equal に変更します。

もう一度、子に Equal Widths と Equal Heights つけます。

今回指定した Equal Widths の制約を、優先度750に変更します。

Equal Heights の制約も同様に、優先度750に変更します。

子を親の中央に表示するよう制約をつけます。

Autolayout の設定はこれで終了です。

シミュレーターで確認してみると、画面の回転に合わせて、アスペクト比を維持したまま、親のビューの中にピッタリ収まるように、子のビューがリサイズされます。

BearsSoft
その辺に転がってるうちの一人
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away