1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Using WidgetKit to Create and Manage Widgets in iOS

Widgets Are Here

Contents

keyboard_tab
WidgetKits
1
What is WidgetKit?
PREVIEW7m 3s
2
Creating a Model
PREVIEW6m 54s
4
Hero View
9m 25s
5
AppStorage
10m 45s

The course is part of this learning path

Start course
Overview
Difficulty
Intermediate
Duration
1h 8m
Description

In this course, we explore what widgets are and how to work with them. You'll learn what a widget is and how you can leverage them in order to provide an optimum user experience in your apps.

Transcript

Hi, within this lecture, we're going to finalize our application by finishing up the widgetHero interview and widgetHero over here. So, in this widgetHero interview, we're going to specify what we want to show in the widget itself. Okay, this is actually a swiftIUView; nothing fancy. And in this case, it's actually taking the entry from the provider because remember we have the entry in the provider here, okay? And we have specified that we're going to carry on a hero object in our entry and this is how it will be provided to us inside of our view. So, I'm going to just delete this and I'm going to use circularImageView in this case. And for the image, you can just choose this option. And for the image, you can just create an image and say entry.hero.image or image name whatever you have chosen for the name of this property, okay?

So, this is the same hero like we have seen in the simple entry, it's getting passed in here and then it's getting passed in the view by the provider. So, provider provides us the data and the timeline that we're going to share this data or reload this data. So, we have an error in the preview. We don't even need that preview. So, I'm going to delete everything. So, let's come back to the widgetHero. So, this is the widget right now. Okay, it's the widget itself. It starts with @main, it means that it's are actually the entry point of this target, and it's going to be the view that is going to be shown when we run this. So, as you can see, we create a kind. So, you can create more than one widget in one target and this kind specifies what kind of widget is this. So, it's kind of an ID. They generally use the term kind. Of course, you can change this variable to something else, but I suggest you just stick with it.

And after that, we have our body, okay? And remember, you need to update some other things if you change this kind string, so I'm going to leave this as it is. In the body, it's a little bit different from the regular body because it's not a view. It's a widgetConfiguration, okay? So, in the widgetConfiguration we have intentConfiguration. In fact, we have two configurations: one staticConfiguration and an intentConfiguration. So, staticConfiguration makes the widget that is not user configurable. So, user won't configure the widget at all, but in the intentConfiguration you can do whatever you want even though we're not going to configure or make our application or our widget configurable. We can still use the intentConfiguration and there are some bugs in the staticConfiguration as I record this video. So, I'm going to go with the intentConfiguration; I'm not going to change any code in here.

As you can see, this defines the General settings of our widget, like the provider, like the kind. So, we already have all of those in place and they are already filled in in here. What we actually we shouldn't change anything in the widgetHero widget at all, okay. Everything seems to be in place because it's actually specifying what kind of view it's going to show and we already have created that view and we already modified that view with the circularImageView. Now, the only thing left to do is to just call this widgetHero into a view in the configuration and it's already been done for us. And of course, you can change this configurationDisplayName and description because it will be shown to the user in the library. So, I'm going to call this Hero widget. Maybe this one as well like hero widget or widget hero, I don't know. So, there you go. Now, in fact, we are ready to test this and see if we can see our widget because there is not much else to do here.

Remember, you have to just change your target if you activated the target extension scheme before. Now, I have selected my app as the real target, now it's going to load up my application. And as you can see, we can see the Superman we can see the Batman and stuff. So, I'm going to go to the home screen by dragging here, and here you go. We have our widget, so this is cool. Now, if you tap on the widget, it will open up the app. If I tap on the Batman or any other Superhero, it should actually change the widget to that specific superhero, right? So, let me go back. I believe it changes, but let's see if we can see all the details in here. There's some a bug, even though I just hit on that 'Batman' it doesn't get written in the logs as you can see and it doesn't even change. There is obviously something wrong with this widget. So, I'm going to remove this and try to edit one more time.

So, if you want to activate this jiggly mode, you can just hold on for one second and it will start jiggling and you can just hit on this '+' button, and you can see the library over here, you can see the hero widget. And once we open that hero widget, here we go, this is the library. This is the descriptions that we have written so far. So, I'm going to choose one of those from here, okay? I'm going to say add widget. So, here we go. We have added the biggest widget, we can see it clearly. Now, I can't just drag and drop it in anywhere I want since this is too big, I cannot do that actually, but in the small ones in the medium one, I can do that. Let me show you as well. Let me go to here and create some small widget like that, okay? If I add it I can just drag and drop it anywhere I want inside of my home screen, and here we go. It looks good, right?

But let me go back and try to change this widget actually try to change the image of this widget. For some reason it doesn't work. So, let me try to click on those like I can click on those as you can see it gets written in the logs, but even though I have clicked on the Batman, it didn't even change, right? So, it actually... There isn't anything wrong with the tap gesture or something like that. Everything seems to be working, but my widget doesn't get refreshed. I know I have specified the timeline to be never, the timeline policy to be never, but I don't want to change it according to time. I want to change it according to the choice of the user. So, if you come over here to contentView there is a way to do that. You can just say update widget every time I do this.

So, every time I save something to the default then I'm going to update or just let the widget know that there has been some change. So, I'm going to import the widgetKit in our Content View as well so that I can reach its methods, I can reach its classes. And I'm going to come over here and I'm going to just write widgetCenter and in the widgetCenter you can just call .shared, and after the .shared you can just say reloadTimelines. So, you can just say reloadAllTimelines and it will reload all the widgets that you have created or you can specify a kind as well, like reloadTimelines of kind. You can try both and see and there will be no difference to either of those because we only have one kind and you can specify the kind if you choose this option by writing the exact same thing that you see here. So, this is widgeHero.

I'm going to copy and paste this or write exactly the same in here. Right now, this will notify the widget that something has been changed. Its going to refresh or reload the timelines. So, let's see if that works or not. I'm going to open this and I'm going to see the widget, right? So, let me try to click on the Superman and let me go back to home screen and here we go, we have the Superman. If I go over here and if I click on the Batman here you go, now it changes to Batman. Let me try that Ironman. And here we go. Now it changes to Ironman and also our big widget also has been changed, okay? Now, let's try this like that. Here you go. Now, we see the Batman. So, this is how you create widgets. Now, the important part here is that it's not that you actually remember all of these codes or it's not that you memorize everything; it's about that you understand what user experience that you should provide with the widget, and also the timeline policy or timeline structure behind it if you want, you can specify a time or period that should actually update the views in the widget. And in order to see further documentation, of course, you can go to developer.apple.com. Try to think that if this is going to be beneficial for the user, if user will be happy if they see it on their home screen and you will get the answer, you will know the answer whether to implement the widgets or not and what to show in the widgets and actually then to refresh them as well. Remember there are not many applications, okay? There are not many apps, they're part of like an app, like an extension of an app. Please keep that in mind or otherwise you will be rejected from the app store if you just create a widget app. So far, so good. Thank you for watching. Let's stop here and continue within the next one.

 

About the Author
Students
420
Courses
55
Learning Paths
3

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics