UIButtonにセットした画像のcontentModeが効かない?そんな時の対処方法
お久しぶりの更新です。
通常はいつもMacを使って更新するんですが、実験的にiPhoneのはてなブログアプリからアップしてみます。お見苦しい点ありましてもお許し願いたい!!
UIButtonにセットしたUIimageViewの画像のcontentModeが効かない問題
ある日、リリースされたばかりアプリを意気揚々と家族(妻)とダウンロードした時のことです。
まず私のiPhone 7では上々に動作。よしよし、いい子だ。
次に妻のiPhone 6s Plusへダウンロードし動作確認の段。
ん?
何かボタンちっちゃくね?
というか、
contentModeの設定きいてなくね??
わー!!めっちゃカッコ悪いぞこれー!!
すぐに公開停止し原因を探りました。
果たして何が原因だったのでしょうか?
実はcontentModeが効いていない訳ではない
いきなり見出しで答えの半分を書いてしまいました。
実はこの通りcontentModeが効いていない訳ではないのです。
このcontentModeなんですが、コレ実は、UIButtonの中にあるUIImageViewのcontentModeなんですね。
つまりこの現象はUIButtonのUIImageViewが適切なサイズになっていないことが原因です。
「ん?」
「なんでそんなことが起きるんだ…?」
「いや…、ちょっと待てよ…。」
「まさか、AutoLayoutの仕業かー!!」
はい。その通りです。
AutoLayoutが働くタイミングとcontentModeが効くタイミングによっては、我々が普通に考えるのとは異なる見え方になっちゃうのです。
つまりUIButtonは大きくなっているのに、中のImageViewが小さいままという現象が起きてるんですね。
まぁ、以下のリンクの受売りなんですが。
UIButtonの画像をUIButtonに対してAspectFitする方法 - Qiita
対策は?
上記リンクにも答えが書いていますが、UIButtonのcontentHorizontalAlignmentとcontentVerticalAlignmentというプロパティを設定します。
UIImageのアスペクト比を保ったまま拡げる場合に.fillを指定します。
(UIButton).contentHorizontalAlignment = .fill
(UIButton).contentVerticalAlignment = .fill
という訳で本日は終了です!