PIYO - Tech & Life -

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

iOS Xcode

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);