Apple 3D Touch

What is 3D Touch

With the iPhone 6s and 6s Plus, Apple introduced an entirely new way to interact with the phones, a new type of gesture called 3D Touch. 3D Touch brings new dimension to the Multi-Touch interface.

How it works

3D Touch is basically an input method. The next level of multi touch interface, it can sense and differentiate a soft and a hard touch. By doing so it allows the user to experience various options, like for example, when you softly press on the camera icon, list of frequently used actions will pop up like recording or sending a picture to a contact. If you press harder on that option, it will execute the option.

With the help of new Taptic Engine which replaces the traditional vibration motor in previous models to produce the haptic responses that let you know what actions you’re performing and what you can expect to happen. Again, these subtle taps from the much improved Taptic Engine are essential to providing taptic i.e tap and haptic feedback in ways the old vibrator just wasn’t capable of.

3D Touch vs Other Gestures

Long Press Gesture and 3D Touch

Long press gesture is depended on time how long the time the touch is present on screen. 3D touch uses force / pressure thus it is faster as compare to long press.

Force Touch and 3D Touch

A feature similar to this was already available on the Apple Watch and MacBook with the name Force Touch. which is a hard-press gesture. 3D Touch is actually a variant of this gesture but the main difference between force touch and 3D Touch is that 3D touch is smart enough to detect the pressure applied on the screen.

It can detect not just multiple touches on the screen but can also calculate the difference in pressure on various points of the screen. It can distinguish multiple levels of touches based on how firmly you press. Also, while reacting to your touch, Force Touch is not as fast as 3D Touch. The lightning fast response of the 3D Touch is because of the fusion of capacitive sensors and strain gauges. This fusion is perfected by the “Taptic Engine”.

3D Touch Features in iOS 9

Home Screen Quick Actions

A user can now press your Home screen icon to immediately access functionality provided by your app.

A user has always been able to tap an app icon to launch it, or touch and hold any app to edit the Home screen. Now, by pressing an app icon on an iPhone 6S and newer models, the user obtains a set of quick actions. When the user selects a quick action, your app activates or launches and your app delegate object receives the quick action message.

Peek and Pop

You can now enable the view controllers in your app (instances of the UIViewController class) to respond to user presses of various intensities. 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

Within your app, a user can now press views to see previews of additional content and gain accelerated access to features.

Force Properties

In iOS 9, the UITouch class has two new properties to support custom implementation of 3D Touch in your app: force and maximum Possible Force. For the first time on iOS devices, these properties let you detect and respond to touch pressure in the UIEvent objects your app receives.

The force of a touch has a high dynamic range, available as a floating point value to your app.
Maximum Possible force is a property that is by its name define the maximum amount of force is available for touch.

How To Implement 3D Touch

Let’s start with the sample app. Open XCode (7.0 or above). Create a new project From File -> New -> Project aur by simply pressing shift+command+N. Select Single View Application for now.

Enter the name of the project. I have entered 3DTouchSampleApp as a project name. As I will be using Swift Language for this project, Select Swift from Language option. Filled the other details like Bundle Identifier etc. Since its a sample app I am disabling options like Core data and Unit and UI Testing. As indicated in the following image.

Xcode created multiple of files automatically with the creation of new project as can be seen in the navigation pane. Select the Main Story board from the navigator pane and from the object library drag and drop two UILabels and a UIProgressView from Add the relative constraint to position these view. I have added top,fixed width height and Horizontal Position Center Constraint to these elements. The layout will look like the following image.

Now Select ViewController.swift file from navigation pane and create the IBOutlets properties of the above added element in ViewController class.

import UIKit

class ViewController: UIViewController,UIViewControllerPreviewingDelegate {

   @IBOutlet weak var titleLabel:UILabel!
   @IBOutlet weak var touchForceValue:UILabel!
   @IBOutlet weak var touchForceFillView:UIProgressView!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view, typically from a nib.
   }

Now from the Main.StoryBoard connect these object to there respective outlets.

Now let’s come to main part of this tutorial. Implementation of 3D Touch. As described earlier with iOS 9 two new properties are added to UITouch object that is force and maximumPossibleForce. the force property indicate the current pressure applied by user. default value is 1.0 for normal tap events. maximumPossibleForce property indicate the maximum amount of pressure is detected by touch object.

First of all we have to check whether the 3D touch functionality is available for the current device. This can be done by checking the traitCollection property named forceTouchCapability. It is a enum of type UIForceTouchCapability which is consisting of 3 values Available, Unavailable and unknown. For the device with 3D Touch functionality this value returns UIForceTouchCapability.Available.

We will be using the UITouch events delegate method in order to get the 3D touch force value. Whenever a user touches some area of the screen a touchesBegins method is called. After that if user moves its finger over the screen touchesMoved Method is called and then touchesCancelled or touchesEnded method is called based on user interaction. So by overriding these methods we will update the touchForceFillView and touchForceValue with the current force applied by user.

First I have created a updateStatusWithTouchForceValue method which takes a touch object as input and update the touchForceValue label with the current force value in percentage and also updated the progress view with current touch force value in percentage.

func updateStatusWithTouchForceValue(touch:UITouch){
self.touchForceFillView.setProgress(Float(touch.force/ touch.maximumPossibleForce), animated: true)
self.touchForceValue.text = NSString(format:"%.2f%% lb",Float(touch.force * 100 / touch.maximumPossibleForce)).description
}

Here I have implement the touchesBegan method to update the labels with touch force value as the user started the touch event. First of all I have checked whether the 3D touch functionality is available for the device as described earlier.

