29
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AutolayoutのAspect Ratio固定でリサイズしたUIViewの子Viewを比率を合わせてリサイズする

Last updated at Posted at 2014-06-21

Storyboardを使って、比率を維持しながらsubviewもリサイズするのに苦労したのでまとめ。

要件

4インチでは全画面で表示しているUIViewを、3.5インチの端末で起動した時に縦横比率を保ったまま、横に余白を開ける。
子Viewは、親Viewが縮小された比率に合わせて大きさ、場所を調整したい。

親Viewを3.5インチで縦横比率を保ってセンタリング

まずStoryboardで、UIViewControllerの中に親ViewとなるUIView(水色)を載せ、子ViewとなるUILabel(黄緑)を100x100のサイズで載せました。

普通に3.5インチ端末で起動すると、下が切れます。

スクリーンショット 2014-06-22 0.50.39.png

左右に余白を開けて、縦横の比率(320x568)を固定したまま縮小するため、AutolayoutのPinで、上下を端に固定、Aspect RatioにチェックをしてAdd 3 Constraintsします。

写真 2014-06-22 1 04 27.jpg

これだけだと左上を中心になってしまうので、AutolayoutのAlignで、センタリング指定します。Horizontal Center in ContainerにチェックをしてAdd 1 Constraintします。

写真 2014-06-22 1 07 36.jpg

この状態で起動すると、親View(水色)は希望通りの大きさで3.5インチ画面内に比率を保って表示されます。

スクリーンショット 2014-06-22 0.53.51.png

子ViewのAutolayout指定

子View(黄緑)は左上からの座標のままなのでまだずれています。これを、親Viewが縮小した比率を保ってセンタリングしていきます。

まず、AutolayoutのPinで上下左右を親Viewに対して固定します。

写真 2014-06-22 1 15 02.jpg

この状態で起動すると、親Viewの四辺からの絶対値指定なので、親Viewが小さくなった分、子Viewも小さくなってしまいます…

スクリーンショット 2014-06-22 1.13.24.png

これを調整していきます。

まず、上のConstraintの線を選択し、Attributes Inspectorから
Top位置を親ViewのBottom(=Height)との比率110:568(=4インチで表示されるのと同じ比率)となるよう指定します。

Before:
スクリーンショット 2014-06-22 1.18.56.png

After:
2014-06-22 01.21.45.png

同じ要領で、左右と下も、Bottom(=Height)、Trailing(=Width)と考えて、親Viewの高さや幅 x 4インチでの表示位置の比率 でConstraintを設定していきます。

Before:
スクリーンショット 2014-06-22 1.27.27.png

コツは、Reverse First and Second Itemで子Viewを基準にすること。
スクリーンショット 2014-06-22 1.27.47.png

After:
スクリーンショット 2014-06-22 1.28.27.png

左右

同じ要領なのでAfterだけ。

左:
スクリーンショット 2014-06-22 1.31.48.png

右:
スクリーンショット 2014-06-22 1.32.41.png

結果

比率を保ったまま子Viewが小さく表示できました!
4インチシミュレータの様な感じ。
(フォントサイズは別途調整してね)

スクリーンショット 2014-06-22 1.32.55.png

29
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?