The rotary selector arranges multiple items around the circular edge of the screen, and switches the focus between items as users rotate the bezel or tap an item.
|Rotary selector in developer's guides|
The rotary selector displays multiple items in a circle.
Present multiple items to be selected
The rotary selector can be used on any screen that includes multiple items. The title of an item is only displayed when the item is in focus.
The rotary selector can present up to 11 option icons on a page. Option icons are ordered clockwise from the top.
When an option comes into focus as users rotate the bezel or tap an option, its title, subtext, and icon are shown in the center of the screen. If the option is a toggle button, the current state is displayed as subtext.
Previous and next icons
Previous and next icons are shown when the rotary selector has more than 11 options to display. Moving in a clockwise direction from the top, the previous icon is placed at the left of the first button, and the next icon is placed to the right of the last.
Rotating the bezel by one detent brings the next option on the list into focus. Tapping an option brings that option into focus. An indicator shows which option is currently in focus.
The rotary selector switches the focus to the next option as the bezel rotates by one detent.
An option in focus performs its assigned task when users tap it . A tap on the center of the screen triggers the task of the item in focus. If an item is a toggle button, tapping the item or its option detail switches its state.
In the rotary selector, edit mode status can be turned on or off (the default is off). Use the touch-and-hold gesture to enter edit mode.
Use the touch-and-hold gesture to enter edit mode.
User can drag an item to a desired location.
Items can be moved to the previous or next page.
The 2nd layer icon rotates 7 ° from the 1st layer icon. The 3rd layer icon rotates 3° from the 2nd layer icon
The center of an icon is used as coordinates. A normal icon is reduced to 56x56 from the selected icon size of 68x68. Normal Selected
Rotary selector icon color
1 line text 2 line textIcon only Icon only
Icon + Text 1 line text + Subtext 2 line text + Subtext