Emerging Technologies

Make Animated Live widgets in the iPhone Lock screen using SwiftUI

iPhone Lock screen using SwiftUI

What are widgets

Widgets are a quick and easy way to add extra functionality to your iPhone or iPad, bringing you the timely information of your favorite App you need at a glance. They are tiny programs that provide shortcuts to features normally found inside your apps.

In iOS 16, Apple has given the Lock Screen a massive overhaul. One of the most anticipated features that come along with the overhaul is the Lock Screen widgets. As the name implies, Lock Screen widgets are widgets that display glanceable content that is constantly visible on the iPhone and iPad Lock Screen. for example, the temperature, air quality, battery level, or upcoming calendar events.

So let’s see how we can extend our apps with some shiny new widgets in our iPhone’s Lock screen with SwiftUI and WidgetKit.

There are 3 new types of Widgets added to the original Widget Family:

  • accessoryRectangular, which shows multiline text or even smaller graphs
  • accessoryCircular, used for showing progress views and gauges
  • accessoryInline, which presents text only, and is useful for somewhat longer content
  • accessoryCorner also exists, but as that one is solely used on watchOS, we’ll save it for another time.
Types of Widgets


Keep the design in mind

The space we get for our widgets is quite limited.

Users will combine different apps’ widgets on their lock screens, so you should stick to Apple’s styling rules when designing the widgets. They expect specific information when seeing bold text or a vertical line next to the content, so do your research and use the advantage of default font parameters and styles offered by SwiftUI.


Setup

  • First Create a simple SiwftUI project.
  • Then add a new target to your project and create a widget extension.
  • Give the widgets target a name. our target will be named Lockscreen_WidgetsEntryView. you can give any name you want according to your App
  Setup swift UI


Implementation
 

  • In Auto Generated code you will see Timeline Provider, Entry View, Widget Configuration, Preview Provider, To understand this you can refer to Apple’s official document below link https://developer.apple.com/documentation/widgetkit
  • First, we will see how we can add a normal widget on the Lock screen, Then we will add an animated, dynamic, or Live widget on the Lock screen.
  • Then in the body inside your widget struct, you can add text, images, gauge, etc. as your widget as per the given code for a different type, just keep size and design in mind and be precise about that.
     
widget struct
  • If you want to see a preview on canvas, you have to add different entry views in the preview provider for the different types of the widget (accessoryInline,accessoryCircular, accessoryRectangular), also give the previewDisplay name accordingly so that you can find different sections of the widget on the canvas.
     
Struct Lockscreen Inline
  • Here are  screenshots from the canvas for Inline, Circular, and Rectangular Widgets
     
canvas for Inline
  • Now you know how to add a static widget on the lock screen, let’s move forward to dynamic widgets.
  • Well,  iOS does not support any Video or Animated Image in the Lockscreen widget directly. But of course, it’s providing a way to Refresh our widgets.
  • We will use TimelineEntry, Snapshot, WidgetCenter  From WidgetKit to Refresh our widgets.
  • In our example, we are changing the Image/Frame per second so it looks like an animated Image or GIF.
  • We have to create two properties in SimpleEntry struct as below
     
Struct SimpleEntry
  • Then please declare two global properties images for the number of frames and current events to maintain the refresh cycle
Var Current Event
  • Here images are chair images with different dimensions so when it changes per second it will look like a rotating chair.
     
rotating chair
  • Update placeholder as it is returning SimpleEntry and add current date and the First image of chair as below
     
Func place holder
  • Now, add getTimeline(in context: Context, completion: @escaping (Timeline) -> ()) to refresh/reload our widget.
  • Here we are updating SimpleEntry every second and reloading our timeline every minute, so if we iterate sixty images per second and restart or update our timeline every minute. So it will generate continuous infinite animation.
  • Then update snapshot getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ())  to update entry every single second .
  • Use   WidgetCenter.shared.reloadAllTimelines() to reload your widget.
     
func getsnapshot
  • Now everything has been set up , now we just have to update the entryView as we did in the static widget, and make a property of entry that will be conforming the type of Provider.Entry and simply return it to particular widget view as blow.
struct lockscreen
  • Here’s a screenshot from the output.
     
Live Widget
  • Click here to see a video of our live widget.
  • Enjoy the animated, Dynamic o  Live Widget on your iPhone’s Lock screen.


Lockscreen widgets are one the most useful and entertaining features that Apple has brought in iOS16. Live widgets can be anything like Funny animated images, Football scores, Stocks Info, Crypto Info, or News Headlines. That makes people's lives simple and easier. Now, you decide what will be your lock screen widget and which widget you can develop, your idea can influence ​​people’s lives

This blog is written by, Adityda Vaghela– iOS Developer at TridhyaTech

Emerging Technologies

IndiaSoft 2019 Technology Event is Here- ContCentric Participates as Exhibitor

This blog likely discusses ContCentric's participation as an exhibitor in the IndiaSoft 2019 technology event, showcasing its offerings and contributions to the tech industry during the event.

Emerging Technologies

All You Need To Know About Emerging Technologies

Emerging technology is a term generally used to describe a new technology, but it may also refer to the continuing development of existing technology.

Transform Your Business With Digital Enterprise Solutions

Contact us

Our Offices

INDIA AHMEDABAD, INDIA

401, One World West, Nr. Ambli T-Junction 200, S P Ring Road, Bopal, Ahmedabad, Gujarat 380058

UK
UK

Kemp House 160 City Road, London, United Kingdom EC1V 2NX

GERMANY GERMANY

Nürnberger Str. 46 90579 Langenzenn Deutschland

AUSTRALIA AUSTRALIA

Level 36 Riparian Plaza, 71 Eagle Street, Brisbane, QLD 4000

USA USA

4411 Suwanee Dam road, Bld. 300 Ste. 350 Suwanee GA, 30024

SOUTH AFRICA SOUTH AFRICA

Cube Work Space, 24 Hans Strijdom Avenue, Cape Town

UAE DUBAI, UAE

B 503 Sama Tower, Sheikh Zayed Road, United Arab Emirates