Getting started with 3D Touch Peek & Pop— Swift

Today we’re checking out the best 3D Touch features. Some of you are probably thinking, how is this any different from a long press, right?

Well, its uses may not be very different at the moment, but the technology that makes this possible is a very different thing.

3D Touch will sense the amount of pressure your finger applies to the screen and trigger various actions. So instead of a short press or a long press, 3D Touch enables a soft press and a hard press.

By this tutorial, you know how to implement the 3D touch in Home Screen Quick Actions and Peek and Pop Image.

Before implementing 3D touch on your app, you should check whether device support 3D touch.

Check for 3D Touch support:

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

1. Home Screen Quick Actions

App Icon Quick Action

Quick action is nothing but When you force touch an app icon, a menu will be presented. You can use it, to quickly access a certain part of the app or to trigger an action. The quick action is subdivided into static and dynamic. Every app can have at most four quick actions. You can define more quick actions, but not more than four of them will be displayed. Additionally, static quick actions will be prioritized. So if you define three static quick actions and two dynamic quick actions, all of the three static quick actions will be displayed, but only one of the dynamic quick actions. As you may have noticed, apps are providing a fifth quick action, called “Share”. This action is automatically provided by the operating system.

Static Quick Action

Static quick actions are generated at compile-time and always stay the same. They are immediately available after installing the app even before the very first launch.

Dynamic Quick Action

Dynamic quick action are generated at runtime and reflect some kind of user behavior by using code. For each item, you have to create an instance of UIApplicationShortcutItem. Then, you can set all items.

Let’s start by creating a new project. After that, you have to define UIApplicationShortcutItems array in your app’s Info.plist .

Adding UIApplicationShortcutitems array in Info.plist

source code:

<key>UIApplicationShortcutItems</key>
<array>
<dict>
<key>UIApplicationShortcutItemIconType</key>
<string>UIApplicationShortcutIconAdd</string>
<key>UIApplicationShortcutItemTitle</key>
<string>Show Pictures</string>
<key>UIApplicationShortcutItemType</key>
<string> addBundleIdentifier.showPictures</string>
</dict>
</array>

In AppDelegate, add performActionFor shortcutItem function and insert below code in that

if shortcutItem.type == "UIApplicationShortcutItemType"{
let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle: nil)
let initViewController = storyBoard.instantiateViewController(withIdentifier: "3dtouch")
self.window?.rootViewController = initViewController
self.window?.makeKeyAndVisible()
}

That’s it. I made a quick action for my app. when 3D touch made on app icon it shows quick action called “Show Pictures” and tap this it will show viewController which I instantiated in performActionFor shortcut item. Similarly, you can add your quick action which you want do on 3D touch.

2. Peek and Pop

As the user presses more deeply, interaction proceeds through three phases:

  • Indication that content preview is available
  • Display of the preview known as a peek with options to act on it directly known as peek quick actions
  • Optional navigation to the view shown in the preview known as a pop

When you employ peek and pop, the system determines the pressures at which one phase transitions to the next.

Peeking

Peeking

It essentially gives you a snapshot of the next view controller you’re going to be looking at when it’s activated. It’s also the more difficult feature of 3D Touch to implement because of all the moving parts.

To implement Peeking, add UIViewControllerPreviewingDelegate function.

func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
//Here's where you commit (peek)
}

Popping

In Popping, we are asked for the view controller to be shown when user decides to Pop in to the previewed content. We are passed the view controller we created earlier for the Peek part of the interaction, so we just show this in a navigation controller, which is how it would be presented if the user had just tapped on the region rather than peeking in to it.

Popping

For this , we have to include UIViewControllerPreviewingDelegate function.

func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {
//Here's where you commit (pop)
}

Example 1: Here i implemented peek and pop for image on UIImageView. If we made a 3D touch on the image, it shows peek and when more force touch on the peek image, it sends the image to the next view controller to see the pop.

Set for peek:

let convertedLocation = view.convert(location, to: imageView)
if imageView.bounds.contains(convertedLocation){
let popVC = storyboard?.instantiateViewController(withIdentifier: "popVC") as! popViewController
popVC.popImage = imageView.image!
//Set your height
popVC.preferredContentSize = CGSize(width: 0.0, height: 300)
previewingContext.sourceRect = imageView.frame
return popVC
}else{
return nil
}

Set for pop:

show(viewControllerToCommit, sender: self)

Example 2: You also implement peek and pop for UICollectionView and UITableView by

//For CollectionView 
guard let indexPath = collectionView?.indexPathForItem(at:location) else { return nil }
guard let cell2 = collectionView.cellForRow(at: index) else { return nil }
//For TableView
guard let indexPath = tableView?.indexPathForItem(at:location) else { return nil }
guard let cell2 = tableview.cellForRow(at: indexPath) else { return nil }
guard let popVC = storyboard?.instantiateViewController(withIdentifier: "popVC") as? popViewController else { return nil }
let photo = photos[indexPath.row]
popVC.photo = photo
//Set your Peek height
popVC.preferredContentSize = CGSize(width: 0.0, height: 300)
previewingContext.sourceRect = cell.frame
return popVC

That’s it. you made peek and pop.

Check out sample project on my Github repo.

If you found this tutorial useful, you know what to do now. Hit that clap button and follow me to get more articles and tutorials on your feed.

--

--

--

 iOS and Flutter developer @TCS, Chennai. Here to share best practices learned through my experience. Reach me on www.linkedin.com/in/ashok1208

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Global DevOps Bootcamp Toronto- Thanks all, that’s a Wrap!

#MyFirstTechSeries — Cucumber Test

Introduction to Software Engineering

Compiled list of free and working WSDL URLs.

Coding for Humanists: Step 0

LAMP and phpMyAdmin AMI

Dragon City: a magic virtual world!

How to build a video record feature on your Rails app with Cloudinary

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ashok

Ashok

 iOS and Flutter developer @TCS, Chennai. Here to share best practices learned through my experience. Reach me on www.linkedin.com/in/ashok1208

More from Medium

Crowdin CDN— streamline the localization process (iOS)

How to Write Images to Camera Roll in iOS

How to Write Images to Camera Roll in iOS

Developing twitter splash screen for iOS application

Working With Custom “xcconfigs” and Cocoapods