UIButtonに画像をつけるとデフォルトでは画像の右側にテキストが回りこむような形でレイアウトされますが、このレイアウトはカスタマイズ可能です。
画像とテキストはそれぞれ独立して動かすことができますので、次のようなレイアウトを作ることも可能です。
storyboard(またはIB)で設定
UIButtonを選択するとインスペクタでInsetsという欄が現れます。
ここにあるEdgeという項目では、
- Content
- Title
- Image
の3つを選択でき、Insets
欄に入力する値を何に効かせるのかを切り替えるのに使用します。Content
では画像とテキスト両方を、Title
はテキストのみ、Image
は画像のみです。
例えば、このような配置にする場合には、
画像を右上にずらし、テキストを左下にずらします。
コードで設定
コードでも簡単に設定可能です。
button.imageEdgeInsets = UIEdgeInsetsMake(-30, 40, 0, 0);
button.titleEdgeInsets = UIEdgeInsetsMake(40, -40, 0, 0);