Meet the UIKit button system

We’re going to be discussing all the ways that UIKit makes buttons better in iOS 15.

1. UIButton Styles

iOS 15에서 UIKit은 UIButton의 기본 스타일 4가지를 제공한다.

2. UIButtonConfiguration

iOS 15에서 UIButton은 'more customizable'하기 때문에 우리는 원하는 스타일을 정확하게 얻을 수 있게 되었다.

Example 1.

"Sign In" 타이틀을 가진 plain system button 생성하기.

// Sign In Button 생성
let signInButton = UIButton(type: .system)

signInButton.setTitle("Sign In", for: [])

'filled' 스타일 적용한 버튼 생성.

// Sign In Button 생성
let signInButton = UIButton(type: .system)
signInButton.configuration = .filled() // 버튼 스타일 적용
signInButton.setTitle("Sign In", for: [])

Example 2.

'Add to Cart' button 생성.

// 'Add to Cart' button 생성

// tinted 스타일 적용
var config = UIButton.Configuration.tinted()
config.title = "Add to Cart"
config.image = UIImage(system: "cart.badge.plus")
config.imagePlacement = .trailing
addToCartButton = UIButton(configuration: config,
	                   primaryAction: nil)

Example 3.

'Add to Cart' Button에 두 가지 기능 추가하기

• UIButtonConfiguration의 subtitle 기능
• Button을 눌렀을 때 filled style로 변경하기

이 두 가지 기능을 추가하기 위해서는 Configuration Update Handler 사용해야 한다.

Button을 눌렀을 때 image의 style을 filled 로 변경.

// configurationUpdateHandler로 image와 subtitle 설정
addToCartButton.configurationUpdateHandler = {
    [unowned self] button in

    // 기존 configuration으로 시작
    // (기존 configuration을 변경해 적용할 수도 있고
    // 새로운 configuration을 생성해 적용할 수도 있다.)
    var config = button.configuration 

    // 버튼을 누르면 isHighlighted는 true 반환하고
    // 이미지는 "cart.fill.badge.plus"로 설정된다.
    config?.image = button.isHighlighted
        ? UIImage(systemName: "cart.fill.badge.plus")
        : UIImage(systemName: "cart.badge.plus")
          
     // 변경된 configuration 적용
     button.configuration = config 
}

UIButtonConfiguration의 subtitle 기능.

private var itemQuantityDescription: String? {
    didSet {
        // itemQuantityDescription의 값이 변경될 때 
        // configurationUpdateHandler를 호출하기 위한 방법
        addToCartButton.setNeedsUpdateConfiguration()
    }
}

// configurationUpdateHandler로 image와 subtitle 설정
addToCartButton.configurationUpdateHandler = {

    ...

    // subtitle 업데이트 코드 추가
    config?.subtitle = self.itemQuantityDescription 

    ...

}

Example 4.

showActivityIndicator

이제 Button에 activity indicator를 표시함으로써 앱 사용에 대한 피드백을 쉽게 제공할 수 있게 되었다.
showsActivityIndicator를 true로 설정하기만 하면 activity indicator를 보여줄 수 있고 필요한 경우 이미지를 교체할 수도 있다.

// Example
var isCartBusy = false {
    didSet {
        checkoutButton.setNeedsUpdateConfiguration()
    }
}
   
checkoutButton.configurationUpdateHandler = {
    [unowned self] button in

    var config = button.configuration

    config?.showsActivityIndicator = self.isCartBusy

    button.configuration = config
}

Example 5.

Toggle Button

iOS의 Toggle Button 개념은 새로운 것이 아니다. 음악 앱의 가사 버튼, 캘린더의 UIBarButtonItem에서 본 적이 있을 것이다.
changesSelectionAsPrimaryAction을 true로 설정하면 Toggle Button을 사용할 수 있다.

// Example
let toggleAction = UIAction(title: "Toggle On & Off") { _ in
    self.toggleAction()
}

toggleButton = UIButton(primaryAction: toggleAction)
toggleButton.changesSelectionAsPrimaryAction = true

3. Pop-up Butons & Menus

Pop-up Butons, Menus에 대한 내용은 아래 링크 참고
https://developer.apple.com/videos/play/wwdc2021/10064/?time=736

4. Extension: vertical alignment Button

UIButton의 image와 text를 세로 정렬 시키는 방법

// iOS 14
extension UIButton {
  func adjustVerticalLayout(_ spacing: CGFloat = 0) {
    let imageSize = imageView?.frame.size ?? .zero
    let titleLabelSize = titleLabel?.frame.size ?? .zero

    var config = UIButton.Configuration.plain()

    titleEdgeInsets = UIEdgeInsets(top: 0,
                                   left: -imageSize.width,
                                   bottom: -(imageSize.height + spacing),
                                   right: 0)

    imageEdgeInsets = UIEdgeInsets(top: -(titleLabelSize.height + spacing),
                                   left: 0,
                                   bottom: 0,
                                   right: -titleLabelSize.width)
  }
}

// iOS 15
var config = UIButton.Configuration.tinted()
config.title = "Button Title"
config.image = UIImage(systemName: "star.fill")
config.imagePlacement = .top

customButton = UIButton(configuration: config,
                        primaryAction: nil)

---

cf.
https://developer.apple.com/videos/play/wwdc2021/10064/?time=736