[iOS]UIImageViewにAspect Fillで画像を表示したらなんかはみ出しちゃった時にすること

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。最近iOSのUI実装を始めたデザイナー兼Androidエンジニアの横山です。
もはや自分自身がなにものかわからなくなって参りましたが、今回は画像を表示する時のポイントをご紹介します。

こんな時に

例えば、正方形のUIImageViewに長方形の画像を次のように表示したい場合、contentModeAspect Fillを指定しますが、それだけでは期待する表示結果にはなりません。


uiimageview_aspectfill_img_01

Interface Builderと実際の表示が違う

Interface Builderでレイアウトして画像を表示した時には、問題なく表示されますがシミュレーターで表示してみると表示が崩れてしまいます。
正方形のUIImageViewを二つ並べてそれぞれにAspect Fillで長方形の画像を表示してみた例が以下です。


uiimageview_ibsm_img_01

UIImageView(UIView)は自身の領域外の描画に関してはデフォルトで「描画する」ことになっています。そのため、画像がはみ出してしまったわけです。
これはInterface Builderでは確認することはできません。

こうする

Viewの領域外を描画しないようにするにはいくつかの方法があるのですが、UIViewのプロパティclipToBoundsの値を変えて対応する方法をご紹介します。

// When YES, content and subviews are clipped to the bounds of the view. 
// Default is NO.
@property(nonatomic) BOOL clipsToBounds;

↑これをYESにする。

①コード書かない方法(お手軽・デザイナーにおすすめ)

Story Boardで配置したUIImageViewを選択して、インスペクタペインのClip Subviewsにチェックを入れる。(UIImageViewを配置しただけではチェックが入っていない)


check_clipsubviews

②コード書く方法

ViewControllerにUIImageViewを接続して clipToBoundsYESにする。

sunRiseImageView.clipsToBounds = YES;
flowerImageView.clipsToBounds = YES;

こうなります

clipsubviews_complete

これで期待する表示結果を得ることができました。