[iOS/Swift] UIButton에 이미지와 텍스트 vertical align

오늘의 예제

버튼 안에 아이콘 이미지와 텍스트가 세로 방향으로 정렬하는 형태로 버튼을 구현하는 방법이다.

---

예제의 경우, 빨간색 View안에 버튼을 넣어서 모양을 구현했다.

먼저 View 안에 UIButton을 넣고, 위치를 잡은 뒤 필요한 디자인에 따라 아이콘과 텍스트를 설정하면 기본 버튼의 경우 아이콘과 텍스트가 나란히 붙은 모양으로 구현이 된다.

 

UIButton에 extension을 추가하여 쉽게 구현할 수 있다.

extension UIButton {
  
    
    func alignTextBelow(spacing: CGFloat = 4.0) {
            guard let image = self.imageView?.image else {
                return
            }

            guard let titleLabel = self.titleLabel else {
                return
            }

            guard let titleText = titleLabel.text else {
                return
            }

            let titleSize = titleText.size(withAttributes: [
                NSAttributedString.Key.font: titleLabel.font as Any
            ])

            titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0)
            imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0, bottom: 0, right: -titleSize.width)
        }
}

 

실제 사용할 때는 spacing에 필요한 간격만큼 숫자를 넣어주면 된다.

class ViewController: UIViewController {

    @IBOutlet weak var boxView: UIView!
    @IBOutlet weak var btnDelete: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        boxView.layer.cornerRadius = 12
        
        btnDelete.alignTextBelow(spacing: 4)
    }

}