*

Auto Layoutを使う〜画像編〜(Xcode 7.1)

      2015/11/25

これまでAuto Layoutをなんとなーく無視して開発してきて、でも特に問題が起こってなかったんですが、

iPhone6, 6 Plusが出てきて、なんとなーくうまくいかなくなってきたので、色々と試してみました。

分かりやすいように、今回は5.5-inchをベースに、画像の設置を例にします。

(自分がAuto Layoutで最初につまづいて、試行錯誤したのがこの部分だったので。)

スクリーンショット 2015-11-16 20.38.31

まず下のように700*100の画像を水平方向中心に設置します。

画像は@2xにしているので画面上は350*50です。

(各端末の横サイズは、4インチ:320、4.7インチ:375、5.5インチ:414)

 

スクリーンショット 2015-11-16 20.59.53

早速各端末で確認してみましょう。

スクリーンショット 2015-11-16 20.59.29

こんな感じになってしまいます。。。

昔はこれを勝手にいい感じにやってくれるのがAuto Layoutなのかなーって勝手に思ってたんですが、

そんな甘くないわけですね。

 

そこで、どうやってやるかという本題に入りますと、

まず、Previewを表示して、必要な端末を追加すると、

下図のように、実際にどう表示されるかを確認することができます。

(今回は4, 4.7, 5.5インチを追加しました。)

スクリーンショット 2015-11-16 21.10.20

次に右下のメニューで制約を追加していきます。

まずは、2つの制約を追加。

・上部からの位置を50で固定

・画像のアスペクト比を固定

スクリーンショット 2015-11-24 15.56.18

更に、対象のImageViewをcontrol押しながら引っ張ると、

下図のような画面が出てくるので、そこから2つを選択します。

・Center Horizontally in Container

指定したビューに対して、水平方向の中心を合わせる

・Aspect Ratio

指定してビューと比率を合わせる(今回でいうと、大もとのViewのサイズに合わせて、画像の大きさを変動させる)

スクリーンショット 2015-11-24 16.02.40

以上をやった結果をプレビューで確認すると、このようにいい感じになってますね。

ちなみに、下図の右の部分に、制約が一覧で表示されるので、

この値を直接編集することもできます。

スクリーンショット 2015-11-24 16.14.41

という感じで、基礎はなんとなくつかめるのではないかと思いますが、いかがでしょうか。

今回ImageViewを例にしましたが、ScrollViewやTextView等、

パーツによって微妙にやり方が違ったり、痒いところに手が届かない、

といったことが色々あったりするので、次回はもうちょっと突っ込んだ内容書きますね。

 

Author Profile

KJ
株式会社デジタルクエスト 開発部 エンジニア
サーバサイド、iOSメイン、Android少々みたいな感じで色々やってます。
携わってきたサービスはECサービスが多いです。
  • このエントリーをはてなブックマークに追加


  関連記事

apple_icon
Objective-Cの型変換を試してみた

String→BOOLの型変換を少し検証してみました。 検証前は、文字が入ってい …

apple_icon
Xibとstory boardを使わない 〜6Plus対応編〜(Xcode 7.1.1)

はろー、ミシェルですよ 😀 ミシェルはiOSアプリの開発にたずさわって、かれこれ …