Slot Machine Ui Picker

Yellow Belt Picker. Found the slot machine online, just for your information. I just happen to have a similar machine. Here is a picture of my key.

One of the nice new features that came out with iOS 14 were some new options around the venerable UIDatePicker. There are now some choices other than just the slot machine-style wheels! Since iOS 2.0, the original style of UIDatePicker has been the only standard UIKit option for developers looking to let users select dates and times. The UIDatePicker got a little bit of a facelift with the new styles in iOS 7+ but really hasn’t had much love since then. With iOS 13.4 and iOS 14.0, things changed with the addition of the UIDatePickerStyle enumeration and the addition of two new styles other than the default wheels.

Setting UIDatePicker Style

Machine

The new UIDatePickerStyle enum has four options:

  • wheels – Shows the standard, spinning wheel style picker. (iOS 13.4+)
  • compact – Displays a formatted label that will show a popover with more UI when tapped. (iOS 13.4+)
  • inline – An editable field meant to be used inline. (iOS 14.0+)
  • automatic – Will pick the most appropriate style based on the mode and platform. Usually on iOS this will wind up being wheels but Mac Catalyst apps might use compact or another style. (iOS 13.4+)

While you certainly could let the UIDatePicker select the style for you with automatic, I’d suggest manually setting the style to your preferred option to avoid unexpected UI changes with future iOS releases. Also there is no guarantee that the current default for datePickerStyle of wheels will stay that way forever.

Setting the date picker style is as simple as changing the preferredDatePickerStyle property on the date picker instance that you are using.

The above code will result in the nice new inline interface. Unfortunately the inline style takes up quite a bit of vertical space, but it does let you avoid additional UI transitions, popovers, etc. if that’s what you need.

If you want to use the compact style, it’s just a different value for preferredDatePickerStyle.

The compact style will initially present UI that looks like this.

When the user taps on the date or the time in this case, the entire calendar and time control combination appears in a popover window.

You’ll notice of course when you use it that this looks and behaves exactly like the inline date picker style but is presented in a modal window with a translucent background.

Date and Time Only Options

The UI above all shows examples of date and time but of course you can (and most of the time) probably will just display one or the other. The Date and Time only inline styles are basically just cropped versions of the full UI.

The compact UI collapsed mode with just the date and times fit quite nicely into an existing UI with rounded text fields and definitely provide the most space-efficient option. This style also has the advantage of removing that extra label or button control that developers have had to use to trigger the existing UIDatePicker UI in the past.

Don’t Forget About Locale

One of the major benefits of using the Apple-provided UIDatePicker instead of trying to spin your own is out-of-the-box internationalization. By just setting the locale property on the date picker to “zh_CN” for example, we can get a Chinese language date time picker. Cool, huh?

Slot Machine Ui Picker App

Not Available for Countdown Timer Mode

Note that none of these new styles are available if your datePickerMode is set to countdownTimer. As of iOS 14.2, setting a countdown timer date picker to compact or inline will actually cause a run-time app crash (I’ve submitted feedback to Apple on this so hopefully it will get resolved down the road).

Slot Machine Ui Picker Tutorial

Which Style Do I Pick?

Slot Machine Ui Picker Tool

Which user interface for the UIDatePicker that you prefer is obviously up to you as an app developer. It is always most important to consider your users, what they expect as iOS users, and what will make their experience in your app the most delightful. The new UIDatePicker options will at least let us refresh our apps and keep them up to date going forward. Apple provides some guidance in the Human Interface Guidelines (HIG) but not a ton. As always, while new UI provides us with some choices (and some compromises), which way to go on your app’s journey is up to you.