[Swift] UIButton Configuration

UIButton Configuration

iOS 15로 업데이트 이후로 UIButton을 정의하는 방법이 다양해졌다.
업데이트 된 스타일을 채택하여 인터페이스와 자연스럽게 어울리는 버튼을 만들 수 있게 되었다.

기존에 UIButton은 .setTitle / .setImage 등의 메서드를 사용해서 버튼의 모양을 디자인했지만,
iOS 15에서 추가된 UIButton.Configuration은 기본 구성을 조금 더 쉽고, 다양하게 만들 수 있도록 도와준다.

configuration은 크게 4가지가 있다.

스토리보드에서 버튼을 생성할 때, 보고 그냥 지나쳤던 다른 버튼들이 있을 것이다.

1. plain (배경이 투명한 버튼)

static func plain() -> UIButton.Configuration

→ Creates a configuration for a button with a transparent background.

2. Gray (회색 배경의 버튼)

static func gray() -> UIButton.Configuration

→ Creates a configuration for a button with a gray background.


3. Tinted (색조가 있는 배경색으로 구성된 버튼)

static func tinted() -> UIButton.Configuration

→ Creates a configuration for a button with a tinted background color.


4. Filled (색조 색상으로 배경이 채워진 버튼)

static func filled() -> UIButton.Configuration

→ Creates a configuration for a button with background filled with the button's tint color.


이외에도 아래와 같이 몇가지 구성들이 더 있다.

static func borderless() -> UIButton.Configuration
// Creates a configuration for a button that has a borderless style.
// 테두리 없는 스타일의 버튼

static func bordered() -> UIButton.Configuration
// Creates a configuration for a button that has a bordered style.
// 테두리 스타일이 있는 버튼

static func borderedTinted() -> UIButton.Configuration
// Creates a configuration for a button that has a tinted, bordered style.
// 색조와 테두리 스타일이 있는 버튼

static func borderedProminent() -> UIButton.Configuration
// Creates a configuration for a button that has a prominent, bordered style.
// 눈에 잘 띄는 테두리 스타일의 버튼

위와 같이 버튼 배경 속성을 포함해서 버튼에 들어갈 Title(제목)등에 대한 구성, 이미지 구성, 버튼의 콘텐츠 영역에서의 레이아웃 구성 등을 configuration 스타일을 채택해서 새로운 버튼 동작과 모양을 조절할 수 있다.

---

 

바로 configuration 구조체를 확장해서 버튼을 한번 만들어보려고 한다.

extension UIButton.Configuration {
    static func yegrStyle() -> UIButton.Configuration {
        var configuration = UIButton.Configuration.filled()
        configuration.title = "Swift"
        configuration.subtitle = "서브타이틀 입니다요"
        configuration.titleAlignment = .center
        configuration.baseBackgroundColor = .systemGreen // 버튼 배경색
        configuration.baseForegroundColor = .white // title 및 image 색상
        configuration.titlePadding = 5 // title 사이 간격
        configuration.image = UIImage(systemName: "leaf.fill")
        configuration.imagePlacement = .trailing // 이미지 위치
        configuration.imagePadding = 8
        configuration.cornerStyle = .capsule // capsule, dynamic, fixed, large, medium, small
        return configuration
    }
}

cornerStyle

아래와 같이 이미지 대신 indicator 스타일를 추가할 수도 있다.

configuration.activityIndicatorColorTransformer = .grayscale // grayscale, monochromeTint, preferredTint
configuration.showsActivityIndicator = true

grayscale, preferredTint 둘의 차이는 잘 모르겠다.. 둘다 white 색상 indicator..?
monochromeTint는 darkgray? black 색상이다.

이 디자인은 데이터 받아오는 속도가 느린 상태이거나, 사용자에게 진행중인 상태를 알려줘야할 때(?) 사용하면 좋을 것 같다.

이 밖에도 여러가지 configuration이 있으니, 하나씩 눌러서 설정해가면서 '이런게 있구나~'하고 알아두면 좋을 것 같다.

---

위와 같이 extension으로 원하는 스타일대로 설정한 후,

import UIKit
import SnapKit

class ViewController: UIViewController {
    let swiftButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configureUI()
    }

    func configureUI() {
    	view.backgroundColor = .systemGray5
        view.addSubview(swiftButton)
        let safeArea = view.safeAreaLayoutGuide
        swiftButton.snp.makeConstraints {
            $0.top.equalTo(safeArea).offset(200)
            $0.horizontalEdges.equalTo(safeArea).inset(80)
            $0.height.equalTo(50)
        }
        
        swiftButton.configuration = .yegrStyle()
    }
}

버튼이름.configuration = 만들었던 UIButton.Configuration

이렇게 해주면! 아래 화면처럼 버튼이 완성된 걸 확인할 수 있다.

 

---