I wanted to add a little bit of spice to an old app this weekend and decided to implement two incredibly simple features into the next revision of Bait News. In this blog post, I’ll show you how you can also add Peek & Pop and Haptic Feedback to your apps.

Haptic Feedback

Let’s kick off with the simplest, Haptic Feedback. Bait News takes much inspiration from Tinder, and they’ve recently updated the app to include haptic feedback which vibrates the device as the user likes or hides a card. Feeling inspired, I looked to implement this into Bait News. Happily, for us, It turn’s out it’s effortless to implement haptic feedback!

For this to work, I wanted a vibration when the user answers correctly guesses if a headline is real or fiction. To implement this, I only need to call the following:

[sourcecode language=”csharp”] var impact = new UIImpactFeedbackGenerator(UIImpactFeedbackStyle.Heavy);impact.Prepare ();impact.ImpactOccurred ();[/sourcecode]

For FeedbackStyle, I had the option of Light, Medium and Heavy. To be perfectly honest, I didn’t notice much difference between any of them, but I put this is down to the bulky battery case I keep the phone in. I opted for Light vibration on correct answers and heavy on incorrect.

Peek & Pop

Peek & Pop can be the feature that differentiates average apps from good apps. It shows the developers care and understand the platform conventions. It’s deep integrations that make apps distinctive, and it’s this reason I wanted to get started with adding Peek and Pop.

For this to work, I had to rebuild the game results screen, with a little-borrowed code from an old project. The borrow code is a topic for another day as it complicates this example a little, but it adds tabs of nested views to an existing view.

All you need to understand is that at its core, I’ve a UITableView with a custom UITableViewCell. I’ve implemented Peek & Pop in the UITableView class which allows the user to peek into a new article using SFSafariViewController.

Before we get started, we need to ensure the device supports 3D Touch. To do this, we call the following in the ViewDidLoad method.

[sourcecode language=”csharp”] //You’ll want to add this to your ViewDidLoad overrideif (TraitCollection.ForceTouchCapability == UIForceTouchCapability.Available)RegisterForPreviewingWithDelegate(new PreviewingDelegate(this), View);[/sourcecode]

We then need to implement the following method.

UIViewControllerPreviewingDelegate

A set of methods used by the delegate to respond, with a preview view controller and a commit view controller, to the user pressing a view object on the screen of a device that supports 3D Touch.

[sourcecode language=”csharp”] public void CommitViewController(IUIViewControllerPreviewing previewingContext, UIViewController viewControllerToCommit)ShowViewController(viewControllerToCommit,this);[/sourcecode]

I want to return a SafariViewController to the user so they can read the new article. Notice that I track the 3D Touch event using Mobile Center. This is because I’m interesting to understand how many of my users will use this feature.

[sourcecode language=”csharp”] public class PreviewingDelegate : UIViewControllerPreviewingDelegatepublic AnswerTableViewController TableController { get; set; }public PreviewingDelegate(AnswerTableViewController controller)TableController = controller;

public PreviewingDelegate(NSObjectFlag t) : base(t)

{

}

public PreviewingDelegate(IntPtr handle) : base(handle)

{

}

/// Present the view controller for the “Pop” action.

public override void CommitViewController(IUIViewControllerPreviewing previewingContext, UIViewController viewControllerToCommit)

{

// Reuse Peek view controller for details presentation

TableController.ShowViewController(viewControllerToCommit, this);

}

/// Create a previewing view controller to be shown at “Peek”.

public override UIViewController GetViewControllerForPreview(IUIViewControllerPreviewing previewingContext, CGPoint location)

{

Analytics.TrackEvent(“User used 3D Touch”);

// Grab the item to preview

var indexPath =

TableController.TableView.IndexPathForRowAtPoint(location);

var cell = TableController.TableView.CellAt(indexPath);

var item = TableController.DataSource.Answers[indexPath.Row];

// Create SFSafariViewController for displaying new article

var safariViewController = new SFSafariViewController(new NSUrl(TableController.Answers[indexPath.Row].Headline.Url), true);

safariViewController.PreferredContentSize = new CGSize(0, 0);

// Set the source rect to the cell frame, so everything else is blurred.

previewingContext.SourceRect = cell.Frame;

return safariViewController;

}

}

[/sourcecode]

Wrapping up

Thats all it takes to add Haptic Feedback and Peek and Pop to your app. If you’re building a master detail type app using traditional Xamarin, there is no excuse not to add these features!