[iOS - swift] UIButton.Configuration 개념 (#subtitle, #showsActivityIndicator)

UIButton.Configuration 개념

• iOS 15+
• 버튼들을 유형별로 일관성 있는 방식으로 손쉽게 사용할 수 있게하기 위함

UIButton.Configuration 사용 방법

• UIButton.Configuration 객체를 만들고, 이 객체로 UIButton을 초기화 하는 방식

var config = UIButton.Configuration.plain()
config.title = "\(i) button " + "(" + names[i] + ")"
config.subtitle = "subtitle"

let button = UIButton(configuration: config)

• 컴포넌트화 할 때, Configuration과 UI 자체를 코드로 분리하여 사용하는쪽에서 일관성있고 사용하기 편리하게 하기위해서 애플에서 iOS 15부터 Configuration을 UIButton하위에 정의한 것

UIButton.Configuration 종류

• configuration의 종류는 버튼의 목적에 따라 분류한 것이 아닌, 오로지 버튼의 생김새에 따라 분류

var configs = [
    UIButton.Configuration.plain(),
    .tinted(),
    .gray(),
    .filled(),
    .borderless(),
    .bordered(),
    .borderedTinted(),
    .borderedProminent()
]

Configuration 분류 (1) 배경 색상에 따라 분류

var configs = [
    UIButton.Configuration.plain(),
    .tinted(),
    .gray(),
    .filled()
]

• plain: 투명 배경색의 버튼

.plain 스타일

• tinted: 틴트된 배경색의 버튼

.tinted 스타일

• gray: 회색 배경색의 버튼

.gray 스타일

• filled: 버튼의 tint 컬러로 배경색상을 채운 스타일

.filled 스타일

Configuration 분류 (2) border 스타일에 따라 분류

var configs = [
    UIButton.Configuration..borderless(),
    .bordered(),
    .borderedTinted(),
    .borderedProminent()
]

• border

.border 스타일

• borderless 

.borderless 스타일

• borderedTinted

.borderedTinted 스타일

• bordereProminen

.borderedProminen 스타일

UIButton.Configuration에서 제공하는 새로운 기능

• title, subtitle, image를 제공

var config = UIButton.Configuration.plain()
config.title = "title"
config.subtitle = "subtitle"
config.image = UIImage(systemName: "house")

let button = UIButton(configuration: config)

• title, subtitle, image간의 간격 설정 
  • titlePadding: 타이틀과 서브타이틀 간격
  • imagePadding: 타이틀과 이미지와의 간격

config.imagePadding = 8
config.titlePadding = 12

간격 적용

• activityIndicator 제공
  • 단, indicator가 노출되어도 버튼 탭이 가능하므로 disable은 따로 설정 필요

config.showsActivityIndicator = true

activity indicator

* 전체 코드: https://github.com/JK0369/ExButtonConfiguration

* 참고

https://developer.apple.com/documentation/uikit/uibutton/configuration