xcodeのAutoLayoutに関してアドバイスをください

Question

現在xcodeでAutoLayouを用いたUIを製作しています

コンテニュー画面で、イメージとしては下記画像のようなシンプルなUIの実装です

画像をViewの中心に設置して左右上下に制約をつけているのですが

シミュレーターによるデバックの際、一部の端末のみレイアウトが崩れてしまいます

AutoLayouの方法は単純でPinを用いて左右上下のオブジェクトに対して制約をつけるというものです

具体的には、iPad Retinaでシミュレートした際、中心に設置した画像が萎縮？して歪んでしまうというものです

そのほかの端末では問題なく、どうすれば良いのか分かりません

何かアドバイスいただけたら幸です

言葉足らずで申し訳ありません。歪むというのは言葉の選び方が悪かったと思います

チュートリアルの画面にて、下記画像のように三つのチュートリアル画面を繊維させるのですが、

それぞれの画像の大きさ、配置、がシンメトリー（左右対称）にならないのです。

上記の2枚目〜3枚目にかけて同じ大きさ、同じ配置の画像が三つ配置されていますよね

私がこれをやろうとすると、ストーリーボード上、もしくはiphone7, iphone6等の端末でデバックを行うと、まあまあ綺麗なレイアウトになります

でも、これをiPad Retinaでやったり、iphoneSEでやったりすると、画像の位置が中心からずれたりして、変なレイアウトになってしまいます

いや、中心からずれるというよりは、コンテニュー画面に寄って微妙に中心の位置が違うという感じでしょうか・・・

aspect ratio を駆使しているので端末の大きさによって画像が縮んだり歪んだりするということはありませんが

制約が悪いのか何が悪いのか、うまくシンメトリーなUIにできません。ちなみに、この工程は全てストーリーボードのみでやっています

Comments

[fromageblanc]

画像が萎縮というのは、四方からの距離（オフセット）が遠くなるということですか？それとも解像度が荒くなるという意味でしょうか？

Answer 1

今回は関係ないかもしれませんが、Pinだけでなく、Alignmentもつけられます。
今回のような場合だと上下の制約よりも、center horizontally in containerで画面の高さの中心に配置するのもいいと思います。

Answer 2

UIImageViewのcontentModeをAspect Fitにして下さい。

【追記】

中心にしたいなら、AlignでHorizontal CentersとVertical Centersの制約を付けて下さい。

Comments

[fuzzball]

追記しました。