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 を知らないとコードが書けないなんてことはないですが、知っていると少しコードを書くのが楽になります。使うのは簡単なので、ぜひ試してみてください。
関連記事
