MILLEN BOX

音楽好きの元組み込みソフトエンジニアによるプログラミング(主にiOSアプリ開発)の勉強の記録

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

 

という訳で本日は終了です!