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を選択して、Ctrl + ドラッグをしながら上に移動させて、親ビューと接続します。
出てきたポップアップから**「Center Horizontally in Container」**を選択します。
これで、Image Viewと親ビューとの水平方向の中心がそろいました。
同じく垂直方向の中心線もそろえていきたいと思います。
Image Viewをもう一度選択して、 Ctrl + ドラッグをしながら今度は横に移動させて、親ビューと接続します。
出てきたポップアップから「Center Vertically in Container」を選択します。
Image Viewの幅を親ビューの幅の80%の大きさにする
もう一度Image Viewを選択して、Ctrl + ドラッグをしながら親ビューと接続させます。
出てきたポップアップから**「Equal Widths」**を選択します。
今設定した制約(Image View.width = width)を選択して、「Attributes inspector」を表示します。
「Multiplier」の値を1から0.8に変更します。
Image Viewのアスペクト比を幅高さ1:1にする
Image Viewのアスペクト比を決定しましょう。
Image Viewを選択して、Image ViewのでCtrl + ドラッグをします。
出てきたポップの**「Aspect Ratio」**を選択します。
今設定した制約を選択します。（「aspect = 120:109」 など、現状のImage Viewのアスペクト比が設定されているかと思います。）
「Attributes inspector」を表示して、「Multiplier」の値を1:1変更します。
最後に
Auto Layoutのワーニングが出ていると思うのでそれを解決します。
Auto Layout Issues画面を表示して、「Update frames」を選択します。
Image Viewを選択して、Attributes inspectorから画像を設定します。
ここまできたら、ビルドしてみましょう。
今回はiPhone6sのシミュレーターでビルドしてみました
縦がこんな感じになります。
横がこうです。
まとめ
いかがでしたでしょうか？
アプリアイコンを全画面を表示するTipsを紹介しました。
ぜひみなさんも使ってみてください。
今回のソースコードをGithubに置きました。
参考にしてください。
画像はこちらからお借りしました。
http://flat-icon-design.com/?p=366