ストーリーボードでImageViewを配置する

[UIKit] [UIImageView]

UIImageViewをストーリーボードで配置する

ストーリーボードで画像を配置するのはとても簡単に実装することができます。 UIImageViewのサイズ調整は別途調整する必要がありますが、ここでは基本的なImageViewの配置をしてきます。

UIKitからImageViewを配置

プロジェクトから「Main.storyboard」を選択してXcodeの右上の「+」ボタンをクリックして、パーツ選択メニュー「ImageView」を検索、「Image View」を探し、ストーリーボードにドラッグ&ドロップします。

/data/uploads/20200506040635.png

サイズを調整

サイズは配置したImageViewの上下四方のをドラッグして調整します。

/data/uploads/20200506040713.png

システム標準アイコンを設定してみる

iPhoneでシステム的に用意されている画像はすぐに使うことができます。 右側に表示されているインスペクタより、セレクトボックスから何かシステム画像を選択してみましょう。

/data/uploads/20200506040909.png

選択すると、以下の画像のようにImageViewに画像がセットされて表示されます。

/data/uploads/20200506041007.png

画像をプロジェクトにインポートする

システム画像ではなく任意で用意した画像をImageViewにセットする場合には、予め画像をXcodeにインポートしておく必要があります。Xcodeのプロジェクト内にある「Assets.scassets」をクリックして表示、用意した画像をFinderからドラッグ&ドロップします。

/data/uploads/20200506041200.png

すると、Assets.scassetsの中に画像がインポートされますので、これで画像の準備は完了です。

/data/uploads/20200506041238.png

先程のストーリーボード画面に戻り、セレクトボックスで画像が選択できる状態になっていますので、画像を選択することでImageViewに画像をセットすることができます。

表示スタイルを調整する

ImageViewの画像表示スタイルには大きく3つの形式があります。他にも選択肢はあるのですが、最低限以下の3つのスタイルを覚えておくとよいでしょう。

Scale To Fill

ImageViewのサイズに引き伸ばして表示する

/data/uploads/20200506041412.png

Aspect Fit

画像の縦横比率を保ったまま、ImageViewに表示する(余白が生じます)

/data/uploads/20200506041520.png

Aspect Fill

画像の縦横比率を保ったまま、ImageViewに余白がないように拡大して表示する

/data/uploads/20200506041637.png

基本的なImageViewの配置と画像のセットについては以上となります。

Posted_at:2020-05-08