iOS: How to Peek & Pop Multiple Views in a UITableViewCell or UICollectionViewCell
or: How I learned to avoid the ugly rectangle behind rounded images and love 3D Touch
Implementing Peek & Pop for 3D Touch is a well covered topic lacking a straightforward solution to a common problem. If you’re like me, the first thing you did after procuring a 3D Touch enabled device is: Hard press all the things! Surprisingly, when it comes to rounded images, the results vary wildly. (Screenshots as of Feb. 4th, 2017)
In these examples, Messages is the only app that respects image rounding, while the rest have an ugly white rectangle beneath. Let’s find out why this is so common amongst 3D Touch enabled apps, including Apple’s own, as well as how to fix it.
You can find a working example of the solution here: https://github.com/jimabc/peek-and-pop-example-ios
Enabling 3D Touch
For the purposes of this article I’m going to assume you’re already familiar with the basics of 3D Touch and skip the boilerplate, including iOS version checks.
Imagine we’re building a messaging app, similar to Messages, where each row links to our chat detail and each avatar links to the other person’s profile. Let’s go through the steps of enabling 3D Touch.
Step 1: Register for previewing
First, we need to register our table view with the system so we’ll get notified when the user attempts to 3D Touch it.
Step 2: Implement the previewing delegate
Next, we implement the previewing delegate and present a different view controller based on where the user is touching.
Step 3: Run it! And…
We get the ugly rectangle. So what’s going on and how can we fix it?
Unboxing our images
The problem is that the previewing context uses the same corner radius as the source view we registered in our call to registerForPreviewingWithDelegate, which in our case is the table view. If we want our rounded images to appear rounded in the 3D Touch preview, we’ll need to register them separately from the table view. To do that, register each cell’s image view the same way we registered the table view.
Then, update the delegate method to present a different view depending on the source view.
You may notice a new extension method on our table view called indexPathForSubview. It’s one of two extension methods we’ve added to assist in finding a cell from one of its subviews.
Voila!
As you can see, the image rounding is maintained while peeking and we’ve retained the ability to peek the entire row.
Thanks for reading!
Download the example project and try it for yourself: https://github.com/jimabc/peek-and-pop-example-ios
