This section provides hands-on walkthroughs for how to build the user interface of popular apps and screens with SwiftUI.
How to build the beautiful Weather app that first appeared in iOS 15.
We’re going to pull apart then rebuild the user interface from the Weather app that shipped with iOS 15 onwards. The app itself is remarkably big, but we’re going to cherry pick all the interesting bits – starting with clouds…
One of the most beautiful parts of the Weather app is the way it smoothly transitions between day and night – it doesn’t just go from black to blue, but instead mimics both sunrise and sunset, smoothly animating between the two. In this tutorial we’re going to recreate that same effect in our own app.
Now that we have a working day/night cycle, we’re going to follow that up with a subtle but beautiful effect: we’ll dynamically tint our clouds so they glow with sunrise and sunset, and look darker at night time.
At night the weather app usually shows stars, although if you live in my town chances are they are usually obscured by clouds! These stars aren’t as simple as you might think, so we need to get a bit creative…
5. Rendering rain and snow, part 1
One of the most fascinating and beautiful effects in the Weather app is the use of rain and snow: some particles that fall gracefully, and some that pile up on the user interface. Building this means taking your
Canvas skill up a notch, so let’s get into it…
6. Rendering rain and snow, part 2
Now that our Weather app supports both rain and snow, we can progress onto an even more advanced effect: making those weather particles appear to interact with the rest of our user interface! This uses a fun trick, but it takes a little thinking…
It’s time for us to build one of the most eye-catching effects in the weather app: the fantastic bolts of lightning that arc down, fork off randomly, and really add some drama to stormy days. This is going to be good…
Okay, so the lightning effect took a lot of work, but now we’re on to something much easier: adding some sunshine. This is place ripe for experimentation, but we can get something good with remarkably little work.
Large parts of Apple’s Weather app is about bringing little sparks of joy to an otherwise very serious, fact-driven experience, but none more so than the random little meteors that fly by on starry nights. They move so fast so you might be tempted to skip over them, but I think it’s definitely worth exploring and having some fun with!
Other popular user interfaces you might want to try.
1. Remaking the iOS lock screen
In this article we’re going to look at how easy it is to rebuild the iOS lock screen. Yes, this isn’t hard, but along the way I think you’ll pick up a few cool SwiftUI tricks, including better date formatting, haptic buttons, and more.
In this article we’re going to look at how to rebuild the Tips app using SwiftUI, including how to make scrolling tabs of content, how to get a parallax scrolling effect, and more.
3. Remaking the welcome screen
Few things in SwiftUI are quite so easy and yet quite so rewarding as rebuilding Apple’s welcome screens. In this article we’ll do just that, making it flexible enough to adapt easily for your own apps.
Apple’s clock design has gone through a number of iterations over the years (not least for legal reasons!), and in this project we’ll seek to recreate the design used for the Clock app icon as of iOS 16.