{"id":6264,"date":"2019-06-21T15:07:49","date_gmt":"2019-06-21T15:07:49","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=6264\/"},"modified":"2026-08-15T08:48:02","modified_gmt":"2026-08-15T08:48:02","slug":"hands-overview-swiftui","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","title":{"rendered":"A hands-on overview of SwiftUI"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Did you hear about the new UI Framework Apple announced at WWDC 2019? It&#8217;s called <\/span><b>SwiftUI<\/b><span style=\"font-weight: 400\"> and it feels like magic.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Mac, iOS, iPad, watchOS and tvOS developers are hyped!<\/span><\/p>\n<p><!--more--><\/p>\n<p><span style=\"font-weight: 400\">Here&#8217;s why:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">SwiftUI is compatible with all Apple platforms<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">SwiftUI is declarative<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">SwiftUI is not just a wrapper for UIKit \u2014 it&#8217;s new and built using Swift!<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">SwiftUI is not based on Storyboards! Hello, code review \ud83d\ude42<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">SwiftUI replaces AutoLayout \u2014 everything is based on stack views now<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">That&#8217;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 <\/span><span style=\"font-weight: 400\">a Tinder-like UI using this lovely framework<\/span><span style=\"font-weight: 400\">. Are you ready?<\/span><\/p>\n<h2><b>First things first<\/b><\/h2>\n<p><span style=\"font-weight: 400\">When you create a new project using Xcode 11 and check the <\/span><b>SwiftUI <\/b><span style=\"font-weight: 400\">box, it comes with a ContentView file:<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">import SwiftUI\n\nStruct ContentView : {\n  var body: some View {\n    Text(\"Hello World\")\n  }\n}\n\n#if DEBUG\nstruct ContentView_Previews : Previewprovider {\n  struct var previews: some View {\n    ContentView()\n  }\n}\n#endif<\/code><\/pre>\n<p><span style=\"font-weight: 400\">There are two important things to clear up here:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">The first struct is where you write your view\/layout code.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">The second structure is where you declare what you want to preview. Finally, we have real-time previews!<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">We\u2019ll build a few components, and when you want to check what they look like, just replace the <\/span><span style=\"font-weight: 400\">ContentView()<\/span><span style=\"font-weight: 400\"> inside the previews var with the component you want to preview.<\/span><\/p>\n<h3><b>This is the layout we want to achieve today:<\/b><\/h3>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"wp-image-6266 size-full aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid1.png\" alt=\"A cellphone screen with a Tinder-like layout.\" width=\"494\" height=\"980\"><\/p>\n<p>&nbsp;<\/p>\n<h3><b>Cool, right? It is a vertical layout composed of 3 important components:<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">The top component contains three horizontally aligned buttons.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Middle component is user image and info.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Bottom component contains five horizontally aligned buttons.<\/span><\/li>\n<\/ul>\n<h2><b>How do you build a horizontal button row in SwiftUI?<\/b><\/h2>\n<p><span style=\"font-weight: 400\">You build a horizontal button row in SwiftUI with an HStack, adding a Spacer between the items to fill the remaining view space. That is exactly how our three top controls work, so we\u2019re ready to create our first component! Since our interface has many buttons, we\u2019ll start by writing a helper function that creates a button based on an image asset name.<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">func button(for icon: String) -&gt; some View {\n  Button(action: {}) {\n    Image(icon)\n      .renderingMode(.original)\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400\">Cool! This is going to help us because our first view needs three different buttons aligned horizontally. Let&#8217;s name it <\/span><b>TopStack:<\/b><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct TopStack : View {\n  var body: some View {\n    HStack {\n      button(for: \"top_left_profile\")\n      Spacer()\n      button(for: \"tinder\")\n      Spacer()\n      button(for: \"top_right_messages\")\n    }\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400\">If you\u2019re familiar with UIKit, everything looks good until you read <\/span><b><i>Spacer(). <\/i><\/b><i>S<\/i><span style=\"font-weight: 400\">pacers can be used to fill the gap between stack items in order to fit the remaining view space. <\/span><b>HStack<\/b><span style=\"font-weight: 400\"> should be used to build horizontal stack layouts \u2014 if you want to go vertical, use <\/span><b>VStack<\/b><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Here&#8217;s our first result:<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-6267 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid2.png\" alt=\"A fire drawn on an application layout.\" width=\"668\" height=\"100\"><\/p>\n<h2><b>Bottom controls<\/b><\/h2>\n<p><span style=\"font-weight: 400\">We can do the same for the bottom controls, which contain five different buttons. Let&#8217;s name it <\/span><b>BottomStack<\/b><span style=\"font-weight: 400\">. Very similar to the first one, isn\u2019t it?<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct BottomStack : View {\n    var body: some View {\n      HStack {\n        button(for: \"refresh_circle\")\n        button(for: \"dismiss_circle\")\n        button(for: \"like_circle\")\n        button(for: \"boost_circle\")\n      }\n    }\n  }<\/code><\/pre>\n<h4><img decoding=\"async\" class=\"size-full wp-image-6268 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid3.png\" alt=\"Five Tinder-like buttons.\" width=\"520\" height=\"136\"><\/h4>\n<h2><b>How do you add overlays and gradients to an image in SwiftUI?<\/b><\/h2>\n<p><span style=\"font-weight: 400\">Looking good! You add an overlay to a SwiftUI Image with the overlay modifier, passing it a shape such as a Rectangle or a Circle, and then fill that shape with a LinearGradient. The cornerRadius modifier rounds the corners of that same image. Let&#8217;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&#8217;s name if the image is bright. We can call that <\/span><span style=\"font-weight: 400\">UserImageView<\/span><b>.<\/b><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct UserImageView : View {\n  var body: some View {\n    Image(\"kaori\")\n      .resizable()\n      .overlay (\n        Rectangle()\n          .fill (\n            LinearGradient(gradient: Gradient(colors: [.cler, .black]),\n                           startPoint: .center, endPoint: .bottom)\n          )\n          .clipped()\n      )\n      .cornerRadius(10, antialiased: true)\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400\">So, a couple of new things here! Image\u2026resizable? OK\u2026Why? It&#8217;s because our image needs to fill the whole space between top and bottom controls!<\/span><\/p>\n<p><span style=\"font-weight: 400\">What about overlay? We&#8217;re showing user info above the image, so we need to overlay the image with a gradient layer \u2014 we can use different shape forms as layers, such as Circles and Rectangles. For now, let&#8217;s build a rectangle and fill it with a gradient. Our gradient starts clear at the middle and finishes black at the bottom.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Check the results:<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-6269 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid4.png\" alt=\"A cellphone screen with a Tinder-like layout.\" width=\"472\" height=\"940\"><\/p>\n<h2><b>User info<\/b><\/h2>\n<p><span style=\"font-weight: 400\">Now we want to show the user&#8217;s name, age, and profession above the image. This view is called <\/span><b>UserInfoView \u2014 <\/b><span style=\"font-weight: 400\">check the code below:<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct UserInfoView : View {\n    var body: some View {\n        VStack(alignment: .leading) {\n            Spacer()\n            Text(\"Kaori Miyazono, 30\")\n                .font(.title)\n                .fontWeight(.regular)\n                .color(.white)\n            Text(\"Musician\")\n                .font(.system(size: 17))\n                .fontWeight(.light)\n                .color(.white)\n            }\n            .padding()\n    }\n}\n<\/code><\/pre>\n<p><span style=\"font-weight: 400\">This guy above here starts creating a vertical stack containing a Spacer and two Text components. We need the spacer again here because it&#8217;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.<\/span><\/p>\n<h3><b>Time to combine UserImageView and UserInfoView!<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Let&#8217;s create <\/span><span style=\"font-weight: 400\">CardView<\/span><span style=\"font-weight: 400\">, containing the user image and info:<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct CardView : View {\n  var body: some View {\n    ZStack(alignment: .leading) {\n      UserImageView()\n      UserInfoView()\n    }\n    .shadow(radius: 2)\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400\">We want <\/span><span style=\"font-weight: 400\">UserInfoView<\/span><span style=\"font-weight: 400\"> to be above <\/span><span style=\"font-weight: 400\">UserImageView <\/span><span style=\"font-weight: 400\">\u2014 easy to achieve on SwiftUI with <\/span><span style=\"font-weight: 400\">ZStack<\/span><span style=\"font-weight: 400\">. We have used <\/span><span style=\"font-weight: 400\">HStack<\/span><span style=\"font-weight: 400\"> and <\/span><span style=\"font-weight: 400\">VStack<\/span><span style=\"font-weight: 400\"> for stacking views horizontally and vertically. <\/span><span style=\"font-weight: 400\">ZStacks<\/span><span style=\"font-weight: 400\"> 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.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Here&#8217;s the result:<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-6272 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid6.png\" alt=\"A cellphone screen with a Tinder-like layout.\" width=\"454\" height=\"928\"><\/p>\n<h2><b>The grand finale<\/b><\/h2>\n<p><span style=\"font-weight: 400\">Let&#8217;s combine the three components inside <\/span><b>ContentView<\/b><span style=\"font-weight: 400\"> and get to the final layout:<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct ContentView : View {\n  var body: some View {\n    VStack(alignment: .center, spacing: 20) {\n      TopStack()\n        .padding(.horizontal)\n      CardView()\n        .padding(.horizontal, 10)\n      BottomStack()\n    }\n    .padding(.bottom, 15)\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400\">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 <\/span><span style=\"font-weight: 400\">TopStack<\/span><span style=\"font-weight: 400\"> and <\/span><span style=\"font-weight: 400\">CardView<\/span><span style=\"font-weight: 400\">, and finally some bottom breathing space for the <\/span><span style=\"font-weight: 400\">VStack<\/span><span style=\"font-weight: 400\">.<\/span><\/p>\n<h2><b>Final result<\/b><\/h2>\n<p><span style=\"font-weight: 400\">Inside the <\/span><span style=\"font-weight: 400\">ContentView<\/span><span style=\"font-weight: 400\"> file, change your preview struct to <\/span><span style=\"font-weight: 400\">ContentView()<\/span> <span style=\"font-weight: 400\">and we are done!<\/span><\/p>\n<p><span style=\"font-weight: 400\">This is our beautiful layout made using SwiftUI:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6273\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid7.png\" alt=\"A cellphone screen with a Tinder-like layout.\" width=\"800\" height=\"1376\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid7.png 800w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid7-768x1321.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/davidgdoll\/tinder-clone-swiftui\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"https:\/\/github.com\/davidgdoll\/tinder-clone-swiftui\">Source code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you hear about the new UI Framework Apple announced at WWDC 2019? It&#8217;s called SwiftUI and it feels like magic. Mac, iOS, iPad, watchOS and tvOS developers are hyped!<\/p>\n","protected":false},"author":65,"featured_media":6279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"A Hands-On SwiftUI Overview: Build a Tinder-Like UI","_yoast_wpseo_metadesc":"Rebuild a Tinder-like screen in SwiftUI and see Apple's framework in action: stack views instead of AutoLayout, button rows, image overlays and gradients.","_yoast_wpseo_meta-robots-noindex":"","_yoast_wpseo_canonical":"","footnotes":"","ckl_wpml_lang":"","ckl_wpml_source_id":0,"ckl_wpml_status":""},"categories":[1425,432],"tags":[305,21,15],"class_list":["post-6264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-engineering","category-engineering","tag-tag-development","tag-tag-ios","tag-tag-mobile"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>A Hands-On SwiftUI Overview: Build a Tinder-Like UI<\/title>\n<meta name=\"description\" content=\"Rebuild a Tinder-like screen in SwiftUI and see Apple&#039;s framework in action: stack views instead of AutoLayout, button rows, image overlays and gradients.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Hands-On SwiftUI Overview: Build a Tinder-Like UI\" \/>\n<meta property=\"og:description\" content=\"Rebuild a Tinder-like screen in SwiftUI and see Apple&#039;s framework in action: stack views instead of AutoLayout, button rows, image overlays and gradients.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-21T15:07:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-15T08:48:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\"},\"author\":{\"name\":\"David Doll\"},\"headline\":\"A hands-on overview of SwiftUI\",\"datePublished\":\"2019-06-21T15:07:49+00:00\",\"dateModified\":\"2026-08-15T08:48:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\"},\"wordCount\":880,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\",\"keywords\":[\"development\",\"iOS\",\"Mobile\"],\"articleSection\":[\"Product Engineering\",\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\",\"name\":\"A Hands-On SwiftUI Overview: Build a Tinder-Like UI\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\",\"datePublished\":\"2019-06-21T15:07:49+00:00\",\"dateModified\":\"2026-08-15T08:48:02+00:00\",\"description\":\"Rebuild a Tinder-like screen in SwiftUI and see Apple's framework in action: stack views instead of AutoLayout, button rows, image overlays and gradients.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\",\"width\":2000,\"height\":720,\"caption\":\"Black bird flying through cellphone screens\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A hands-on overview of SwiftUI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"AI Implementation, Data and Product Engineering\",\"publisher\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\",\"name\":\"Cheesecake Labs\",\"alternateName\":\"Cheesecake Labs Inc\",\"url\":\"https:\/\/cheesecakelabs.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cheesecakelabs.com\/#logo\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png\",\"caption\":\"Cheesecake Labs\",\"inLanguage\":\"en\"},\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cheesecakelabs.com\/#primary-image\",\"url\":\"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp\",\"contentUrl\":\"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp\",\"width\":1920,\"height\":1080,\"caption\":\"Cheesecake Labs \u2014 AI, Data & Blockchain software development services\",\"inLanguage\":\"en\"},\"sameAs\":[\"https:\/\/www.facebook.com\/cheesecakelabs\",\"https:\/\/x.com\/cheesecakelabs\",\"https:\/\/www.instagram.com\/cheesecakelabs\/\",\"https:\/\/www.linkedin.com\/company\/cheesecake-labs\/\",\"https:\/\/www.youtube.com\/channel\/UCdGEQ5AHJcmIlaOaI5fGGVA\",\"https:\/\/clutch.co\/profile\/cheesecake-labs\",\"https:\/\/www.behance.net\/cheesecakelabs\",\"https:\/\/dribbble.com\/cheesecakelabs\",\"https:\/\/www.designrush.com\/agency\/profile\/cheesecake-labs\",\"https:\/\/www.g2.com\/products\/cheesecake-labs\/reviews\"],\"description\":\"Cheesecake Labs is a software development studio that designs and builds custom digital products \u2014 web, mobile, and platforms \u2014 combining product design and high-performance engineering.\",\"foundingDate\":\"2013\"},{\"@type\":\"Person\",\"name\":\"David Doll\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":false,\"contentUrl\":false,\"caption\":\"David Doll\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/david\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Hands-On SwiftUI Overview: Build a Tinder-Like UI","description":"Rebuild a Tinder-like screen in SwiftUI and see Apple's framework in action: stack views instead of AutoLayout, button rows, image overlays and gradients.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","og_locale":"en_US","og_type":"article","og_title":"A Hands-On SwiftUI Overview: Build a Tinder-Like UI","og_description":"Rebuild a Tinder-like screen in SwiftUI and see Apple's framework in action: stack views instead of AutoLayout, button rows, image overlays and gradients.","og_url":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2019-06-21T15:07:49+00:00","article_modified_time":"2026-08-15T08:48:02+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/"},"author":{"name":"David Doll"},"headline":"A hands-on overview of SwiftUI","datePublished":"2019-06-21T15:07:49+00:00","dateModified":"2026-08-15T08:48:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/"},"wordCount":880,"commentCount":0,"publisher":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#organization"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","keywords":["development","iOS","Mobile"],"articleSection":["Product Engineering","Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","url":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","name":"A Hands-On SwiftUI Overview: Build a Tinder-Like UI","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","datePublished":"2019-06-21T15:07:49+00:00","dateModified":"2026-08-15T08:48:02+00:00","description":"Rebuild a Tinder-like screen in SwiftUI and see Apple's framework in action: stack views instead of AutoLayout, button rows, image overlays and gradients.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","width":2000,"height":720,"caption":"Black bird flying through cellphone screens"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A hands-on overview of SwiftUI"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"AI Implementation, Data and Product Engineering","publisher":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cheesecakelabs.com\/blog\/#organization","name":"Cheesecake Labs","alternateName":"Cheesecake Labs Inc","url":"https:\/\/cheesecakelabs.com\/","logo":{"@type":"ImageObject","@id":"https:\/\/cheesecakelabs.com\/#logo","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png","caption":"Cheesecake Labs","inLanguage":"en"},"image":{"@type":"ImageObject","@id":"https:\/\/cheesecakelabs.com\/#primary-image","url":"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp","contentUrl":"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp","width":1920,"height":1080,"caption":"Cheesecake Labs \u2014 AI, Data & Blockchain software development services","inLanguage":"en"},"sameAs":["https:\/\/www.facebook.com\/cheesecakelabs","https:\/\/x.com\/cheesecakelabs","https:\/\/www.instagram.com\/cheesecakelabs\/","https:\/\/www.linkedin.com\/company\/cheesecake-labs\/","https:\/\/www.youtube.com\/channel\/UCdGEQ5AHJcmIlaOaI5fGGVA","https:\/\/clutch.co\/profile\/cheesecake-labs","https:\/\/www.behance.net\/cheesecakelabs","https:\/\/dribbble.com\/cheesecakelabs","https:\/\/www.designrush.com\/agency\/profile\/cheesecake-labs","https:\/\/www.g2.com\/products\/cheesecake-labs\/reviews"],"description":"Cheesecake Labs is a software development studio that designs and builds custom digital products \u2014 web, mobile, and platforms \u2014 combining product design and high-performance engineering.","foundingDate":"2013"},{"@type":"Person","name":"David Doll","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":false,"contentUrl":false,"caption":"David Doll"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/david\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=6264"}],"version-history":[{"count":2,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6264\/revisions"}],"predecessor-version":[{"id":14686,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6264\/revisions\/14686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/6279"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=6264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=6264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=6264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}