Monday, November 10, 2014

How to create a “Today Widget” in iOS 8

How to create a “Today Widget” in iOS 8

What is a Today widget?

Widgets are part of Extensibility, one of the most useful features in iOS 8, and one of the most important, most enabling new technologies to come to the iPhone and iPad since the launch of the App Store. With Today view extensions, any app can present a widget that displays information and offers a crispy interaction right in Notification Center. Widgets from supported apps can be enabled by swiping down to the Today view in Notification Center, scrolling down to the “edit” button at the bottom, and tapping the “+” icon next to any supported apps

In this tutorial, let us go through the process of creating a custom widget for the Today section of the notification center.

Step 1: Project Setup

If you want to build this widget as an extension to an existing app, open your Xcode project, and jump to the second step. If you're starting from scratch, then you first need to create a containing app.
Open Xcode and in the File menu select New > Project.... We will be using Objective-C as the programming language and the the Single View Application template to start with.

Step 2: Add New Target

Open the File menu and choose New > Target.... In the Application Extension category, select the Today Extension template.

You'll notice that the Project to which the target will be added is the project we're currently working with and the extension will be embedded in the containing application. Also note that the extension has a distinct bundle identifier based on the one of the containing application, com.CompanyName.WidgetSample.MyFirstWidget.

Click Next, give your widget a name, for example, MyFirstWidget, and click Finish to create the new target. Xcode has created a new scheme for you and it will ask you to activate it for you. Click Activate to continue.
Xcode has created a new group for the widget named MyFirstWidget and added a number of files to it, a UIViewController subclass and a storyboard.
That's right, a widget is nothing more than a view controller and a storyboard. If you open the view controller's header in the code editor, you'll notice that it is indeed subclassing UIViewController.
If you select the extension target from the list of targets, open the Build Phases tab, and expand the Link Binary With Libraries section, you'll see that the new target is linked to the Notification Center framework.

Step 3: User Interface

We'll now build a basic user interface for our widget. Determining the widget size is important and there are two ways of telling the system the amount of space we need. One is using Auto Layout and the other is using the preferredContentSize property of the view controller.
The concept of adaptive layouts is also applicable to widgets. Not only do we now have iPhones with various widths (and iPads and future devices), but also remember that the widget might need to show its content in landscape orientation. If the user interface can be described with Auto Layout constraints, then that is a clear advantage for the developer. The height can be adjusted later with setPreferredContentSize: if needed.
Open MainInterface.storyboard in the Xcode editor. You'll notice that a label displaying "Hello World" is already present in the view controller's view. Select it and delete it from the view as we won't be using it. Design the UI based on your requirement. Make it simple.

Step 4: Build and Run

It's time to see the widget in action. With the MyFirstWidget scheme selected, select Run from the Product menu or hit Command-R. Reveal the notification center by swiping from the top of the screen to the bottom and tap the Edit button at the bottom of the notification center. Your widget should be available to add to the Today section. Add it to the Today section by tapping the add button on its left.

This is what our extension should look like.

No comments:

Post a Comment