UIButtonの画像をラベルにはさみたい

5460 ワード
iOS UIKit Swift UIButton iOS テキストリンク

自分用メモ

概要

こんなボタンがデザインで上がってきました。

UIButtonのLabelの両脇に画像を配置しています。
普通にUIViewでボタンの中のレイアウトを組んでの上にUIButtonのせればいいんじゃないの？って思ったんですが、ボタンを押した時にハイライトにならずにイマイチだったのでUIButtonだけで頑張ってみました。

実装

これで↑のボタンができました。

// Buttonの装飾部分は割愛

let string = NSMutableAttributedString(string: "10000")
let leftImage = #imageLiteral(resourceName: "money")
let rightImage = #imageLiteral(resourceName: "disclosure")

let leftAttachment = NSTextAttachment()
let leftImageString = NSAttributedString(attachment: leftAttachment)
leftAttachment.image = leftImage
// デフォルトの位置だと中央ぞろえが厳しいので調整
leftAttachment.bounds = CGRect(x: 0, y: -3, width: leftImage.size.width, height: leftImage.size.height)

let rightAttachment = NSTextAttachment()
let rightImageString = NSAttributedString(attachment: rightAttachment)
rightAttachment.image = rightImage
// デフォルトの位置だと中央ぞろえが厳しいので調整
rightAttachment.bounds = CGRect(x: 0, y: -3, width: rightImage.size.width, height: rightImage.size.height)

string.insert(leftImageString, at: 0)
string.append(rightImageString)
button.setAttributedTitle(string, for: .normal)

懸念

画像の位置がちょっとずれているのでコードで調整する必要があり、ボタンのバリエーションが増えると使い勝手が悪くなるかもしれません。

参考

UILabelに画像を表示する