Help us understand the problem. What is going on with this article?

UIButtonの画像をUIButtonに対してAspectFitする方法

More than 3 years have passed since last update.

UIButtonに表示させる画像にcontentModeを設定する時、思い通りにいかない人が多いと思うのですが、色々調べていくうちにようやく正解がみえたので共有したいと思います。コードはSwift3ですがSwift2以前でも適切に変更してやれば動きます。

どうやってボタンにAspectFitを設定するか

UIButtonへのcontentModeの設定、これに関してはいろんな人が書いていて

btn.imageView?.contentMode = .scaleAspectFit

のように書けばもちろんUIButtonの中に入っているImageViewに対してAspectFitになります。ですがこれはあくまでUIButtonの中に入っているImageViewに対してというところに注意しなければなりません。もちろんこれで上手くいくこともありますが、AutoLayoutなどで引き伸ばした時に思っていたサイズよりかなり小さくなるケースがあります。

この原因はUIButtonという親クラスに対して中のUIImageViewのサイズ指定が適切に働いていないことが原因です。つまりUIButtonは大きくなっているのに、中のImageViewが小さいままということがおきてしまうのです。

これを避けるためにはcontentHorizontalAlignmentcontentVerticalAlignmentというプロパティを設定します。

以上まとめるとUIButtonに画像をめいっぱいアスペクト比を保ったまま表示するには以下の三行が必要になります。

btn.imageView?.contentMode = .scaleAspectFit
btn.contentHorizontalAlignment = .fill
btn.contentVerticalAlignment = .fill

これを盛り込んだ自作クラスとして予め@IBDesignableなどを作っておくといいかもしれませんね。

touyoubuntu
Life is Tech! iPhoneメンター / UTokyo / IS17er, CS19er [ http://twitter.com/touyou_dev ], [ https://github.com/touyou ]
https://touyou.dev/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away