3D Touch Peek and Pop Tutorial

published in iOS Development, Tutorials
by Piotr Przeliorz

With the release of the new model of phones: the iPhone 6s, Apple introduced 3D Touch. It's a functionality that allows the user to interact with the device using pressure. In the "3D Touch Peek and Pop Tutorial", I will show you how to use the Peek and Pop feature in iOS app development.

In our last article: 3D Touch Quick Actions Tutorial, Szymon described Quick Actions. Here you will learn how to implement the Peek and Pop feature, which can be found in applications like Mail as well as the App Store. This is a must read if you are an iOS app developer!

Getting started with Peek and Pop using 3D Touch

In the first part of the tutorial, you will create UIViewController‘s which you will later use to implement the Peek and Pop functionality. To create the application UI, use Storyboard.

The first obstacle will be to create two views and to combine the view components with ViewControllers using @IBOutlets.
3D Touch Peek and Pop

For the next step createstruct which will represent the object Restaurant:

struct Restaurant {
    var name: String
    var photo: UIImage
    var description: String
    var address: String

In the first UIViewController you create a table of objects of the type Restaurant, which will later be presented by UITableView:

         fileprivate var restaurants: [Restaurant] = {
        return [
            Restaurant(name: "Marina", photo: #imageLiteral(resourceName: "marina_restaurant"), description: Decriptions.Marina.rawValue, address: Addresses.Marina.rawValue),
            Restaurant(name: "Monopol", photo:  #imageLiteral(resourceName: "monopol_restaurant"), description: Decriptions.Monopol.rawValue, address: Addresses.Monopol.rawValue),
            Restaurant(name: "Campo", photo:#imageLiteral(resourceName: "campo_restaurant"), description: Decriptions.Campo.rawValue, address: Addresses.Campo.rawValue),

To display the objects in the Restaurants table, the next step is to implement the: UITableViewDelegate, UITableViewDataSource in the first UIViewController.

     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return restaurants.count

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = self.restaurantTableView.dequeueReusableCell(withIdentifier: RestaurantCell.identifier) as! RestaurantCell
        cell.configureCellView(withRestaurant: restaurants[indexPath.row])
        return cell

Then you get UIViewController as delegate and data source for TableView:

       restaurantTableView.delegate = self
       restaurantTableView.dataSource = self 

Now your iOS application should look as follows:

3D Touch Peek and Pop

How to implement 3D Touch Peek and Pop in Swift

After performing the previous steps you are ready to implement the Peek and Pop functionality in your iPhone app.

In this part of the tutorial you first need to extend the UIViewController to the UIViewControllerPreviewingDelegate protocol. This contains methods that will allow:
• a preview of the UIViewController containing detailed information about the object in the list
• access to an object in the list by pressing the button more firmly

Important: Before implementing the UIViewControllerPreviewingDelegate processes, check if your device supports 3D Touch functionality!

       guard traitCollection.forceTouchCapability == .available else { return }
       registerForPreviewing(with: self, sourceView: view) 

If the device supports force touch, register the UIViewController to allow it to show a preview (peek) and move on to the next UIViewController (pop).
After checking for 3D Touch support, extend the UIViewController to the UIViewControllerPreviewingDelegate:

extension RestaurantsViewController: UIViewControllerPreviewingDelegate {

Swift app development: method previewingContext

The first method you will implement is the method that is invoked when the user presses the source view (that is, the UIView managed by the UIViewController in which you currently find yourself).

The steps to be taken under this method are:

func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
        guard let indexPath = restaurantTableView?.indexPathForRow(at: location) else { return nil }
        guard let cell = restaurantTableView?.cellForRow(at: indexPath) else { return nil }

    previewingContext.sourceRect = cell.frame

        guard let restuarantDetailsViewController = storyboard?.instantiateViewController(withIdentifier: RestaurantDetailsViewController.identifier) as? RestaurantDetailsViewController else { return nil }
        let restaurant = restaurants[indexPath.row]

        restuarantDetailsViewController.restaurant = restaurant

        restuarantDetailsViewController.preferredContentSize = CGSize(width: 0, height: 500)
        return restuarantDetailsViewControlle

Below is a description of the steps that need to be taken:

1. Create indexPath based on the coordinates of the place where the user clicked on the view (the place is represented by the CGPoint object and passed in the argument of the method).

2. Using a previously created indexPath, you can create a cell object presented by UITableView.

3. Specify the area that will be exposed (the rest of the screen will be slightly fuzzy, in this case, it’s the area of the selected cell).

4. Create a UIViewControlller that will display the details of the object presented in this view.

5. Create an object for a particular restaurant based on the previously obtained indexPath.

6. Pass the Restaurant object to the UIViewController, which will be able to view it after the view setup.

7. Specify the dimensions of the UIViewController preview.

8. Return the UIViewController objects that will be presented in the preview.

How did it go?

After you implement the previewingContext method, you should get the functionality outlined below:

3D Touch Peek and Pop

Develop iPhone app: almost done!

The second method from the UIViewControllerPreviewingDelegate, allows you to move on to the next UIViewController when the user presses hardest on the button. It needs to be implemented! This will be a lot faster:

    func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController) {
// 1
        show(viewControllerToCommit, sender: self)

1. You present theUIViewController which is passed in the parameter of the method.

That’s it for the 3D Touch Peek and Pop Tutorial!

As a summary: thanks to 3D Touch you can significantly improve the user experience of your iPhone application. Remember that the functionality must be turned on:
Touch in Settings > General > Accessibility > 3D Touch
Check out the other possibilities 3D Touch offers in the documentation found on the Apple website.

You can find the source code on my GitHub.

Piotr Przeliorz

Regardless of complicated surname, Piotr believes in simple solutions. He loves to create, to modify, to make mistakes in iOS apps and to correct them. And, last but not least, to have fun with every single line of new code.

Popular posts

Mobile Healthcare Applications

Mobile Healthcare Applications

The development of mobile applications dedicated to healthcare has brought about a significant change in the once traditional healthcare industry. What used to involve spending a lot of money, waiting in long queues or consulting many professionals is now often reduced to using a mobile application. By using it, we will make an appointment, consult […]

Read more
Mobile Apps for Hospitals: Hot Trends

Mobile Apps for Hospitals: Hot Trends

The healthcare industry is growing at a rapid pace. Visiting a doctor without a queue or even leaving the house is now possible at almost any time. Although this scenario still sounds like a dream and an idea of perfect health care to many, in practice, we are increasingly convinced that it is possible. The […]

Read more
Clutch Announces Zaven as Top Polish Development in  2019 Eastern European Leaders Award

Clutch Announces Zaven as Top Polish Development in 2019 Eastern European Leaders Award

Since 2011, Zaven has been providing digital solutions for global clients. Our team is composed of experts in custom development, UX/UI design, data analytics, backend integration and more. We aim to build long-term business relationships with our clients in order to create the highest quality and most innovative solutions. Clutch, a B2B market research platform, […]

Read more
Mobile Apps

Get your mobile app in 3 easy steps!


Spec out

with the help of our
business analyst



design, implement
and test, repeat!



get your app out
to the stores

back to top