Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC21 · 20 min · Essentials / SwiftUI & UI Frameworks

Meet the UIKit button system

Every app uses Buttons. With iOS 15, you can adopt updated styles to create gorgeous buttons that fit effortlessly into your interface. We’ll explore features that make it easier to create different types of buttons, learn how to provide richer interactions, and discover how you can get great buttons when using Mac Catalyst.

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 8 snippets

Creating a button with a configuration swift · at 2:13 ↗ 
// Create the Sign In button

let signInButton = UIButton(type: .system)
signInButton.configuration = .filled()
signInButton.setTitle("Sign In", for: [])
Customizing a button configuration swift · at 3:20 ↗ 
// 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: …)
Customizing a button with a configuration update handler swift · at 4:45 ↗ 
// 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
}
Indicating a configuration needs an update swift · at 5:59 ↗ 
// Update addToCartButton when itemQuantityDescription changes

private var itemQuantityDescription: String? {
    didSet {
        addToCartButton.setNeedsUpdateConfiguration()
    }
}
A completely customized button swift · at 8:26 ↗ 
// Configure the button background

var config = UIButton.Configuration.filled()
config.buttonSize = .large
config.image = UIImage(systemName: "cart.fill")
config.title = "Checkout"
config.background.backgroundColor = .buttonEmporium

let checkoutButton = UIButton(configuration: config
                              primaryAction: …) 
addToCartButton.configurationUpdateHandler = {
    [unowned self] button in

    var config = button.configuration
    config?.showsActivityIndicator = self.isCartBusy
    button.configuration = config
}
Creating a toggle button swift · at 11:56 ↗ 
// 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()
Creating a pop-up button swift · at 14:30 ↗ 
// 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
Creating a custom single selection menu swift · at 18:18 ↗ 
// 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)

Resources