이전 포스트에서는 UIButtonConfiguration을 중심으로 iOS 15에서 버튼의 디자인을 편리하게 할 수 있는 방법에 대해 알아보았습니다.
이번 포스트에서는 WWDC - Meet the UIKit Button System의 후반 부분! 버튼에 추가된 다양한 기능들에 대해 정리해보겠습니다.
대부분의 버튼은 simple push button으로 존재하는데 때때로 버튼은 추가 동작을 필요로 할 때가 있습니다.
그 첫 번째가 Toggle 입니다.
Toggle Button
Toggle button은 선택한 상태를 유지하도록 하여 버튼을 누를 때마다 자동으로 켜고 끕니다. 또 on/off 상태에 대한 디자인을 커스텀할 수 있습니다. 이전 포스트에서 정리한 UIButtonConfiguration을 사용해서 말이죠.
위와 같은 toggle 형식의 버튼을 구현하기 위해 버튼을 선택한 상태를 읽거나 설정할 수 있는 새로운 속성이 생겼습니다.
바로 showsMenuAsPrimaryAction 라는 속성입니다. 아래에서 다시 얘기해보죠.
일단 영상에서 나온 예시를 통해 toggle button에 대해 더 쉽게 알아봅시다.
아래 그림에서 상품에 대한 리스트를 볼 수 있는 화면이 존재합니다.
그리고 toggle button 을 통해 재고가 있는 제품에 대하여 필터링할 수가 있습니다. 빨간색으로 원을 그린 부분이 toggle button 이에요.
자 이제는 이걸 어떻게 만드는 지 코드를 살펴보겠습니다.
// 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()위에서 button.changesSelectionAsPrimaryAction = true 라는 코드 보이시나요?
앞서 말씀드렸던 iOS15에서 새로 나온 속성으로 위의 코드는 버튼을 누를 때 상태가 저장되는 코드입니다.
이 코드로 인해 일반 버튼이 toggle button으로 바뀌게 됩니다.
그리고 UIButton 초기화에서 primaryAction 프로퍼티를 통해 UIAction을 넣어주고 있죠. 아주 쉽죠?
다음으로 볼 버튼은 위에서처럼 단지 두 가지 상태인 on / off가 아닌 조금 더 많은 옵션을 필요로 할 때 사용하는 버튼입니다.
바로 Pop-up button!
Pop-up button
Pop-up 버튼은 pull-down 버튼과 유사합니다. pull-down 버튼(UIMenu)은 iOS14에서 나온 component 입니다.
그럼 둘의 차이점은 뭘까요?
둘 다 UIMenu로, 버튼을 누르면 여러 메뉴가 나타나는 데, pop-up button은 메뉴 중 오직 하나만 선택되도록 한다는 것이 차이점입니다.
pop-up button은 메뉴가 할당되고, 이를 길게 누르지 않고 그냥 탭만 해도 이렇게 메뉴들을 나오게 하기 위해서는 showMenuAsPrimaryAction 속성을 true로 설정해야 합니다.
UIMenu에서 사용되는 속성이에요.
영상에 나온 예시를 보시죠.
아래 그림과 같이 구매할 상품에 대해 pop-up button을 통해 색상을 지정하고 지정된 색상의 메뉴들을 불러오도록 해줍니다.
해당 예시를 코드로 살펴보죠.
// 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코드를 보시면 showsMenuAsPrimaryAction 속성을 true로 설정해줍니다.
그리고 아까 toggle button에서도 사용됐던 changesSelectionAsPrimaryAction 속성을 true로 설정하는 코드가 있습니다.
해당 속성이 뭐라고 했죠?
네 버튼을 누를 때 상태가 저장되게 하는 속성이라고 했죠! 해당 코드가 없다면 여러 메뉴들이 선택 가능하고 선택된 모든 메뉴들의 state가 on인 상태가 되어 모두 체크 표시로 나타납니다.
이렇게 두 개의 속성만 잘 작성하면 나머지는 초기값과 상태 변경에 따른 로직만 추가해주면 됩니다.
또 pull-down button과 다른 점이 UIAction에서 state 프로퍼티를 사용해서 첫 번째 메뉴가 아닌 다른 default selection을 설정할 수도 있습니다.
selectedElements를 얻어오면 현재 선택 항목을 얻어올 수 있으며, 항상 하나의 요소만 얻을 수 있겠죠?
pop-up button과 pull-down button은 스토리보드 상에서도 설정이 가능합니다.
Interface builder를 사용한 새로운 버튼 시스템과 타입을 알고 싶다면 다른 WWDC 영상(Build interfaces with style)을 참고하라고 하네요.
Mac Catalyst
이러한 버튼들은 Mac Catalyst에서도 자동으로 작동한다고 하네요. 디자인의 차이는 조금 있습니다.
때로 Mac에서 iPad 형태의 버튼을 원할 수도 있는 데 이 때는 preferredBehavioralStyle 속성을 .automatic에서 .pad로 변경 시켜주면 됩니다. UIBehavioralStyle에는 pad와 mac, automatic 이 있어요.
이렇게 WWDC - Meet the UIKit button system 영상을 보고 정리를 해보았습니다.
새로 나온 버튼의 기능들에 대해 공부해 봐야지 생각만 하고 iOS15를 타겟으로 프로젝트를 진행을 해본 적이 없어 미뤄두다 이렇게 정리하게 되니 재밌네요
다음 글에서는 iOS의 앱 생명주기에 대해 정리해볼까 해요. AppDelegate와 SceneDelegate의 역할에 대해서 명확히 알고 있는 것 같지가 않아서 새싹에서 배운 내용을 토대로 공부해보겠습니다. 다른 내용을 먼저 들고 올 수 있어요 ㅎㅎ
읽어주셔서 감사합니다!
[참고]
