-
Date: [[June 9th, 2021]]
-
Conference: [[WWDC 2021]]
-
Speaker(s): [[David Duncan]]
-
Video: https://developer.apple.com/videos/play/wwdc2021/10064/
-
Slides:
-
Tags: [[Talks]] [[UIButton]] [[UIKit]]
- Buttons
- New Styles
- Gray
- Tinted
- Filled
- More Features
- Dynamic Type
- Multiline
- Accessibility
- Easier Customization
- Button configuration
- Demo
- The simplest version
- `signInButton.configuration = .filled()`
- Advanced
- Button with a trailing image
-
```swift
// Create the Add to Cart button
var config = UIButton.Configuration.tinted()
config.title = "Add to Cart"
config.image = UIImage(systemName: "cart.badge.plus")
config.imagePlacement = .trailing
addToCartButton = UIButton(configuration: config,
primaryAction: …)
```
-
```swift
// Customize image and subtitle with a configurationUpdateHandler
addToCartButton.configurationUpdateHandler = {
[unowned self] button in
var config = button.configuration
config?.image = button.isHighlighted
? UIImage(systemName: "cart.fill.badge.plus")
: UIImage(systemName: "cart.badge.plus")
config?.subtitle = self.itemQuantityDescription
button.configuration = config
}
```
-
```swift
// Customize image and subtitle with a configurationUpdateHandler
addToCartButton.configurationUpdateHandler = {
[unowned self] button in
var config = button.configuration
config?.image = button.isHighlighted
? UIImage(systemName: "cart.fill.badge.plus")
: UIImage(systemName: "cart.badge.plus")
config?.subtitle = self.itemQuantityDescription
button.configuration = config
}
```
-
```swift
// Update addToCartButton when itemQuantityDescription changes
private var itemQuantityDescription: String? {
didSet {
addToCartButton.setNeedsUpdateConfiguration()
}
}
```
- Set `showsActivityIndicator` to true to show a loading button
- Layout
- `contentInsets`
- `titlePadding`
- `imagePadding`
- Semantic Styling
- baseBackgroundColor
- baseForegroundColor
- cornerStyle
- buttonSize
- Toggle Buttons
-
```swift
// 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()
```
- Pop-Up Buttons
-
```swift
// 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
```
- Single Selection Menu
-
```swift
// Single selection menu
// The sort menu
let sortMenu = UIMenu(title: "Sort By", options: .singleSelection, children: [
UIAction(title: "Title", handler: sortClosure),
UIAction(title: "Date", handler: sortClosure),
UIAction(title: "Size", handler: sortClosure)
])
// The top menu
let topMenu = UIMenu(children: [
UIAction(title: "Refresh", handler: refreshClosure),
UIAction(title: "Account", handler: accountClosure),
sortMenu
])
let sortSelectionButton = UIBarButtonItem(primaryAction: nil, menu: topMenu)
updateSorting(sortSelectionButton.menu?.selectedElements.first)
```