Remaking apps

This section provides hands-on walkthroughs for how to build the user interface of popular apps and screens with SwiftUI.

Weather

How to build the beautiful Weather app that first appeared in iOS 15.

Starting with clouds

36:44

1. Starting with clouds

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

Creating a day/night cycle

53:37

2. Creating a day/night cycle

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.

Tinting our clouds

18:43

3. Tinting our clouds

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.

Drawing a star field

43:11

4. Drawing a star field

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…

Rendering rain and snow, part 1

37:55

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…

Rendering rain and snow, part 2

39:22

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…

Animating lightning bolts

39:22

7. Animating lightning bolts

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…

Bringing the sun out

21:29

8. Bringing the sun out

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.

Adding a meteor shower

25:55

9. Adding a meteor shower

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!

Others

Other popular user interfaces you might want to try.

Remaking the iOS lock screen

26:15

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.

Remaking the Tips app

27:45

2. Remaking the Tips app

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.

Remaking the welcome screen

22:31

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.

Remaking the clock

44:34

4. Remaking the clock

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.