MacKuba

🍎 Kuba Suder's blog on Mac & iOS development

WWDC 20

Build with iOS pickers, menus and actions

Categories: 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

Register for UIControl.Event.menuActionTriggered to observe when menu is opened

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