Skip to content

Instantly share code, notes, and snippets.

Last active August 13, 2021 01:51
What would you like to do?
Recreating the Tinder home screen using SwiftUI and Swift Playgrounds on iPad
import SwiftUI
import PlaygroundSupport
struct Screen: View {
@State var size: CGSize = .zero
var body: some View {
//Lets Start with our Tinder Home Screen Recreate
//First, we need entire background to be gray-ish color. ZStack puts different views on top of each other.
ZStack {
Color.init(red: 242/255, green: 242/255, blue: 242/255).edgesIgnoringSafeArea(.all)
//Now we overlay everything on top of the screen above
VStack {
//Lets create the top button bar
HStack {
Image(systemName: "person.fill").resizable().frame(width: 35, height: 35).foregroundColor(.gray)
Image(systemName: "flame.fill").resizable().frame(width: 30, height: 35).foregroundColor(.red)
Image(systemName: "message.fill").resizable().frame(width: 35, height: 35).foregroundColor(.gray)
//Lets have the profile images on top of each other using ZStack
ZStack {
Image(uiImage: #imageLiteral(resourceName: "IMG_1473.HEIC")).resizable().frame(height: 400).cornerRadius(12).padding(.vertical, 15).padding(.horizontal, 8).shadow(radius: 4)
//We want to be able to drag the picture on top. For this tutorial, let's learn how to add gestures to your components
Image(uiImage: #imageLiteral(resourceName: "IMG_0231.HEIC")).resizable().aspectRatio(contentMode: .fill).frame(height: 400).cornerRadius(12).padding(.vertical, 15).padding(.horizontal, 8).shadow(radius: 4).gesture(DragGesture().onChanged({ (value) in
self.size = value.translation
}).onEnded({ (value) in
self.size = .zero
//Great, our final part is the action buttons on the bottom
HStack {
Group {
Image(systemName: "arrow.counterclockwise").resizable().frame(width: 25, height: 25).padding().foregroundColor(.yellow)
Image(systemName: "xmark").resizable().frame(width: 30, height: 30).padding().foregroundColor(.pink)
Image(systemName: "star.fill").resizable().frame(width: 25, height: 25).padding().foregroundColor(.blue)
Image(systemName: "heart.fill").resizable().frame(width: 25, height: 25).padding().foregroundColor(.green)
Image(systemName: "sparkles").resizable().frame(width: 25, height: 25).padding().foregroundColor(.purple)
}.background(Color.white).shadow(radius: 25).clipShape(Circle())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment