[WWDC21] - Meet the UIKit button system

sewoong·2023년 1월 18일

👨‍💻 WWDC 2021 'Meet the UIKit button system'를 읽고 정리한 글입니다.

Meet the UIKit button system

iOS에서 새로 업데이트 된 버튼에 대해 알아보자!

Buttons in iOS 15

버튼은 사용자의 입력을 요청하는 가장 일반적인 방법.
iOS 15에서 UIKit은 기본적으로 네 가지 스타일을 제공한다.(Plain / Gray / Tinted / Filled)
그리고 다음과 같은 기능들이 추가되었다.

Dynamic Type(supported by default)
Multiline
Accessibility
Easier customization -> UIButtonConfiguration

UIButtonConfiguration

Sign In 버튼을 구성하는 코드는 다음과 같다. 이 버튼은 매우 중요한 버튼이므로 우리는 이 버튼을 filled 스타일로 변경하여 더 눈에 띄게 만들어볼 것이다.

버튼의 configuration 프로퍼티에 .filled() 값을 입력하기만 하면 된다. 버튼의 타이틀과 이미지에 대한 코드를 각각 업데이트하지 않고 버튼 스타일을 쉽게 변경할 수 있다.

UIButtonConfiguration에는 스타일 말고도 다양한 옵션이 있다. Add to Cart 버튼은 지금 기본적인 버튼 스타일이지만 UIButtonConfiguration을 활용하여 UX를 강화할 것이다.

.tinted() 스타일의 config에 title, image, imagePlacement 설정을 할 수 있다.
버튼에 이미지를 추가하여 버튼이 어떤 역할을 하는지 한 눈에 파악할 수 있게 되었다.

여기에 추가적으로 적용할 두 가지 기능이 있다.
1. subtitle 표시
2. 버튼을 누르면 filled로 이미지 전환

이를 위해 적절한 시점에 이미지 속성을 업데이트해야 하기 떄문에 configurationUpdateHandler가 필요하다.
핸들러를 사용하면 좋은 점은 업데이트 코드를 중앙집중할 수 있다는 점이다.

configurationUpdateHandler를 호출하는 방법: setNeedsUpdateConfiuration() 메서드

showsActivityIndicator = true 버튼에 Activity Indicator가 활성화된다.

버튼의 내부 레이아웃 구조는 다음과 같다. contentInset, imagePadding 및 titlePadding을 통해 버튼 요소 사이의 공간을 조정할 수 있다.

이런 식의 구성 방법을 시멘틱 스타일이라고 한다.
시멘틱 스타일을 사용하면 버튼을 간단하게 만들 수 있다.

Check Out 버튼을 구성한다면 시멘틱 스타일과 configureUpdateHandler를 조합하여 설정하면 된다.

Toggle Buttons

iOS에서의 toggle 버튼
on/off 상태를 나타냄
UIControl에서 selected 상태를 유지

일반 버튼을 toggle 버튼으로 만드는 방법

button.changesSelectionAsPrimaryAction = true

Pop-up Button

여기서 버튼은 메뉴에 해당하고 하위 항목을 선택하면 색상과 이미지가 전환되고 버튼 또한 업데이트된다.

Pop-up 버튼을 구현하는 코드를 알아보자.
button의 메뉴에 목록을 등록한다. 특정 아이템을 기본으로 지정하려면 state: .on 옵션을 추가한다.
Pop-up 버튼을 구현하려면 showsMenuAsPrimaryAction을 true로 설정해야 한다.
또한 토글 버튼과 마찬가지로 changesSelectionAsPrimaryAction을 true로 변경해야 한다.

Mac Catalyst

Mac Catalyst로 빌드한 Mac 앱은 iPad 앱과 코드를 공유한다.
iOS식으로 만든 Pull-down, Pop-up, Toggle 버튼들은 자동으로 Mac 버전으로 적용된다.

iPad app button/Mac Catalyst button

preferredBehavioralStyle = .automatic 혹은 .pad으로 지정하여 기본 스타일을 변경할 수 있다.

UIMenu

Pop-up 버튼 예제에서 봤듯이 대부분의 기능은 UIMenu에 구축된다.
UIButtonConfiguration과 결합하여 다양한 스타일의 버튼을 생성할 수 있다.
또한 메뉴 내에서의 계층 구조 등 여러 기능들을 제공한다.

하위 메뉴를 구성하는 Pull-down 메뉴 바 코드이다.
메뉴 내 하위 메뉴에서 단일 선택을 지원하기 위해 options: .singleSelection 옵션을 적용한다.
menu.selectedElements 프로퍼티를 통해 선택된 하위 메뉴에 대해 쉽게 액세스할 수 있다.