override func touchesBegan(touches: Set<UITouch>, withEvent: UIEvent?) {
       print("touch event began")
       if traitCollection.forceTouchCapability == UIForceTouchCapability.Available {
           // 3D Touch capable
           let touch = touches.first
           updateStatusWithTouchForceValue(touch!)
       }
       else {
           // fall back method
       }
}

In touchesMoved method i have updated the views with latest applied pressure.

override func touchesMoved(touches: Set<UITouch>, withEvent: UIEvent?) {
       if traitCollection.forceTouchCapability == UIForceTouchCapability.Available {
           // 3D Touch capable
           let touch = touches.first
           updateStatusWithTouchForceValue(touch!)
       }
       else {
           // fall back method
       }
}

And finally I have updated the views when user takes its finger off the screen in touchesEnded method.

override func touchesEnded(touches: Set<UITouch>, withEvent: UIEvent?) {
       if traitCollection.forceTouchCapability == UIForceTouchCapability.Available {
           // 3D Touch capable
           let touch = touches.first
           updateStatusWithTouchForceValue(touch!)
       }
       else {
           // fall back method
       }
}

How to Implement Peek and Pop using 3D Touch

First we have to know what these terminologies mean.

Peek

Peek is basically a way of pressing on a user interface element with a bit more force to get a “Peek” at it. Peeking is the term use by apple to gives you a snapshot of the next view controller you’re going to be looking at when it’s activated.

Pop

After peeking if you press a little more deeply to Pop into the message for a full view just as if you’d tapped to open it.
So how to achieve this functionality. There are two ways to perform this

With the help of UIStoryboardSegue
By using UIViewControllerPreviewingDelegate.

For this purpose add a new view controller in the storyboard. Create a class DetailViewController and assign it to this view controller for now.

Peek and Pop Using UIStoryboardSegue

Apple introduced with 3D touch some new options Preview & commit Segues in UIStoryboardSegue.

In the storyboard add a button in the view controller and perform an action segue from main ViewController to DetailViewController. Select the checkbox stating Peek & Pop. For now both preview and commit segues will be same as shown in above screen shot. Run the application and you can see the following result while pressing the Peek Button for a little while.

These segues can also be configurable like any other segues you can assign identifiers, class etc to these segues.
There is only one restriction as these storyboard segues are only available in iOS 9.1 or later.

Peek and Pop Using UIViewControllerPreviewingDelegate

Peek and pop functionality is achieved in code by using UIViewControllerPreviewingDelegate.
This is a bit more complicated but there is a plus point to it as this allow us to add custom actions to Peek when the user swipes up.

First we have to make our viewController class confirm to UIViewControllerPreviewingDelegate.

class ViewController: UIViewController,UIViewControllerPreviewingDelegate

We just need to implement methods of UIViewControllerPreviewingDelegate.

func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
       guard let viewController = self.storyboard?.instantiateViewControllerWithIdentifier("previewViewController") else{
           return nil
       }
       previewingContext.sourceRect = self.peekButton.frame
       return viewController
}

In the previewingContext(_:viewControllerForLocation:) method, we instantiate a DetailViewController object from the storyboard and return this object. This method is responsible for providing the view controller whose view you want to provide as the preview (peek).

func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {
       self.presentViewController(viewControllerToCommit, animated: true, completion: nil)
}

In the previewingContext(_:commitViewController:) method, we provide implementation of the transition from the current view controller instance and Pop the view controller we created at the Peek stage on the screen.

Preview Action

In order to add actions to a preview i-e Preview actions, it needs to be defined in the preview’s view controller class in our case DetailViewController class.

The method previewActionItems() -> [UIPreviewActionItem] returns an array of UIPreviewActionItem.

These action items are displayed by the peek view controller whenever we swipe up the peek view controller.

UIPreviewActionItem have a title, a style enum of UIPreviewActionStyle which can be destructive,selected or regular/default and an action closure which is called whenever the user click this action.

Here 3 actions are created action1 is a regular style action, action2 is a destructive style action and action group that collapses any number of other actions under a single button named groupAction which is consisted of subAction1 and subAction2.

public override func previewActionItems() -> [UIPreviewActionItem] {
   
       let action1 = previewActionForTitle("Default Action")
       let action2 = previewActionForTitle("Destructive Action", style: .Destructive)
       
       let subAction1 = previewActionForTitle("Sub Action 1")
       let subAction2 = previewActionForTitle("Sub Action 2")
       let groupedActions = UIPreviewActionGroup(title: "Sub Actions…", style: .Default, actions: [subAction1, subAction2] )
       
       return [action1, action2, groupedActions]
   }
   

func previewActionForTitle(title: String, style: UIPreviewActionStyle = .Default) -> UIPreviewAction {
       return UIPreviewAction(title: title, style: style) { previewAction, viewController in
           guard let _ = viewController as? DetailViewController else { return }
           
           print("\(previewAction.title) triggered from `DetailViewController`")
       }
}

Now run the project and swipe up the peek view controller and you will see these action items.

Possible Applications of 3D Touch

3D touch applications are numerous from games to musical application like Piano player where pressure sensitive touch can be used to vary the note of the tune.

In games 3D touch can be used to perform various task like in FPS game control the rate of fire, In platform based games it can be used to control the height of the jump, and in racing games control the acceleration of the vehicle etc.
Different applications are taking advantages of the latest 3D touch technology such as skype and whatsapp which lets the user peek into recent conversations.

You can also use 3D touch to peek at locations, photos, contacts, and web links within your application.
Home Screen Quick action can used to facilitate users to perform quick task in like taking a picture, taking a note etc.