Having fun with Today Widget Extensions Part One

Charles E.
3 min readOct 15, 2018

--

First of all; ‘fun’ is subjective here! What’s ‘fun’ for me (native iOS development without using storyboards…at all), might be boring (or…torture?) for others. *Kanye shrug*…actually…lets not make any mention of Kanye right now, or ever again.
Disclaimer: This article assumes you are familiar with: Developing iOS applications natively using Swift. The various iOS frameworks, APIs and components…or at the very least; have XCode installed.
And as always, you’re not even obligated to read this, you probably just want the source code,
here it is.

Yay! Fun!

So, you’re probably wondering “what exactly is a Today Widget?”
Short answer: An app extension in the Today View which gives users quick access to information.
Not sure what that means? Well, here’s the long answer.

Lets kick things off by creating a new XCode project.

Choose single view application
Name it…whatever you like.

Next, add the Application Extension

File -> New -> Target
Today Extension.
Give it a name
Click activate.

Time for some code

Now, this is the part where I completely remove all storyboards; main and launchscreen, (you do not have to remove them that is completely up to you, but I wont be using them) and instead configure the AppDelegate to manually launch the default ViewController.

Within the didFinishLaunchingWithOptions function is where the customization takes place.

Since I wont be using storyboards, I’ll have to layout the views programmatically, to assist with this, I’ll be taking advantage of Swift Extensions. Create a new Swift file, make sure you select all targets in the Targets section.

Select both targets
This is all, it will make sense shortly (fingers crossed)

Add an icon to represent each user to the Assets folder(a nice resource for icons is MaterialDesign.io).
Next, make the Assets folder accessible to all targets, as this image will need to be accessed from the Widget namespace.

Select the app and the widget under the Target Membership section

Right now, your project should show a clear distinction between the main App and the Widget extension. You’ll basically be focusing on the Widget extension namespace from now on.

Namespaces

Create a swift file called UserModel, this model object will have a string variable called ‘name’.

import Foundationstruct UserModel {
let name: String
}

Create a new Cocoa Touch Class, set it to type UICollectionViewCell, name it UserCell.
This will be the customized collectionview cell, which will house the necessary views (a UILabel, and a UIImageView) which will be seen on the widget, it will be utilizing Extension.swift to layout the views.

CollectionViewCell, created programmatically

Make TodayViewController conform to UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout.
A CollectionView will be used to display the data.

TodayViewController

This concludes Part One of the article, as per usual the entire source is available on GitHub.
Enjoy…or don’t *Kanye shrug*…d’oh!!

--

--

Charles E.

The Geeks Shall Inherit The Earth. Software Engineer. Android | iOS.