UIImageViewをコードで実装する

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

まずは、ImageViewに表示するための画像をインポートします。 Xcodeの「Assets.xcassets」をクリックして表示された画面にFinderより画像をドラッグ&ドロップします。

/images/uploads/20200506041200.png

「Assets.xcassets」にドラッグ&ドロップした画像が入っていれば大丈夫です。 1x,2x,3xと表示がありますが、Retinaでより高精度の画像を用意してインポートすることもできます。 サイズは2xの場合は1xの2倍、3xの場合は1xの3倍の画像をセットできます。

/images/uploads/20200506041238.png

アプリを実行する

viewDidLoadにimageView設置のコードを書きます。 簡易な設置なので、オプションについては最小限で、画像の指定だけにします。

コードで書いている内容は、

  • ImageViewを初期化してimageViewという変数にインスタンスを格納。座標はx:10,y:10,width:200,height:200に設定。

  • imageViewに画像を設定、Assets.xcassetsでインポートした「frog9.png」を指定します。拡張子は必要無いので「frog9」として記述。もしpng以外であれば拡張子は付けるほうがいいです。

  • ViewControllerに初めから備わっているviewに対してimageViewを追加して配置します。

以下のようになります。

let imageView = UIImageView.init(frame: CGRect(x: 10, y: 10, width: 200, height: 200))
imageView.image = UIImage(named: "frog9")
self.view.addSubview(imageView)

アプリを実行すると、このようになります。 たった3行だけで画像の配置ができました。

/images/uploads/20200506042116.png

ImageViewのオプション設定

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

AspectFit

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

imageView.contentMode = .scaleAspectFit

/images/uploads/20200506042459.png

ScaleToFill

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

imageView.contentMode = .scaleToFill

/images/uploads/20200506042620.png

ScaleAspectFill

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

imageView.contentMode = .scaleAspectFill

/images/uploads/20200506042710.png

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


Category