From iOS 16, Apple will renew the Lock Screen design, and now Lock Screen can support widget extensions.
This article will introduce how to implement an iOS 16 lock screen widget.
Before iOS 16, there were three sizes of widgets (systemSmall, systemMedium, systemLarget), but starting from iOS 16, there will be three more in the widget family, which are accessoryInline, accessoryCircular, accessoryRectangular.
In this article I will create two Lock Screen widgets – one a stateless Shortcut Widget with accessoryCircular size and another one a Balance Widget with size accessoryRectangular.
Requirements
There are some limitations to these new widgets
- Only supports iOS 16 or higher
- Only supports SwiftUI
- Smaller than systemWidget, so the content needs clearer information
- The color is defined by users themselves, and default color is white
- Circular widget can only display a circular shape
Before we start to implement, we need Xcode 14 and iOS 16 devices
Creat a Widget Extension
- File -> New -> Target
- Select Widget Extension and input your Target name
- Click Activate widget scheme
- Now you can see a preview widget on the right side
Shortcut Widget
Let’s add accessoryCircular to Preview and Supported Family
In the circular widget, we want to display a PayPay icon with a “Pay” text
Let’s create a CircluarWidgetView, and put an image and text inside
And return CircluarWidgetView for circular widget family
And if we need a transparent white background for this widget, add a ZStack in the top and insert a color background in the first layer
After finishing the UI of the circular widget, we will implement the behavior of tap, then add a Deeplink for clicking this widget
ShortcutWidgetProvider
Widgets use Provider to support widget updates or getting information, but in a shortcut widget, we do not need to provide any state or information, so we can create a simple provider and set the update timeline to “.never”.
Now we can see our shortcut widget in the Lock Screen!
Balance Widget
In this section, we are going to create a more complicated widget called Balance Widget.
In this Balance widget we will display a different view depending on the user’s state, and get information from a remote server.
Since this widget needs more space to display the content, we will use widget family AccessaryRectangular to display it.
Rectangular widget has 3 states
- Unlogin
- Normal
- With Balance
Create a new widget called BalanceWidget
Let’s create a view called RectangularWidgetView
Depending on the state, the view will have a different appearance, so let’s create a ViewModel to handle this
Return RectangularWidgetView with ViewModel
In RectangularWidgetView, we can use ViewModel’s state to handle differert view apperances. First let’s start implementing Unlogin view
Implement Unlogin view
Implement Normal view
Implement Balance view
Click Behavior
Depending on the state, ViewModel will return different Deeplink URLs
In EntryView, add Deeplink URL
StaticConfiguration and IntentConfiguration
In the Balance widget provider, we will update the widget’s information depending on the user’s login/setting and get the user’s balance from a backend server, and update accordingly. In the previous shortcut widget, we used the default Provider called TimelineProvider, but this time we will use IntentTimelineProvider instead.
Widget provider is a way to let users customize their widgets by clicking widgets during edit mode. It will show a widget setting page and users can select options that the widgets provide. User privacy is always the most important thing in the world, so we want to let users choose whether to display the Balance in their Lock Screen or not. To do this, we need to add an option called showBalance in our widget intent.
So let’s create a ConfigurationIntent
- Create a widget ConfigurationIntent
- Add a parameter called showBalance, and select type Boolean
Instead of TimelineProvider, this time our provider will be IntentTimelineProvider
Use widget entry to reload widget view
Variable of showBalance will use user’s setting configuration’s value
Call API to get balance
Now we have two widgets ShortcutWidget and BalanceWidget. Sometimes we also need support from SystemWidgets, so we need to use a widget bundle to support multiple widgets
And since the Lock Screen widget can only support iOS 16 and above, we need the OS conditions as well.
Now we finished our implementation of two widgets. Since iOS 14, apple has been using widgets to provide users a new and convenient way to use our app, and from iOS 16 we can use it even on the Lock Screen!
I think there are many possibilities with widgets, so I hope this article was helpful for you in learning the basics of widget implementation and creating more interesting widgets.
In PayPay we always like to try new technologies, so we implemented widgets when iOS 14 widgets were just launched.
Of course, we will also do the same with iOS 16 widgets and continue the tradition.
Here at PayPay, we welcome people who like new technologies and ideas.