자신의 메모

개요

이런 버튼이 디자인으로 올라왔습니다.



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에 이미지 표시