Evolve Countdown iOS 8 Today Widget

Count down how many days until Evolve from the iOS 8 notification screen using a Today Widget:

iOS 8 introduces a variety of extensibility features called extensions. Extensions allow applications to offer user experiences throughout the system in ways that were not available previously to third party developers.

With app extensions, applications can now offer features such as custom keyboards, content sharing, and photo editing to name just a few of the new ways to provide system-wide functionality.

Today Widgets

One type of extension is called a Today Widget, which is an extension that lives on the notification screen along with the widgets provided by Apple. This is a great place for an application to offer updated data for people to consume at a glance without having to open the application. Scenarios involving sports scores, package trackers and news headlines make for good Today Widget use cases.

Evolve Countdown Widget

Let’s take a look at a Today Widget that displays the number of days until Xamarin Evolve 2014.

Widgets are created using an Extension Project template under the Unified API project templates, as extensions are required to support both 64 and 32 bit architectures.

You don’t create a stand-alone extension, rather it must be created and referenced from a container application. In this case, I created a small app that displays the Evolve website in a WKWebView and then added the extension project as a reference.

There are a few configurations that need to be set in the Info.plist for the extension:

In this case, I included a button in the extension that, when tapped, will launch the app so the app registers a custom url scheme as well:

To create the extension, I designed the UI in a storyboard with a UIImage, UILabel and UIButton respectively. Note, since the unified API is required, use Xcode to wire up controls to code (code generation support for the Xamarin designer will come in a future release).

The notification center determines the frame for the extension. The best way to control the layout of controls is using auto-layout, which is what I used here.

Adding the Extension’s Code

A today widget is just a view controller. Therefore, the code is implemented much like other view controllers, as shown below:

public override void ViewDidLoad ()
{
  base.ViewDidLoad ();

  PreferredContentSize = new CGSize (PreferredContentSize.Width, 55f);
  var evolveStartDate = new DateTime (2014, 10, 6);
  var numDays = (evolveStartDate - DateTime.Now).Days;

  WidgetTitle.Text = String.Format ("{0} days until Evolve", numDays);
  WidgetButton.SetTitle ("Tap here to register", UIControlState.Normal);
  WidgetButton.TouchUpInside += (sender, e) => UIApplication.SharedApplication.OpenUrl (new NSUrl ("evolveCountdown://"));
}

When the application is deployed, the user will have the option to include the widget in the notification screen:

After adding the widget, tapping the butting results in the app opening, thanks to the custom url scheme it registered:

Extensions like Today Widgets allow applications to deliver experiences that only for Apple could provide in the past, so it’s great to see this added flexibility come to iOS.

Join me at Evolve to discuss this and many other exciting new iOS 8 features!

The code from this post is available here.

Discuss this blog post in the Xamarin Forums