【Swift】UIButton을 화상 첨부의 텍스트로 한다

텍스트 옆에 이미지가 있는 버튼을 만들고 싶은 장면을 만난 적이 있는 사람은 괜찮다고 생각합니다.
그럴 때 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)

이상입니다.
구조를 이해하면 간단히 조금 정교한 버튼을 만들 수있어 매우 편리합니다.

관련

【Swift】UIButton에 image를 세트 했지만 표시되지 않는 건