UIImageViewのContentModeを理解する
はじめに
iOSアプリ開発で必ずと言っていいほど登場するUIImageViewですが、画像を描画する際の比率の設定ってどうするんだっけ?と何回も忘れてしまっているので、ContentModeで対応している全ての比率を試し、どのように表示されるのかやってみました!
説明
使用画像
まず画像ですが、以前私がハッカソンで使用したアプリのアイコンを例にして検証を行いました。画像サイズは1000 × 1000です
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/ebi.png)
UIImageViewの追加指定
ContentModeの指定によってImageViewの領域がどのような大きさだったのかわからなくなってしまう為、理解しやすいように青色の枠線を入れています。
あと親Viewの背景を灰色に、ImageViewの背景を白にしています。
@IBOutlet weak var imageView: UIImageView! {
didSet {
imageView.layer.borderColor = UIColor.blue.cgColor
imageView.layer.borderWidth = 10
}
}
制約について
制約は下記の4つを設定しています。元が四角い画像のため、widthとheightの制約を変えています。
・Align Center X to: SuperView
・Align Center Y to: SuperView
・Width Equal: 240
・Height Equal: 300
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/スクリーンショット-2019-03-30-23.45.36-577x1024.png)
Content Mode
Scale to Fill
UIImageViewのデフォルトに設定されているContentModeです。
画像サイズをImageViewの大きさに合わせます。
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/scaleToFill-473x1024.png)
AspectFit
UIImageViewに設定された縦横の制約の短い方に合わせて元画像の比率のまま表示を行います。
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/aspectFit-473x1024.png)
AspectFill
UIImageViewに設定された縦横の制約の長い方に合わせて元画像比率をそのままに表示を行います。
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/aspectFill-473x1024.png)
Redraw
draw(_:)の時にリサイズされるみたいですが UIImageViewはdraw(_:)がそもそも呼ばれないらしいのでScale to Fillと同じです
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/redraw-473x1024.png)
Center
画像の中央をUIImageViewのcenterで表示します。
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/center-473x1024.png)
Top
画像の上部をUIImageViewのTopから表示します。
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/top-473x1024.png)
Bottom
画像の下部をUIImageViewのBottonから表示します。
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/bottom-473x1024.png)
Left
画像の高さの半分の位置で、UIImageViewのLeftに合わせて表示します
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/left-473x1024.png)
Right
画像の高さの半分の位置で、UIImageViewのRightに合わせて表示します
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/right-473x1024.png)
Top Left
画像の左上をUIImageViewのTop Leftから表示します
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/topLeft-473x1024.png)
Top Right
画像の右上をUIImageViewのTop Rightから表示します
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/topRight-473x1024.png)
Bottom Left
画像の左下をUIImageViewのBotton Leftから表示します
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/bottonLeft-473x1024.png)
BottomRight
画像の右下をUIImageViewのBotton Rightから表示します
![](http://harumi.sakura.ne.jp/wordpress/wp-content/uploads/2019/03/bottomRight-473x1024.png)