[ iOS ] UIButton.Configuration 사용하기(1) - Init, Title (iOS 15)

이 글은 iOS 15 버전을 기준으로 작성된 글입니다. 

 

 

 

---

 

 

 

UIButton.Configuration이란?

iOS 2.0+ 부터 UIButton의 모양은 setTitle(:for:), setImage(:for:) 과 같은 UIButton의 인스턴스 메서드를 통해 설정할 수 있었다.

하지만 iOS 15+ 부터는 UIButton.Configuration이 추가되면서 새로운 방법으로 UIButton의 모양과 행동을 설정할 수 있게 되었다. Configuration은 이전에 사용하던 메서드들과 함께 사용할 수 있으며, 그 메서드들을 아예 대체할 수도 있다. 

Configuration의 장점은 기존 버튼의 모양과 행동을 수정하고 싶을 때 코드를 일일이 수정할 필요없이 새로운 Configuration을 구성한 뒤 UIButton의 configuration 프로퍼티에 할당하면 된다.

 

UIButton.Configuration 공식문서

[ iOS 읽기 ] UIButton.Configuration

 

UIButton의 configuration 프로퍼티 공식문서

[ iOS 읽기 ] UIButton의 configuration 프로퍼티

 

 

 

 

 

UIButton.Configuration을 사용해 버튼 구성하기

 

1. Creating Configuration

iOS 15버전부터 UIButton은 여러 모양으로 업데이트되었다. Configuration에서는 해당 객체를 생성할 시 아래와 같은 모양을 이니셜라이저로 사용한다.

 

static func plain() -> UIButton.Configuraton	투명한 배경을 가진 버튼
static func gray() -> UIButton.Configuraton	회색 배경을 가진 버튼
static func tinted() -> UIButton.Configuraton	원하는 색으로 투명한 배경을 설정할 수 있는 버튼
static func filled() -> UIButton.Configuraton	원하는 색으로 불투명한 배경을 설정할 수 있는 버튼
static func boderless() -> UIButton.Configuraton	테두리가 없는 모양의 버튼. plain()으로 대체될 수 있다.
static func bordered() -> UIButton.Configuraton	테두리가 있는 모양의 버튼. gray()로 대체될 수 있다.
static func borderedTinted() -> UIButton.Configuraton	색조와 테두리가 있는 버튼. tinted()로 대체될 수 있다.
static func borderedProminent() -> UIButton.Configuraton	두드러지고 테두리가 있는 버튼. filled()로 대체될 수 있다.

 

Configuration은 객체를 생성할 때 위와 같이 초기의 상태로 생성할 수도 있지만, 이미 Configuration이 만들어져 있는 버튼을 사용해 객체를 생성할 수도 있다.

func updated(for button: UIButton) -> UIButton.Configuraton

주어진 버튼에 대해 업데이트된 Configuration을 반환한다.

 

        var button = UIButton()
        var configuration = UIButton.Configuration.plain()
        
        button.configuration = configuration

 

 

또는 UIButton 생성 시 바로 Configuration을 할당해 줄 수도 있다.

init(     configuration: UIButton.Configuration,     primaryAction: UIAction? = nil )

configuration : 버튼의 configuration primaryAction : primaryActionTriggered 제어 이벤트로 수행되는 동작. addAction(_:for:)을 통해 지정할 수도 있다. 만약 primaryAction 매개변수가 title과 image를 포함한다면, 이 메서드는 그 configuration을 복사해 버튼 모양에 적용한다.

 

 

 

 

 

 

 

2. Configuring titles

iOS 15 버전부터는 title과 subTitle을 제공한다. Title과 SubTitle은 아래 프로퍼티를 사용해 간단히 지정해 줄 수 있다.

var title: String? { get set }	이 프로퍼티는 attributedTitle 프로퍼티의 문자열 값과 일치한다. configurationUpdateHandler 또는 updateConfiguration().을 사용해 버튼 상태에 따라 title을 변경할 수 있다.
var subtitle: String? { get set }	이 프로퍼티는 attributedSubtitle 프로퍼티의 문자열 값과 일치한다. configurationUpdateHandler 또는 updateConfiguration().을 사용해 버튼 상태에 따라 title을 변경할 수 있다.

 

Title과 SubTitle의 스타일을 사용자 지정하려면 AttributedString 구조체를 사용해 객체를 생성한 후 아래 프로퍼티에 할당하면 된다.

var attributedTitle: AttributedString? { get set }	configuration은 이 프로퍼티의 문자열 값을 title과 일치시킬 수 있다. configurationUpdateHandler 또는 updateConfiguration().을 사용해 버튼 상태에 따라 title을 변경할 수 있다.
var attributedSubtitle: AttributedString? { get set }	configuration은 이 프로퍼티의 문자열 값을 subtitle과 일치시킬 수 있다. configurationUpdateHandler 또는 updateConfiguration().을 사용해 버튼 상태에 따라 title을 변경할 수 있다.

 

 

        var attributedTitle = AttributedString("타이틀")
        attributedTitle.font = .systemFont(ofSize: 25, weight: .bold)
        attributedTitle.foregroundColor = UIColor.black
        
        //단락 간격 조정
        let paragraphTitle = NSMutableParagraphStyle()
        paragraphTitle.lineSpacing = 0.3 * (attributedTitle.font?.lineHeight ?? 1)
        paragraphTitle.lineBreakStrategy = .hangulWordPriority //줄 바꿈 전략 설정
        
        attributedTitle.paragraphStyle = paragraphTitle
        
        configuration.attributedTitle = attributedTitle

 

 

Title과 SubTitle의 간격과 alignment는 아래의 프로퍼티를 사용해 설정할 수 있다.

var titlePadding: CGFloat { get set }	Title과 SubTitle 간격 조정하는 프로퍼티
var titleAlignment: UIButton.Configuration.TitleAlignment { get set }	버튼에 Title과 SubTitle을 배치하기 위해 사용하는 프로퍼티 case automatic, leading, trailing, center

 

 

 

 

 

---