3D Bait News

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:

var impact = new UIImpactFeedbackGenerator(UIImpactFeedbackStyle.Heavy);
impact.Prepare ();
impact.ImpactOccurred ();

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.

//You'll want to add this to your ViewDidLoad override
if (TraitCollection.ForceTouchCapability == UIForceTouchCapability.Available)
{
    RegisterForPreviewingWithDelegate(new PreviewingDelegate(this), View);
}

We then need to implement the following method.

public void CommitViewController(IUIViewControllerPreviewing previewingContext, UIViewController viewControllerToCommit)
{
    ShowViewController(viewControllerToCommit,this);
}

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.

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.

public class PreviewingDelegate : UIViewControllerPreviewingDelegate
{
    public 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;
    }
}

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!


1 Comment

John Wick · August 18, 2017 at 8:10 am

Hi Mike! Thanks for great article.
Can you please make an tutorial for native Xamarin.iOS, how to do “user accounts” view with AutoLayout and material design style.
Like you have done with this image https://pbs.twimg.com/media/C1vUd0aXcAEXsOR.jpg:large

Thanks for attention. Cheers!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.