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

Circular Images


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 start creating our views in order to show the details of the superhero elements. So far we have created our struct and we have created some objects out of it. So, I'm going to create a new SwiftUIView. So, I'm going to right click over here and say 'New file' and of course, I will choose the SwiftUIView. And the first view that I'm going to create is the ImageView of the superhero icon. So, I'm going to call the CircularImageView. We're going to show it in a circular way and I'm going to say 'Create.' Very good. We have seen how to do this in the SwiftUI section, so I'm going to be fast over here, I'm going to take in an image in our struct. So, this image will be given to us and once we do that it will give an error in the preview, so we can fix this error, we can add an image just to see how it looks like. So, I'm going to choose an image and I'm going to choose batman as a preview image, okay? So, you can choose the other ones if you want. And once we do that, the error should go away and we can come back to our body. In the body, of course, I'm going to show this image. So, I'm going to say image and say resume and it should bring up the batman on the right hand side. So, let's see if that works or not. Yes, here we go, we see the batman, very good. But of course, we want to customize this a little bit so that it can look in a better way. First of all, I'm going to make it resizable so that when I resize it it won't get distorted or something like that, and once we do that it will just fill out all the screen and of course, we can make it go away by specifying this pack ratio, not as fill, okay? Fill fills up whole the screen like this, and rather than that, I'm going to say .fit. So, as you can see we have .fill or .fit. So, .fit is much better as you can see. Once we do that we can make it circular, like with a clipShape and we can come over here and say .clipShape and the shape that we want is .circle or circle itself, like that. So, here we go, this is good, but this is not enough because we want it to be much more sophisticated, so I want to give it an overlay. So, I'm going to say .overlay so that I can stroke a line. So, the overlay that I'm going to do is the circle one more time. So, let's say circle, but this will bring up a whole circle. So, let me show you what I mean, let me close this parentheses and it will just make a circle on the top of our image, which is not what we want. So, I'm going to say .stroke. So, when I say .stroke it will just leave this border for us, which is what we want. But this doesn't look good. So, I'm going to change the properties of the stroke. So, what I'm going to do, I'm going to specify the color, so I'm going to say color.purple, for example, of course, you can try it with other colors as well, and I'm going to say ,lineWidth, so I'm going to give it a lineWidth to make this a little bit thicker, like 5 may be enough. Yep, here we go. Now, it looks very good. Last but not least, I'm going to add a shadow to it. So, I'm going to say shadow and 10 radius seems okay for me. Maybe you can try 15 or 5 or 2 depending on your choice. But in my experience, I believe 10 is good. As you can see there is a little shadow over here at a radius of 15 right now, may be 15 is a little bit more. You can try with different radius, you can try with different colors, whatever you want. The thing is we need the CircularImageView in order to show it in the widget kit and also in order to show it in our tableView like view again. So, we need the CircularImageView. Make sure you make the CircularImageView and then you're done. We're going to stop here. And within the next lecture, we're going to create the hero view that we're going to be displaying in our ContentView. Let's do that in 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