Design with iOS pickers, menus and actions
Description: 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.
Menus
- 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
Menus use cases:
- Disambiguation: when you want to clear out what is the user's intent for this action
- Navigation: giving extra options to navigate backward or forward
- Selection: to select one option of many for actions like Sort and Filter
- 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