UIKit 버튼 설정, UIButtonConfiguration 개발자문서 개요

 

UIButtonConfiguration이 무엇일까?

UIButtonConfiguration 은 UIKit으로 UI를 구성할때 사용할 수 있는 클래스 객체입니다. UIButton의 버튼, 콘텐츠 동작 및 모습 등을 구체화하기 위한 설정을 정의할 수 있도록 합니다.

이 기능을 objective-c에서는 클래스, swift에서는 UIButton.Configuration 타입의 구조체 방식으로 제공을 하고 있었어요. 양쪽 언어 전부 iOS15 이상부터 지원을 해요.

 

 

---

UIButtonConfiguration Overview

Overview 이어서 보겠습니다. UIButtonConfiguration을 사용해서 버튼을 업데이트하고, 설정할 수 있다고 해요. 기존에 제공하던 기능과도 같이 사용이 가능한데, 기존에 버튼 타이틀 설정에 사용했던 setTitle 메서드와 같은 설정을 예시로 들고 있습니다. deprecated 된 속성을 제외한 기존 기능들과 함께 사용해도 되기때문에 같이 사용하다가 UIButtonConfiguration을 사용하고 싶다면, configuration을 정의해서 설정하면 됩니다.

 

 

---

UIButtonConfiguration이 나오며 생긴 warning...

앞서 언급했듯이, UIButtonConfiguration은 iOS 15.0 이상 부터 지원하며, 기존에 contentEdgeInsets을 설정해서 사용했다면, 노란경고를 경험하실 수 있어요. 위와 같이 UIButtonConfiguration을 사용하면 contentEdgeInsets이 무시된다면서 contentEdgeInsets가 deprecated 되었음을 알려줍니다.

UIKit 기반으로 iOS15+ 타겟으로 개발하실 거라면, 전체적으로 UIButtonConfiguration으로 버튼 동작, 모습을 정의하도록 변경할 필요가 있어보여요.

 

 

---

UIButton.Configuration Use Case

아래와 같이 UIButton을 정의할때 configuration 멤버를 다양한 옵션으로 초기화해서 설정할 수 있는데요. 이때 사용되는 UIButton의 configuration 멤버는 UIButton.Configuration 타입의 구조체로 되어있어요.

plain, bordered, borderless, borderedProminent, borderedTinted 등 다양한 타입메서드를 사용해서 UIButton.Configuration 타입의 configuration 멤버 초기화를 할 수 있고, configuration을 접근해서 contentInsets, title, titleAlignment 등 다양한 속성을 지정할 수 있습니다.

final class MyView: UIView {
    private let myButton: UIButton = {
        let button = UIButton()
        button.configuration = .plain()
//        button.configuration = .bordered()
//        button.configuration = .borderless()
//        button.configuration = .borderedProminent()
//        button.configuration = .borderedTinted()
        button.configuration?.contentInsets = .init(
            top: 0,
            leading: 0,
            bottom: 0,
            trailing: 0
        )
        return button
    }()
}

 

 

아래처럼 UIButton.Configuration 타입의 구조체 인스턴스를 선언해서 미리 설정을 해두었다가 필요할때 button의 configuration 멤버에 설정할 수도 있습니다. 다수의 버튼에 동일한 UIButton.Configuration 설정이 필요하거나 할때 유용할 수 있겠네요. 

final class MyView: UIView {
    private let myButton: UIButton = {
        let button = UIButton()
        button.configuration = .plain()
//        button.configuration = .bordered()
//        button.configuration = .borderless()
//        button.configuration = .borderedProminent()
//        button.configuration = .borderedTinted()
		var configuration: UIButton.Configuration = .filled()
        configuration.background = .clear()
        configuration.contentInsets = .zero
        configuration.baseBackgroundColor = .red
        configuration.baseForegroundColor = .blue // 미리 정의해놓은 configuration을 설정 가능
        return button
    }()
}

 

 

UIButton.Configuration 초기화 시 사용 가능한 타입 메서드 옵션은 위와 같이 존재하는데요. 하나하나 사용해보면서 그 특징을 알아보면 좋을 것 같네요. 🤔

 

 

---

오늘은 UIButton의 contentEdgeInsets 멤버 설정 코드에서 deprecated 경고가 발생했던게 기억나서, 이걸 대체해서 iOS15 이상에서 사용 가능한 UIButtonConfiguration(UIButton.Configuration)에 대한 개발자문서 개요를 읽어봤어요.

실제 대체를 해보면서 UIButton의 동작이나 모습이 동일하게 잡히는지, 그 과정에서 추가적인 고려사항이 필요할지는 더 자세히 만져보면서 알아봐야할것같아요. 조금이라도 도움이 되는 포스팅이길 바라며... 마칠게요. 감사합니다! 😊