フェンリル

Developer's Blog

知っていると便利な UIView の contentMode

UIView には contentMode というプロパティがあります。このプロパティを使えば、面倒な画像の編集をせずに見た目を変えられます。

contentMode は View のサイズが変わる時にコンテンツをどう表示するかを決めるものです。たいてい画像をどう表示するかを決めるので、UImageView や UIButton で使われます。enum で色々定義されているので、下の画像を使って順に試していきます。


UIViewContentModeScaleToFill

View のサイズと画像のサイズが同じになります。View の横幅が画像より大きいので横に伸びてしまいます。UIImage を stretchableImage にした時などに使います。

UIViewContentModeScaleAspectFit

アスペクト比を維持したまま、画像のすべてが表示されるようにリサイズされます。View の左右が空いています。

UIViewContentModeScaleAspectFill

アスペクト比を維持したまま View に空きがないように、いっぱいいっぱい表示されます。なので、View と 画像のアスペクト比が違う場合は、縦か横がはみ出ます。アプリを作っていると、画像が縦長か横長で、それをもとに正方形なサムネイルを作りたいことがよくあります(標準の写真アプリなど)。その時にわざわざ画像をカットするのではなく、contentMode に UIViewContentModeScaleAspectFill を指定すれば簡単です。ただし、サムネイルを大量に表示するのに、大きい画像を読み込んで contentMode で小さくしていてはパフォーマンスが悪いので、そういう場合は、別にサムネイルを作って保存しておくべきです。

UIViewContentModeRedraw

View のサイズが変わった時に setNeedsDisplay が自動的に呼ばれます。

UIViewContentModeCenter
UIViewContentModeTop
UIViewContentModeBottom
UIViewContentModeLeft
UIViewContentModeRight
UIViewContentModeTopLeft
UIViewContentModeTopRight
UIViewContentModeBottomLeft
UIViewContentModeBottomRight

それぞれ画像のサイズを維持しつつ指定された位置に表示されます。これらの contentMode は普通の使い方以外に、便利な使い方ができます。それは画像の一部だけを角丸にしたいときです。角丸画像を drawRect: で書くのは面倒です。できれば、CALayer の cornerRadius と masksToBounds で済ませたいですね。しかし、CALayer の効果だけでは全ての角が丸くなってしまいます。そこで contentMode を使います。左上を角丸にしたければ、UIViewContentModeTopLeft を指定して、Viewを画像サイズより少し大きくします。すると、左上以外の角はなにもないところを丸くするので、画像は左上だけキレイに角丸にできます。

まとめ

contentMode を知らないとコードが書けないなんてことはないですが、知っていると少しコードを書くのが楽になります。使うのは簡単なので、ぜひ試してみてください。

Facebook コメント

コメント

UIImageViewのcontentModeを実際に試してみた。| ずっとMegane。2013年10月27日 7:44

[…] 以下のサイト様を参考に試してみました。 画像サイズにあわせてUIImageViewに貼付ける – わっふるわっふる 知っていると便利な UIView の contentMode – Fenrir Developer’s Blog […]

縦横比を保ったまま目一杯表示したいならAspectFit | 極上の人生2013年11月22日 16:11

[…] 知っていると便利な UIView の contentMode (フェンリル | デベロッパーズブログ… […]

UIViewの画像伸縮モード | りんごブログ2014年06月20日 9:16

[…] 知っていると便利な UIView の contentMode (フェンリル | デベロッパーズブログ) […]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。