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

Hero View


What is WidgetKit?
Creating a Model
Hero View
9m 25s
10m 45s

The course is part of this learning path

Start course
1h 8m

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.


Hi, within this lecture, we're going to finish our SuperheroView, so that we can finally be over with this ContentView, and we can move on to the WidgetKit. So, I'm going to add a new view. So, I'm going to come over here and right click and say new file and, of course, I'm going to choose the SwiftUIView. So, over here, I'm going to call this HeroView. Of course, the name doesn't matter, you can choose whatever you want in this HeroView, we're going to use the CircularImageView that we have created and the other text and like name and the real name information that we have. So, in order to do that, of course we're going to need a hero, right? So, we're going to need a hero object over here and then we can get the hero details from that object, and this object will be passed to us via an API or something like that. And in this case, of course, we're going to create just simple list view. So, I'm going to give some exemplary hero like Batman here in the previews, so that we can keep track what's going on. So, in the body, what I'm going to do, I'm going to put our CircularImageView first, and once we do that, it will ask for an image, right? Because we have constructed it that way. And this image can be an image of name hero.image, right? Because we can get the related image name from the related hero object, so I'm going to say resume, and we're going to see image CircularImageView. Of course, this is way too big for us because we only want to display this like an icon, and at the right hand side we want to display the names. So, I'm going to give a frame over here, because we can specify the width and height and alignment within a frame. So, like a suggestion, it adds 100 and 100 and .center to us. It looks good to me, right? It looks good. Of course, you can do this relative to the screen size like with UI.screen.main.bound, like we have seen before. I'm not going to go into that because this section is about widgets and we have spent so many hours on that, so many minutes at least on this view right now. So, I'm going to leave this as it is. It looks good, okay? And at the right hand side of this icon, I want to put the texts, right? So, I'm going to put this in an HStack which is a horizontal stack, so that I can put anything I want at the right hand side of it. So, rather than CircularImageView, maybe I want to put some text over here showing the hero.name, right? And after the hero.name, maybe we can just put a VStack over here in order to show the hero.realname, just right under the hero.name. This is exactly what I had in mind. So, this is CircularImageView and at the right hand side, we have the name and the real name. So, this is good, but of course, this is not enough because they are very close to each other. So, let me just change the font first of all. I'm going to give a large title to their name, okay? So, it looks better and we can change the color of this and font of this. So, I'm going to change the font weight, I'm going to make it bold, okay? And let's give it a color. So, what was it? It was foreground color and not blue, I believe blue doesn't fit with this color scale. I'm going to go with the purple. This is good and for the hero.realname, maybe we can make it bold or maybe we can make it a little bit bigger, but it looks good in this way as well. So, I'm going to say bold. Here you go. Now it looks better but again they are very close to each other. So, I'm going to put some spacers between the objects like views. So, I'm going to say spacer in between the CircularImageView and the VStack. And right now this is not better because right now they are like at the edges of the screen, so I'm going to put another spacer at the right hand side, so right after the VStack. Let me come over here. And after the VStack, we can put the spacer over there. This is much better, but again the icon is at the far left side, so I believe we need to take care of that as well maybe with a spacer or maybe with a padding, a regular padding, okay? Of course, this is trial and we can just try different things like I'm going to give it a padding over here. Yep, this looks good, so this looks okay. And we're going to have a lot of things over here like Superman, Tony Stark, the long names and stuff. So, I want to make sure that this hole thingy over here have a padding as well so that it can adjust its weight, it can adjust its spaces accordingly. So, this looks good, but again since we're going to have some real long names, I'm going to give a frame to the HStack as well, because I want this HStack to stretch as much as possible all the way to the edges in terms of width, not height, of course, so that we won't come across any kind of funny problems. So I'm going to come over here to HStack and just say .frame, okay? And for the width, of course, not 100. And we can just delete the height and alignment, maybe we can leave the alignment. We can just work with the width. I want this to be UIScreen.main.bounds.width, so it will be equal to the current screen size of the phone, so it will be stretched all the way to the edges. Great. Now we have what we want, right? So, I can leave this as center as well. So, our HeroView is ready, I believe. Of course, you can customize it more if you want, but I'm done with this because we're going to have to focus on the WidgetKit. So, I'm going to come over here to ContentView. So, we haven't done anything yet in the ContentView. First of all, I'm going to create an array, so, I'm going to call the superHeroArray. I'm going to put the Superman, Batman, and Iron Man inside of this array, so that we can have some data, and I'm going to come over here to our text. I'm going to delete this. I'm going to provide a ForEach loop over here, so that we can do this inside of a VStack like ForEach, okay? So, that we can have a Table View like Table View like view, okay? So, I'm going to give the superhero array over here. And of course, we're going to have to open the curly braces but that's not enough, we have to specify a name, a variable so that we can assign every element inside of the superHeroArray to this, okay? So, that's good. So, what I'm going to do now, I'm going to display this hero, right? Where will I be displaying that? I will be displaying that in HeroView. It will ask for a hero, and I'm going to come over here and say hero. So, that's it, that's how you will display all the heroes inside of your ContentView. So, here you go, this is exactly what I had in mind, we are done with the ContentView, finally. Now what we need to do, we need to understand wherever user taps on that ContentView, we can understand that hero and we can just get the details of that hero so that we can save it in the user defaults, right? We're going to have to implement that functionality and then we can move on to creating our widget. So, that's what we're going to do within the next lecture.


About the Author
Learning Paths

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