Cloning Tinder With SwiftUI

Learn how to create real-world layouts with SwiftUI

David Doll
Jun 11 · 4 min read
  • 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

First things first

When you create a new project using XCode 11 and check the SwiftUI box, it comes with a ContentView file:

  • The second struct is where you declare what you want to preview. Finally, we have real-time previews!

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.

Top controls

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.

Bottom controls

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 UserImageView.

User info

Now we want to show the user's name, age, and profession above the image. This view is called UserInfoView — check the code below:

Time to combine UserImageView and UserInfoView!

Let's create CardView, containing the user image and info:

The grand finale

Let's combine the three components inside ContentView and get to the final layout:

Final result

Inside theContentView file change your preview struct by ContentView() and we are done!

Better Programming

Advice for programmers.

David Doll

Written by

iOS Developer

Better Programming

Advice for programmers.