画像付きUIButtonのレイアウト調整

移転しました →

UIButtonに画像をつけるとデフォルトでは画像の右側にテキストが回りこむような形でレイアウトされますが、このレイアウトはカスタマイズ可能です。

画像とテキストはそれぞれ独立して動かすことができますので、次のようなレイアウトを作ることも可能です。

storyboard（またはIB）で設定

UIButtonを選択するとインスペクタでInsetsという欄が現れます。

ここにあるEdgeという項目では、

の3つを選択でき、Insets欄に入力する値を何に効かせるのかを切り替えるのに使用します。Contentでは画像とテキスト両方を、Titleはテキストのみ、Imageは画像のみです。

例えば、このような配置にする場合には、

画像を右上にずらし、テキストを左下にずらします。

コードでも簡単に設定可能です。

button.imageEdgeInsets = UIEdgeInsetsMake(-30, 40, 0, 0);
button.titleEdgeInsets = UIEdgeInsetsMake(40, -40, 0, 0);