Skip to content
WWDCNotes

Design with iOS pickers, menus and actions

Create iPhone and iPad apps that look great and help people move quickly and directly to the information they need. Discover how you can integrate menus into your app for quick access to actions and settings, and learn where and when you should use them in your app. We’ll also walk you through the new Date Picker and Color Picker controls, and show you how to integrate them into your app.

Watch Video (14 min)3 min read

  • In iOS 14, you can show a Menu from any button

  • Menus in iOS consist of:

    • Label-icon actions

    • A title

    • Separators

  • Do not add a Cancel button inside a menu, simply tapping outside the menu does the same effect

  • The menu adheres to the system accessibility settings by default

  1. Disambiguation: when you want to clear out what is the user’s intent for this action

  2. Navigation: giving extra options to navigate backward or forward

  3. Selection: to select one option of many for actions like Sort and Filter

  4. Secondary options: to show non-primary actions that are not important enough to be prominently displayed, but still should have easy access

  • Do not hide all actions under one menu, instead, carefully promote your primary actions and group together secondary ones, if needed:

  • You can make your buttons do one thing on tap, and another (showing a menu) on long press

  • If there is a destructive action in your menu, make sure to always use an action sheet on iPhones, and pop-overs on iPad, to take the user confirmation before doing the action:

UIDatePicker

  • New UIDatePicker can show date picker only, time picker only, or both.

  • You can instruct the UIDatePicker to style itself for a .compact space, where it will display only a small key color on top of a light platter: Tapping on that key would present the date/time picker in a modal style

  • UIDatePicker also adhere to the system’s accessibility settings

UIColorPickerViewController

  • You can use UIColorPickerViewController  to pick a color in of 4 different ways:

    • Grid

    • Spectrum

    • Sliders

    • Eyedropper from anywhere on the screen

  • Picked colors are saved for the user to use them across apps

Missing anything? Corrections? Contributions are welcome!

Written By

ATahhan
ATahhan
12 notes contributed
Contributed NotesGitHub