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
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 .
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
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.
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.
