UIImageViewをコードで実装する
画像をプロジェクトにインポートする
まずは、ImageViewに表示するための画像をインポートします。 Xcodeの「Assets.xcassets」をクリックして表示された画面にFinderより画像をドラッグ&ドロップします。
「Assets.xcassets」にドラッグ&ドロップした画像が入っていれば大丈夫です。 1x,2x,3xと表示がありますが、Retinaでより高精度の画像を用意してインポートすることもできます。 サイズは2xの場合は1xの2倍、3xの場合は1xの3倍の画像をセットできます。
アプリを実行する
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行だけで画像の配置ができました。
ImageViewのオプション設定
ImageViewの画像表示スタイルには大きく3つの形式があります。他にも選択肢はあるのですが、最低限以下の3つのスタイルを覚えておくとよいでしょう。
AspectFit
ImageViewのサイズに引き伸ばして表示する
imageView.contentMode = .scaleAspectFit
ScaleToFill
画像の縦横比率を保ったまま、ImageViewに表示する(余白が生じます)
imageView.contentMode = .scaleToFill
ScaleAspectFill
画像の縦横比率を保ったまま、ImageViewに余白がないように拡大して表示する
imageView.contentMode = .scaleAspectFill
コードでの基本的なImageViewの配置と画像のセットについては以上となります。