How Instagram made 3D Touch pop on iPhone 6s

By

iphone-6s-3d-touch-opentable-instagram-workflow-news360-magic-piano - 6
3D Touch is awesome on Instagram.
Photo: Instagram

If you’re looking for an app to wow you with the revolutionary powers of 3D Touch, look no further than Instagram. The photo sharing app has already created some great new interactions with 3D Touch by letting users peek at photos and profile info using three new APIs provided by Apple.

We’ve only had 3D Touch iPhones for a week, but Instagram’s engineers have already managed to set a high bar for other apps to aspire to. In a new engineering blog post, the company gives developers a peek at how they implemented the new 3D Touch APIs so seamlessly, and show how other apps can make 3D Touch much more powerful than just a 2015 version of the right click.

Here’s some of the pointers they collected:

Quick Actions:

With 3D Touch’s new Quick Action API, developers can add shortcuts to the homescreen. Ryan Nystrom, a software engineer at Instagram reveals that it’s actually super simple to implement.

“All you need to do is create an array of UIApplicationShortcutItem and add them to your app’s delegate,” Nystrom wrote in a company blog post. “Each item has a **type** string and an optional UIApplicationShortcutIcon.”

Peeks

peek-instagram
Being able to peek at photos without committing yourself to loading the entire thing is great. It probably only saves you about one second, but that time adds up if you’re looking at 15 pics or more while cruising through the Explore tab.

To create the peek for small photos and videos, Instagram used the Peek and Pop API delegate called UIViewControllerPreviewingDelegate which is registered to a view:

“In Instagram, we just register the view of a controller that can receive touches. When a 3D Touch occurs, the delegate decides if there is a peek for whatever item in the view was touched. If the delegate determines that a peek can happen, it is also responsible for two things: set the source rect of the view that is being peeked and return a controller to present.”

source

The company also detailed how it implemented profile peeks for headers or whenever you’re tagged in a comment. It works similarly to post-peeks:

* Find the cell that received a 3D Touch using the location and looking up the NSIndexPath
* Convert the location to a CGPoint relative to the text view in the cell
* Get the attributes for the NSAttributedString at the given CGPoint
* If a username attribute exists, return an IGUserPreviewController

For a full run down on how to make to most of the Peek and Pop API, including screenshots of Instagram’s code, head over to their engineering Tumblr.

Newsletters

Daily round-ups or a weekly refresher, straight from Cult of Mac to your inbox.

  • The Weekender

    The week's best Apple news, reviews and how-tos from Cult of Mac, every Saturday morning. Our readers say: "Thank you guys for always posting cool stuff" -- Vaughn Nevins. "Very informative" -- Kenly Xavier.