You'll notice that our widget automatically gets its shape, size and corner radius from the system. A ZStack allows you to overlay views on top of each other. Next, let's give our widget some personality by putting a background color behind it using a ZStack. That's why I have set a minimumScaleFactor here. Because this font is pretty big, I want to allow it to shrink a bit if our layout requires it. That gets a bigger font but a similar look. At the top, I have the word "caffeine" styled with the body font "bold" and using a custom color that I've defined here in my asset catalog.īelow that, I have the amount. I'm using a VStack to stack views vertically. Next, let's update our preview to use the preview data. Let's add the property to our view to hold this data. I also have a steady constant for some preview values that I'm going to use to make my previews look real. I called it CaffeineWidgetData, and it has three properties, for the caffeine amount, the drink name and the drink date. First, let's define a struct for the data that is going to drive our UI. I'm using a WidgetPreviewContext to specify which widget family I want my preview to display. And that means everything I write here can be used in your app too. I'm going to be using SwiftUI to build this widgets view. I've already set up the widget configuration to read on a timeline so that we can focus on creating the views for our widget here. Let's jump to the demo to see how SwiftUI makes all of this easy. Also, I want the duration at the bottom of the widget to be updating live to always be correct. Note that the shape of the background for the caffeine amount is concentric with the widget's shape. At the top, we are showing the amount of caffeine currently in my body, and at the bottom, the last drink I had and how long ago that was. First you can see that it's using my app's visual identity and color scheme. This is what I want my widget to look like. I think a widget would be a great addition to the app, to be able to know at a glance at all times how caffeinated I am. So I created an app to log and track the caffeinated beverages I drink and to give me an estimate of how much caffeine is in my body. I don't know about you, but I've been drinking a lot of coffee lately. Because they're self-contained experiences, new in iOS 14 and macOS Big Sur, widgets are an amazing opportunity to learn and use SwiftUI, even if you need to deploy your app to older versions of our OSes where SwiftUI may not be available. Thanks to SwiftUI's adaptability, you can write a widget and deploy it to both iOS and macOS. With SwiftUI and WidgetKit, you can provide a timeline of views to be displayed by the Home Screen at the appropriate time. And we'll finish by going over some of the new APIs that make building widgets with SwiftUI awesome. Then, in the main part of this session, we're going to build a widgets view together. Today I'm going to show you how to build SwiftUI views for widgets.įirst, we'll talk about how widgets are enabled by SwiftUI. My name is Nils, and I'm an engineer on the iOS System Experience team.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |