Meet the UIKit button system (WWDC21) 을 보고 정리해본 글임을 참고해주세요.

Buttons

iOS 15 환경에서 button 을 어떻게 더 좋게 만들 수 있는지 알아보고자 합니다.

4 basic styles (iOS 15)

기본적으로 위 4가지의 basic 스타일을 제공

More features

• Dynamic type: default
• Mulitline: 버튼 시스템에 자동 적용
• Accessibility: 발생하는 모든 버튼에 접근성 강화
• Easier customization

그러면 바뀐 게 뭐냐?

1. Button configuration

// Create the Sign In button

let signInButton = UIButton(type: .system
signInButton.configuration = .filled() // ✅ NEW
signInButton.setTitle("Sign In", for: [])

filled() 메서드를 통해, 버튼의 색조 색상으로 채워진 배경으로 버튼을 구성합니다.

• developer.apple - filled()

more than just style!1₩
스타일 말고도 다른 게 있다면!

// Create the Add to Cart button

var config = UIButton.Configuration.tinted() // ✅ NEW
config.title = "Add to Cart"

addToCartButton = UIButton(configuration: config, primaryAction: ...)

Add to Cart 버튼에 tinted 스타일 적용

// Create the Add to Cart button

var config = UIButton.Configuration.tinted()
config.title = "Add to Cart"
config.image = UIImage(systemName: "cart.badge.plus" // ✅ NEW
config.imagePlacement = .trailing // ✅ NEW
addToCartButton =  UIButton(configuration: config, primaryAction: ...)

버튼에 이미지를 추가하고, 버튼 이미지 위치를 .trailing 에 위치

// Customize image with a configurationUpdateHandler

addToCartButton.configurationUpdateHandler = { [unowned self] button in 

	var config = button.configuration
    config?.image = button.isHighlighted ? UIImabe(systemName: "cart.fill.badge.plus") : UIImage(systemName: "cart.badge.plus"
    
   	button.configuration = config

developer.apple - configurationUpdateHandler

• 인스턴스 프로퍼티인 configurationUpdateHandler 를 통해 버튼이 눌렸을 때 변하는 것도 설정이 가능하다.
• configurationUpdateHandler 는 cell 구성에 대한 업데이트를 처리하는 block 이다.
• UIControl의 Instance Property 인 isHighlighted 의 값이 true 가 되면 UIButton의 상태 가 바뀌기 때문에 configurationUpdateHandler 이 호출되어 처리된다.

Activity indicator

showActivityIndicator = true 로 만들어주면 activity indicator 를 버튼에 추가하고 App 사용자에게 현재 무언가 일어나고 있다는 걸 알릴 수 있다.

Semantic styling

이전에는 기존 버튼을 재구성 하려면 아래사항을 바꿨어야 했다.

• baseBackgroundColor
• BaseForegroundColor
• cornerStyle
• buttonSize

하지만 지금은 아래의 형태에 따라 간단하게 커스텀이 가능하다.

• Normal
• Pressed
• Disabled

2. Toggle buttons

기존에 toggle buttons 이 없던 게 아니다.캘린더의 UIBarButtonItem 에서도 볼 수 있으며, toggle buttons 을 통해 요일 세부 정보를 on-off 가능하다.

iOS 15 에서는 toggle buttons 바뀐 점

위 그림처럼 In Stock Only 버튼을 선택 or 비선택 의 상태로 설정가능하다. 이건 label 이 아니기 때문에 사용자에게 확실하게 보여줄 수 있다.

// Toggle button

// UIAction setup
let stockToggleAction = UIAction(title: "In Stock Only") { _ in
    toggleStock()
}

// The button
let button = UIButton(primaryAction: stockToggleAction)

button.changesSelectionAsPrimaryAction = true // ✅ 

// Initial state
button.isSelected = showingOnlyInStock()

3. Pop-up Buttons

• 기존에 pull-down buttons 과 비슷한 형태
• pop-up buttons 클릭시 하나의 항목 선택 가능
• 선택된 항목을 화면에 표시

// Pop-up button

let colorClosure = { (action: UIAction) in
    updateColor(action.title)
}

let button = UIButton(primaryAction: nil)

button.menu = UIMenu(children: [
    UIAction(title: "Bondi Blue", handler: colorClosure),
    UIAction(title: "Flower Power", state: .on, handler: colorClosure)
])

button.showsMenuAsPrimaryAction = true // ✅ 

button.changesSelectionAsPrimaryAction = true

// Update to the currently set one
updateColor(button.menu?.selectedElements.first?.title)

// Update the selection
(button.menu?.children[selectedColorIndex()] as? UIAction)?.state = .on

참고

Meet the UIKit button system (WWDC21)
developer.apple - filled()
developer.apple - configurationUpdateHandler