Supporting New iPad Pro Models

Apple announced two new iPad Pro models this week. It was not much of a surprise that they follow the iPhone X design. There’s no notch to worry about but there are rounded corners, and the home button is gone, replaced with Face ID and a bottom home screen indicator. There’s also a new Apple pencil gesture. Here’s a quick summary of what you need to know to support the new models.

The New Models In A Nutshell

The two new iPad Pro devices both follow the iPhone X design with thinner bezels and rounded corners. The 11" model brings us another new screen size and aspect ratio:

iPad Pro 11"

Display: 11" (diagonal) Liquid Retina
Screen size: 834 x 1194 points
Native size: 1668 x 2388 pixels (264 ppi)
Scale factor: @2x

iPad Pro 12.9"

Display: 12.9" (diagonal) Liquid Retina
Screen size: 1024 x 1366 points
Native size: 2048 x 2732 pixels (264 ppi)
Scale factor: @2x

NOTES:

The 11" model is the first iPad NOT to have a 4:3 aspect ratio. Compared to the iPad Pro 10.5" size (834 x 1112 points) it’s 82 points taller (in portrait).
This is the third generation of the 12.9" model. It keeps the same screen dimensions but with smaller bezels making the device physically smaller.

Stay Safe

As with the recently launched iPhone XS Max and iPhone XR the minimum you need to do to support the new devices is to build your app with the new iOS 12.1 SDK. If you have been following Apple’s repeated guidance to use safe area layout guides and insets that should be enough to keep your content away from the rounded corners and home screen indicator.

iPad Pro 11-inch safe area

The status bar on both new iPad Pro models is 24 points in height (portrait and landscape). This compares to 20 points on the older iPads and iPhones. The home screen indicator at the bottom of the screen is 20 points high. There’s no notch, so the left and right insets are always zero.

Until you link against the iOS 12.1 SDK your app runs in compatibility mode. What’s interesting is the impact that the iPad split-screen modes can have on your App:

When apps run side-by-side in an iPad split-screen, if one of the apps has not been linked against the iOS 12.1 SDK both apps run in compatibility mode.

Apple refers to this as common inset compatibility mode. Both apps are forced to use common insets that do not correspond to a real device physical screen size. The new Apple Tech Talk on the iPad Pro pushes the future proofing message of safe areas hard:

By taking some time to ensure your iPad apps can handle this common inset compatibility mode you’ll also be ensuring a smooth transition next year when you can bring UIKit apps to the Mac.

In other words, stop making assumptions about the size of the insets.

New Pencil Gesture

If you already have the first generation Apple Pencil there’s some bad news. It doesn’t work with the new iPad Pro models. You charge and pair the old pencil using the lightning port. The new iPad Pro models replace the lightning port with a USB-C port, so there’s no way to pair the old pencil. That’s a little annoying, as is the price jump of the new pencil to $129 (from $99).

The new pencil automatically pairs and charges when you magnetically attach it to the iPad. It also has a double-tap gesture which can trigger actions in your App. Apple is making it clear that you should not get too creative with how you use the new gesture. When it makes sense for your app, you should respect the user’s preferred double-tap action. This is configured in the system-wide Settings app and has four possible values:

Do nothing (ignore the double-tap)
Switch to the eraser tool
Switch to the previous tool
Show the color palette

If you do implement a custom action, the Apple iOS Human Interface Guidelines suggest you give the user a way to enable the behavior and that you do not perform an action that modifies content.

To support the new pencil you create a pencil interaction, set its delegate and then add it to your view:

let pencilInteraction = UIPencilInteraction()
pencilInteraction.delegate = self
view.addInteraction(pencilInteraction)

The delegate has a single method to handle the double-tap gesture:

func pencilInteractionDidTap(_ interaction: UIPencilInteraction) {
  switch UIPencilInteraction.preferredTapAction {
  case .ignore:
    return
  case .switchEraser:
    // Switch to eraser...
  case .switchPrevious:
    // Switch to previous tool...
  case .showColorPalette:
    // Show color palette...
  }
}

You get the user’s preferred tap action from the UIPencilInteraction class property. I can’t see any way to simulate the gesture in the iOS simulator with Xcode 10.1.

Some earlier posts that you might find useful:

Apple published two new tech-talk style videos:

Want To Learn More?

If you enjoyed this post and want to learn more about building adaptive layouts, you should get my book - Modern Auto Layout.