UIButton.Configuration을 확장해서 사용해보자

UIButton.Configuration

• iOS 15.0부터 이용 가능
• Struct 타입

 

---

 

기본 제공 Configuration

기본적으로 제공되는 버튼 스타일이 타입 메서드 형태로 만들어져있다.

 

---

 

Configuration 확장

매번 configuration을 버튼마다 만들어 주는게 코드 라인도 길어지고 귀찮았는데 멘토님께서 말씀해주신 extension으로 확장한다는 관점이 좋았다. 프로젝트 내에 버튼 스타일이 몇 가지 없거나 일정하다면 다음과 같이 만들어쓰는 것이 좋아보인다. (기본 제공 스타일과 동일한 아이디어 인 것 같다.)

 

---

 

진행 중인 프로젝트 예시

아직 실제로 적용하지는 않았지만, 프로젝트 내에 3가지 스타일의 버튼이 있다고 가정해보자. 그런 경우에 열거형(Enum)과 Configuration 확장을 이용하면 편하게 버튼을 사용할 수 있을 것 같다. 지금 당장에는 foregroundColor와 backgroundColor만 다르게 설정을 했지만 더 다양하게 커스텀이 가능할 것 같다.

@available(iOS 15.0, *)
extension UIButton.Configuration {
    
    enum SobokButtonStyle {
        case basic
        case sub
        case disabled
        
        var backgroundColor: UIColor? {
            switch self {
            case .basic:
                return UIColor(red: 24/255, green: 206/255, blue: 198/255, alpha: 1.0)
            case .sub:
                return UIColor(red: 228/255, green: 246/255, blue: 246/255, alpha: 1.0)
            case .disabled:
                return UIColor(red: 227/255, green: 232/255, blue: 235/255, alpha: 1.0)
            }
        }
        
        var foregroundColor: UIColor? {
            switch self {
            case .basic:
                return UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 1.0)
            case .sub:
                return UIColor(red: 0/255, green: 171/255, blue: 182/255, alpha: 1.0)
            case .disabled:
                return UIColor(red: 161/255, green: 169/255, blue: 174/255, alpha: 1.0)
            }
        }
    }
    
    static func sobokStyle(style: SobokButtonStyle) -> UIButton.Configuration {
        var configuration = UIButton.Configuration.filled()
        configuration.title = "확인"
        configuration.titleAlignment = .center
        configuration.baseForegroundColor = style.foregroundColor
        configuration.baseBackgroundColor = style.backgroundColor
        configuration.background.cornerRadius = 12
        return configuration
    }
}

 

---

 

자주 쓰이는 속성

이것은 좀 더 써보고 정리해봐야겠다. 지금 당장은 background.cornerRadius, foregroundColor, backgroundColor 정도가 가장 많이 쓰이는 것 같고, 이미지를 섞어쓸 때 디테일하게 inset 조정하는 것은 좀 더 탐구가 필요해보인다.