テキストの横に画像のあるボタンを作成したい場面に出会ったことのある人は結構いると思います。
そんな時UIImageとUILabelを組み合わせなくてもUIButtonのみで作ることができます。
- R.swiftを使っています
- 表示する画像はこちらのイカちゃん
完成はこんな感じです。
UIButtonに画像とテキストを設定する
leftImageButton.setTitle("左側アイコン", for: .normal)
leftImageButton.setImage(R.image.ika(), for: .normal)
titleEdgeInsets・imageEdgeInsetsを使います
EdgeInsetsは余白の設定ができます。
それぞれ最適に余白の設定をすることで、ボタンとテキストをいい感じに表示させることができます。
初期値はtitleEdgeInsetsもimageEdgeInsetsも(top: 0, left: 0, bottom: 0, right: 0)なので、画像とテキストを同時に設定すると被って表示されます。
テキストの左に画像を付ける
テキストの左側に余白を設定します。画像のwidthを元に設定するのが良いと思います。
leftImageButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 0)
テキストの右に画像を付ける
画像を右側に持っていく為に左側にテキストの長さ分の余白を設定します。こちらも固定値を設定していますが、テキストの長さから設定した方が良いと思います。
またテキストの位置も調整したいので、テキストの余白も設定します。
rightImageButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 200, bottom: 0, right: 0)
rightImageButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 20)
仕組みがわかれば同じ要領でテキストの上側に画像を設定したり、下に画像を設定したりできます。
テキストの上に画像を付ける
topImageButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 100, bottom: 20, right: 0)
topImageButton.titleEdgeInsets = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
テキストの下に画像を付ける
bottomImageButton.imageEdgeInsets = UIEdgeInsets(top: 25, left: 100, bottom: 0, right: 0)
bottomImageButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 20, right: 0)
以上です。
仕組みを理解すれば簡単にちょっと凝ったボタンを作成することができてとても便利です。