[iOS] UIButton.Configuration 사용해보기

SNS 로그인 버튼을 만들기 위해 다음과 같은 코드를 작성하였다

private let kakaoLoginButton = UIButton().then{
        $0.setImage(UIImage(named: "img_logo_kakao"), for: .normal)
        $0.backgroundColor = UIColor.kakaoyellow
        $0.setTitle("카카오로 계속하기", for: .normal)
        $0.setTitleColor(UIColor.snslogoblack, for: .normal)
        $0.titleLabel?.font = UIFont.hanSansBoldFont(ofSize: 16)
        $0.clipsToBounds = true
        $0.layer.cornerRadius = 10
}

음 이미지와 글씨 사이가 너무 가까운걸 ;;

inset을 넣어줘야겠다!

야무지게 넣어주려했으나!! 두둥 ...

‘imageEdgeInsets’ will be deprecated in iOS 15.0

‘imageEdgeInsets’ will be deprecated in iOS 15.0

‘imageEdgeInsets’ will be deprecated in iOS 15.0

‘imageEdgeInsets’ will be deprecated in iOS 15.0

“Deperecated” 되었다 ..

imageEdgeInsets, tilteEdgeInsets 모두 iOS 15.0부터 Deprecated 되었고 새로운 방법으로 간격을 설정 해주어야 한다. ..

iOS 15.0 부터 UIButton에서 없어진 애들(Apple Docs)

Apple은 iOS 15에서 UIButton에 큰 변화를 주었는데

바로 UIButton.Configuration을 이용해서 버튼의 속성들을 지정해주는 방법을 내놓았다!

Configuration을 이용하면 버튼의 모든 속성을 설정 해줄 수 있다.

Configuration(apple docs)

Configuration 간단 설명

기본타입

Configuration에는 미리 정의된 버튼 스타일 세트 4가지가 추가 되었다.

UIButton.Configuration.filled() 
UIButton.Configuration.gray() 
UIButton.Configuration.plain() 
UIButton.Configuration.tinted()

CornerStyle

UIButton.Configuration.CornerStyle 에는

.fixed .dynamic .capsule .large .small .medium 등이 있다.

Size

UIButton.Configuration.Size.mini
UIButton.Configuration.Size.small
UIButton.Configuration.Size.medium
UIButton.Configuration.Size.large

텍스트,이미지,컨텐츠 모양 커스터마이징

Configuration은 subtitle 을 지원한다.

title 과 subtitle 사이의 간격은 titlePadding으로 지정해주면 되고

우리가 원하는 이미지와 텍스트 간격은 imagePadding을 이용하면 된다!

요 Configuration.imagePadding 을 이용해서 이미지와 텍스트 간격을 설정해 줘보도록 하겠다.

 

1. 버전에 따른 분기처리하기

private let kakaoLoginButton = UIButton().then{
        if #available(iOS 15.0, *) {
           
        } else {
           
    }

iOS 버전에 따라 버튼을 구현하는 방법이 달라지므로 #available로 위처럼 분기처리를 하고 iOS 15 이상에서만 configuration을 쓴다.

2. configuration 속성 정해주기

var configuration = UIButton.Configuration.filled()

배경색을 가지고 있는 버튼이므로 .filled 타입으로 만들어준다.

configuration.image = UIImage(named: "img_logo_kakao")
configuration.baseBackgroundColor = UIColor.kakaoyellow
configuration.baseForegroundColor = UIColor.snslogoblack

.image .baseBackgroundColor .baseForegroundColor 을 통해 이미지, 배경색, 글자색을 설정 해줄 수 있다.

var attText = AttributedString("카카오로 계속하기")
attText.font = UIFont.hanSansBoldFont(ofSize: 16)
configuration.attributedTitle = attText

.attributedTitle 프로퍼티로 폰트 관련 속성을 설정 해준다.

configuration.background.cornerRadius = 10

.background.cornerRadius 로 둥근 테두리를 설정해준다.

configuration.imagePadding = 10

.imagePadding 으로 글자와 이미지 사이의 간격을 설정 해준다.

3. 설정한 configuration 대입하기

$0.configuration = configuration

configuration을 다 설정 하였으면 button.configuration에 넣어준다.

결과

이미지와 텍스트 간격이 잘 설정 된 것을 볼 수 있다!

전체 코드

private let kakaoLoginButton = UIButton().then{
        if #available(iOS 15.0, *) {//iOS 15 이상은 Configuration 이용해서 버튼 설정
            var configuration = UIButton.Configuration.filled() 
            configuration.image = UIImage(named: "img_logo_kakao")
            configuration.baseBackgroundColor = UIColor.kakaoyellow
            configuration.baseForegroundColor = UIColor.snslogoblack
            var attText = AttributedString("카카오로 계속하기")
            attText.font = UIFont.hanSansBoldFont(ofSize: 16)
            configuration.attributedTitle = attText
            configuration.background.cornerRadius = 10
            configuration.imagePadding = 10
            $0.configuration = configuration
        } else {//iOS 15 이전 버전은 Configuration이 없으므로 이전의 방식으로 버튼 설정
            $0.setImage(UIImage(named: "img_logo_kakao"), for: .normal)
            $0.backgroundColor = UIColor.kakaoyellow
            $0.setTitle("카카오로 계속하기", for: .normal)
            $0.setTitleColor(UIColor.snslogoblack, for: .normal)
            $0.titleLabel?.font = UIFont.hanSansBoldFont(ofSize: 16)
            $0.clipsToBounds = true
            $0.layer.cornerRadius = 10
            $0.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)
            $0.titleEdgeInsets = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 20)
        }
        }
    }