Cloning Tinder With SwiftUI
Learn how to create real-world layouts with SwiftUI
Did you hear about the new UI Framework Apple annouced at WWDC 2019? It's called SwiftUI and it feels like magic.
Mac, iOS, iPad, WatchOS and tvOS developers are hyped!
- SwiftUI is compatible with all Apple platforms
- SwiftUI is declarative
- SwiftUI is not just a wrapper for UIKit — it's new and built using Swift!
- SwiftUI is not based on Storyboards! Hello, code review :)
- SwiftUI replaces AutoLayout — everything is based on stack views now
That's a lot, and since the whole community is already creating plenty of SwiftUI content, even writing books, I want to focus on a practical example of how to replicate Tinder's UI using this lovely framework. Are you ready?
First things first
When you create a new project using XCode 11 and check the SwiftUI box, it comes with a ContentView file:
There are two important things to clear up here:
- The first struct is where you write your view/layout code.
- The second struct is where you declare what you want to preview. Finally, we have real-time previews!
We’ll build a few components and when you want to check what they look like, just change the
ContentView() inside previews var by the component you want to preview.
This is the layout we want to achieve today:
Cool right? It is a vertical layout composed of 3 important components:
- The top component contains three horizontally aligned buttons.
- Middle component is user image and info.
- Bottom component contains five horizontally aligned buttons.
We’re ready to create our first component! Since our interface has many buttons, we’ll start by writing a helper function that creates a button based on an image asset name.
Cool! This is going to help us because our first view needs three different buttons aligned horizontally. Let's name it TopStack:
If you’re familiar with UIKit, everything looks good until you read Spacer(). Spacers can be used to fill the gap between stack items in order to fit the remaining view space. HStack should be used to build horizontal stack layouts — if you want to go vertical use VStack.
Here's our first result:
We can do the same for the bottom controls, which contains five different buttons. Let's name it BottomStack. Very similar to the first one isn’t it?
Image, overlays, and gradients
Looking good! Let's dive a bit deeper. Now we need to build the view between top and bottom controls, how should it look? Basically we want an image with rounded corners, but with one extra detail: if we want to show user info, like name and age, we need a small black gradient on the bottom. Our font color is white and the gradient allows us to see the user's name if the image is bright. We can call that
So, a couple of new things here! Image…resizable? OK…Why? It's because our image needs to fill the whole space between top and bottom controls!
What about overlay? We're showing user info above the image, so we need to overlay the image with a gradient layer — we can use different shape forms as layers, such as Circles and Rectangles. For now, let's build a rectangle and fill it with a gradient. Our gradient starts clear at the middle and finishes black at the bottom.
Check the results:
Now we want to show the user's name, age, and profession above the image. This view is called
UserInfoView — check the code below:
This guy above here starts creating a vertical stack containing a Spacer and two Text components. We need the spacer again here because it'll keep our user info on the bottom of the stack. We also want to add some padding to create some space from the view borders.
Time to combine UserImageView and UserInfoView!
CardView, containing the user image and info:
UserInfoView to be above
UserImageView — easy to achieve on SwiftUI with
ZStack. We have used
VStack for stacking views horizontally and vertically,
ZStacks are used to pile views on top of each other. At the end of the file, you can see how easily you can add shadows using SwiftUI.
Here's the result:
The grand finale
Let's combine the three components inside ContentView and get to the final layout:
What do we have here? Basically, we are stacking the three components vertically, with a 20 height spacing between each. We also added some horizontal padding to
CardView, and finally a bottom respire for the
ContentView file change your preview struct by
ContentView() and we are done!
This is our beautiful layout made using SwiftUI: