[Swift] UIButton 수직으로 배치하기 with Configuration

이렇게 그림과 글자가 수직으로 배치되는 경우가 종종 있는데

이때 아래 코드를 사용하면 쉽게 수직 배치할 수 있다

출처

https://velog.io/@ezidayzi/iOS-UIButton-title-image-align-%ED%95%98%EA%B8%B0

[iOS] UIButton title , image vertical align 하기

extension UIButton {
    func alignTextBelow(spacing: CGFloat = 8.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)
        
        
    }
}

 

다만 문제점은...

deprecate!!!

Hig에서도 확인할 수 있듯이 15.0에서는 UIButto.Configuration을 사용하는 것이 좋을 것 같다

 

        if #available(iOS 15.0, *) {
            var configuration = UIButton.Configuration.plain()
            configuration.title = "관심 상품"
            configuration.image = UIImage(named: "detail_bookmark_off")
            configuration.imagePadding = 2
            configuration.imagePlacement = .top
            configuration.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
            button.configuration = configuration
        }

configuration을 사용하면 아주 쉽게 이미지와 타이틀을 수직으로 배치할 수 있다

configuration.imagePlacement를 사용해서 이미지와 타이틀 배치를 세팅해 줄 수 있다.

이참에 Configuration 공부좀 해둬야 겠당👩🏻‍💻

Polina Tankilevitch: https://www.pexels.com/ko-kr/photo/6419685/