Build with iOS pickers, menus and actions

WWDC 20

Build with iOS pickers, menus and actions

Tuesday, 14 July 2020 UIKit 0 comments Watch the video

Control design updates:

UISlider and UIProgressView: slightly updated design to make it more similar to the Mac

→ design is again slightly more Mac-like when running in a Catalyst environment – some UI customizations in these classes are ignored there

UIActivityIndicatorView: updated design, larger and with fewer lines

UIPickerView: updated design

→ it’s strongly recommended to use menus instead in Catalyst apps

UIPageControl

allows an unlimited number of pages
you can use custom images for all page dots (preferredIndicatorImage) or for a specific page (setIndicatorImage(…, forPage: i))
backgroundStyle = .prominent

Color picker

UIColorPickerViewController – new color picker dialog like on macOS

presents as a sheet or popover
has a selectedColor property that you can preset and read from
allows picking a color using a few different methods
colors can be favorited and reused across apps
includes an eyedropper that lets you pick a color from the screen below, or another app on iPad
on macOS it appears as the standard Mac color picker panel

var colorPicker = UIColorPickerViewController()
colorPicker.supportsAlpha = true
colorPicker.selectedColor = UIColor.blue
self.present(colorPicker, animated: true, completion: nil)

func colorPickerViewControllerDidSelectColor(
  _ viewController: UIColorPickerViewController
) { … }

func colorPickerViewControllerDidFinish(
  _ viewController: UIColorPickerViewController
) { … }

Date picker

UIDatePicker – new compact style, shows two fields that open a popup when tapped

Inline style – shows picker as part of the main view instead of a popup

datePicker.preferredDatePickerStyle = .automatic / .compact / .inline / .wheels

Menus

button.menu, barButtonItem.menu – shows a context menu when that button is tapped

For UIButton: set button.showsMenuAsPrimaryAction = true

For UIBarButtonItem: set menu but don’t provide a primaryAction

Back button now shows a “history” menu when you press and hold it

Looks at: backBarButtonItem.title, backButtonTitle, title

Implemented in UIControl

UIControl.showsMenuAsPrimaryAction

UIControl.contextMenuInteraction, isContextMenuInteractionEnabled

UIDeferredMenuElement – asynchronously provides menu items

Shows a standard loading UI (“Loading” + spinner) until menu items are ready

Once loaded, menu items are cached

UIContextMenuInteraction:

updateVisibleMenu(_ block: (UIMenu) -> UIMenu) – replaces currently displayed menu
menuAppearance ⭢ .rich = under a preview, .compact = just the menu

Actions

UIAction is used in more places across UIKit

All controls can be constructed using a UIAction now

UIBarButtonItem:

new initializers taking primaryAction and/or menu
.fixedSpace(width: x) and .flexibleSpace() spacers

UIButton: init(type:primaryAction:), defaults to using action’s title and image on the button

UISegmentedControl: init(frame: actions:) – creates segments from a list of actions, action is automatically called when that segment is selected

MacKuba

🍎 Kuba Suder's blog on Mac & iOS development

WWDC 20