Tips:画面サイズ80%の大きさで画像を置く

Auto Layoutを使って画面サイズより80%の大きさで画像を置くやり方を見ていきたいと思います。

スプラッシュ画面などで、アプリアイコンを表示するときに使えるTipsだと思います。

今回の作るレイアウト

今回作るレイアウトを一度まとめます。

  • Image Viewを親ビューに対して垂直方向、水平方向ともに中心に置く
    • X座標とY座標が決まります。
  • Image Viewの幅を親ビューの幅の80%の大きさにする
    • 幅(Width)が決まります。
  • Image Viewのアスペクト比を幅高さ1:1にする
    • 高さ(Height)が決まります。

つくってみよう!

ではさっそく作ってみましょう。
新しくプロジェクトを作成して、Main.storyboardを開きます。 Object LibraryからImage Viewを選んでView Controllerに置きます。

Image Viewを置く

Image Viewを親ビューに対して垂直方向、水平方向ともに中心に置く

置いたImage Viewを選択して、Ctrl + ドラッグをしながら上に移動させて、親ビューと接続します。

親ビューと接続

出てきたポップアップから「Center Horizontally in Container」を選択します。

Center Horizontally in Container

これで、Image Viewと親ビューとの水平方向の中心がそろいました。

同じく垂直方向の中心線もそろえていきたいと思います。
Image Viewをもう一度選択して、 Ctrl + ドラッグをしながら今度は横に移動させて、親ビューと接続します。

親ビューと接続

出てきたポップアップから「Center Vertically in Container」を選択します。

Center Vertically in Container

Image Viewの幅を親ビューの幅の80%の大きさにする

もう一度Image Viewを選択して、Ctrl + ドラッグをしながら親ビューと接続させます。

親ビューと接続

出てきたポップアップから「Equal Widths」を選択します。

Equal Widths

今設定した制約(Image View.width = width)を選択して、「Attributes inspector」を表示します。
「Multiplier」の値を1から0.8に変更します。

0.8へ

Image Viewのアスペクト比を幅高さ1:1にする

Image Viewのアスペクト比を決定しましょう。
Image Viewを選択して、Image ViewのでCtrl + ドラッグをします。

アスペクト比

出てきたポップの「Aspect Ratio」を選択します。

Aspect Ratio

今設定した制約を選択します。(「aspect = 120:109」 など、現状のImage Viewのアスペクト比が設定されているかと思います。)
「Attributes inspector」を表示して、「Multiplier」の値を1:1変更します。

アスペクト比の修正

最後に

Auto Layoutのワーニングが出ていると思うのでそれを解決します。

Auto Layout Issues画面を表示して、「Update frames」を選択します。

AutoLayoutのワーニング修正

Image Viewを選択して、Attributes inspectorから画像を設定します。

画像の設定

ここまできたら、ビルドしてみましょう。 今回はiPhone6sのシミュレーターでビルドしてみました

縦がこんな感じになります。

横がこうです。

 まとめ

いかがでしたでしょうか? アプリアイコンを全画面を表示するTipsを紹介しました。 ぜひみなさんも使ってみてください。

今回のソースコードをGithubに置きました。
参考にしてください。

ソースコード

画像はこちらからお借りしました。
http://flat-icon-design.com/?p=366