iOS에서 새로 업데이트 된 버튼에 대해 알아보자!
버튼은 사용자의 입력을 요청하는 가장 일반적인 방법. iOS 15에서 UIKit은 기본적으로 네 가지 스타일을 제공한다.(Plain / Gray / Tinted / Filled) 그리고 다음과 같은 기능들이 추가되었다.
- Dynamic Type(supported by default)
- Multiline
- Accessibility
- Easier customization -> UIButtonConfiguration
Sign In 버튼을 구성하는 코드는 다음과 같다. 이 버튼은 매우 중요한 버튼이므로 우리는 이 버튼을 filled 스타일로 변경하여 더 눈에 띄게 만들어볼 것이다.
버튼의 configuration 프로퍼티에 .filled() 값을 입력하기만 하면 된다. 버튼의 타이틀과 이미지에 대한 코드를 각각 업데이트하지 않고 버튼 스타일을 쉽게 변경할 수 있다.
UIButtonConfiguration에는 스타일 말고도 다양한 옵션이 있다. Add to Cart 버튼은 지금 기본적인 버튼 스타일이지만 UIButtonConfiguration을 활용하여 UX를 강화할 것이다.
.tinted() 스타일의 config에 title, image, imagePlacement 설정을 할 수 있다.
버튼에 이미지를 추가하여 버튼이 어떤 역할을 하는지 한 눈에 파악할 수 있게 되었다.
여기에 추가적으로 적용할 두 가지 기능이 있다.
- subtitle 표시
- 버튼을 누르면 filled로 이미지 전환
이를 위해 적절한 시점에 이미지 속성을 업데이트해야 하기 떄문에 configurationUpdateHandler가 필요하다.
핸들러를 사용하면 좋은 점은 업데이트 코드를 중앙집중할 수 있다는 점이다.
configurationUpdateHandler를 호출하는 방법: setNeedsUpdateConfiuration() 메서드
showsActivityIndicator = true 버튼에 Activity Indicator가 활성화된다.
버튼의 내부 레이아웃 구조는 다음과 같다. contentInset, imagePadding 및 titlePadding을 통해 버튼 요소 사이의 공간을 조정할 수 있다.
이런 식의 구성 방법을 시멘틱 스타일이라고 한다. 시멘틱 스타일을 사용하면 버튼을 간단하게 만들 수 있다.
Check Out 버튼을 구성한다면 시멘틱 스타일과 configureUpdateHandler를 조합하여 설정하면 된다.
iOS에서의 toggle 버튼 on/off 상태를 나타냄 UIControl에서 selected 상태를 유지
일반 버튼을 toggle 버튼으로 만드는 방법
- button.changesSelectionAsPrimaryAction = true
여기서 버튼은 메뉴에 해당하고 하위 항목을 선택하면 색상과 이미지가 전환되고 버튼 또한 업데이트된다.
Pop-up 버튼을 구현하는 코드를 알아보자. button의 메뉴에 목록을 등록한다. 특정 아이템을 기본으로 지정하려면 state: .on 옵션을 추가한다. Pop-up 버튼을 구현하려면 showsMenuAsPrimaryAction을 true로 설정해야 한다. 또한 토글 버튼과 마찬가지로 changesSelectionAsPrimaryAction을 true로 변경해야 한다.
Mac Catalyst로 빌드한 Mac 앱은 iPad 앱과 코드를 공유한다. iOS식으로 만든 Pull-down, Pop-up, Toggle 버튼들은 자동으로 Mac 버전으로 적용된다.
iPad app button/Mac Catalyst button
preferredBehavioralStyle = .automatic 혹은 .pad으로 지정하여 기본 스타일을 변경할 수 있다.
Pop-up 버튼 예제에서 봤듯이 대부분의 기능은 UIMenu에 구축된다. UIButtonConfiguration과 결합하여 다양한 스타일의 버튼을 생성할 수 있다. 또한 메뉴 내에서의 계층 구조 등 여러 기능들을 제공한다.
하위 메뉴를 구성하는 Pull-down 메뉴 바 코드이다. 메뉴 내 하위 메뉴에서 단일 선택을 지원하기 위해 options: .singleSelection 옵션을 적용한다. menu.selectedElements 프로퍼티를 통해 선택된 하위 메뉴에 대해 쉽게 액세스할 수 있다.
App에서 better button을 만드는 방법!
- configuration을 추가하여 풍부한 스타일을 사용한다.
- 기존 Picker 스타일을 Toggle, Pop-up 버튼으로 대체한다.
- UIButton을 상속한 서브클래스를 대체한다.
- Mac Catalyst 자동 변환을 사용한다.