swift UIButton.Configuration 개념 대해 공부해보자

오늘 UIButton 만들면서 버튼을 한번에 어떻게 만들까 고민이 많았다. 

그러면서 찾아보게 된 기능 ~ 

이거 쓰면 조금더 수월하게 사용할 수 있다는 생각을 했다. 

단 ios 15 + 가능하다는 것을 참고하시면 좋다... 다 만들고 안되면 슬프니깐 

 

• iOS 15+
• 버튼들을 유형별로 일관성 있는 방식으로 손쉽게 사용할 수 있게하기 위함이다 얼마나 좋은가 반복적으로 안적어도 되니

 

UIButton Configuration의 주요 속성

• title: 버튼에 표시되는 텍스트를 지정합니다. NSAttributedString 형식으로 설정할 수 있어 텍스트의 스타일링과 포맷팅을 자유롭게 적용할 수 있습니다. 또한, 버튼의 상태별로 다른 텍스트를 설정할 수도 있습니다.
• image: 버튼에 표시되는 이미지를 지정합니다. UIImage 형식으로 설정할 수 있으며, 이미지의 크기, 렌더링 모드 등을 조정할 수 있습니다. 버튼의 상태에 따라 다른 이미지를 사용할 수도 있습니다.
• preferredSymbolConfiguration: 버튼에 표시되는 시스템 아이콘(symbol)의 구성을 지정합니다. SF Symbols를 사용하여 다양한 아이콘을 쉽게 추가할 수 있습니다. 아이콘의 크기, 색상, 가중치 등을 설정할 수 있습니다.
• backgroundColor: 버튼의 배경색을 설정합니다. UIColor 형식으로 설정할 수 있으며, 다양한 색상 및 투명도를 사용할 수 있습니다. 버튼의 상태에 따라 다른 배경색을 설정할 수도 있습니다.
• cornerRadius: 버튼의 모서리 반지름을 지정합니다. CGFloat 형식으로 설정하며, 버튼의 모서리를 둥글게 만들 수 있습니다. 원하는 둥근 정도로 조절하여 버튼의 모양을 개성있게 만들 수 있습니다.

다른 것은 적용이 안될수 있으니 참고하면 좋아요

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

 

오늘도 하나 배웠다. 조만간 써먹어 봐야겠다~ 

버튼을 많이 만들때 좋을 것 같다.