ストーリーボードでImageViewを配置する
UIImageViewをストーリーボードで配置する
ストーリーボードで画像を配置するのはとても簡単に実装することができます。 UIImageViewのサイズ調整は別途調整する必要がありますが、ここでは基本的なImageViewの配置をしてきます。
UIKitからImageViewを配置
プロジェクトから「Main.storyboard」を選択してXcodeの右上の「+」ボタンをクリックして、パーツ選択メニュー「ImageView」を検索、「Image View」を探し、ストーリーボードにドラッグ&ドロップします。
サイズを調整
サイズは配置したImageViewの上下四方の◻をドラッグして調整します。
システム標準アイコンを設定してみる
iPhoneでシステム的に用意されている画像はすぐに使うことができます。 右側に表示されているインスペクタより、セレクトボックスから何かシステム画像を選択してみましょう。
選択すると、以下の画像のようにImageViewに画像がセットされて表示されます。
画像をプロジェクトにインポートする
システム画像ではなく任意で用意した画像をImageViewにセットする場合には、予め画像をXcodeにインポートしておく必要があります。Xcodeのプロジェクト内にある「Assets.scassets」をクリックして表示、用意した画像をFinderからドラッグ&ドロップします。
すると、Assets.scassetsの中に画像がインポートされますので、これで画像の準備は完了です。
先程のストーリーボード画面に戻り、セレクトボックスで画像が選択できる状態になっていますので、画像を選択することでImageViewに画像をセットすることができます。
表示スタイルを調整する
ImageViewの画像表示スタイルには大きく3つの形式があります。他にも選択肢はあるのですが、最低限以下の3つのスタイルを覚えておくとよいでしょう。
Scale To Fill
ImageViewのサイズに引き伸ばして表示する
Aspect Fit
画像の縦横比率を保ったまま、ImageViewに表示する(余白が生じます)
Aspect Fill
画像の縦横比率を保ったまま、ImageViewに余白がないように拡大して表示する
基本的なImageViewの配置と画像のセットについては以上となります。