Let's Build Honeymoon a Tinder-Like iOS App with SwiftUI | Robert Petras | Skillshare

Let's Build Honeymoon a Tinder-Like iOS App with SwiftUI

Robert Petras, UI Design & App Development with SwiftUI

Let's Build Honeymoon a Tinder-Like iOS App with SwiftUI

Robert Petras, UI Design & App Development with SwiftUI

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (2h 19m)
    • 1. Preview How to Build a Tinder Like iOS App with SwiftUI in Xcode

      4:33
    • 2. Let’s set up the Honeymoon Destination iOS 13 project in Xcode

      9:38
    • 3. Let's create a Launch Screen with a Storyboard file in Xcode

      4:58
    • 4. How to build up the layout of the individual Honeymoon Card view

      9:33
    • 5. Let’s develop the Header layout of the Honeymoon App with SwiftUI

      4:30
    • 6. Let’s develop the Footer layout of the Honeymoon App with SwiftUI

      4:16
    • 7. How to create reusable components and write less code with SwiftUI

      8:15
    • 8. Let’s create a new view for the guides of Honeymoon App

      7:00
    • 9. How does binding work with SwiftUI?

      6:49
    • 10. Show views with Binding and dismiss views with Environmental objects

      5:20
    • 11. Let’s create a new view for the credits and app info

      12:40
    • 12. Show views with Binding and dismiss view with Environmental objects (exercise)

      4:27
    • 13. Let’s implement the card deck with a computed property

      12:35
    • 14. How to develop the Swiping Motion with SwiftUI

      13:18
    • 15. Let’s display the Heart and X-mark symbols during the swiping

      7:10
    • 16. How to remove and insert the cards

      5:41
    • 17. Enhancing the animation with custom transitions with SwiftUI

      6:10
    • 18. Implementing new haptic feedbacks (success) and playing sound effects

      12:00
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

136

Students

2

Projects

About This Class

921f759f

How hard is it to create an iOS mobile application with Tinder-like gestures? You will pick up some handy SwiftUI best-practices with this hands-on advanced iOS development tutorial. 

1c52a3d8

Honeymoon iOS App Launch Screen

What we ‘re going to do in this SwiftUI tutorial? We will build a gorgeous iOS 13 and iPadOS app with a Tinder-like user interface design. Since swipe motion is quite a popular mobile UI pattern nowadays. That’s why we’re going to dive into gestures with SwiftUI in this section. The app presents users with a pile of Honeymoon destination cards and allows them to use the swipe gesture to like or dislike a card.

84072192

Drag Gestures with SwiftUI

In this tutorial, we’re going to develop an awesome iOS/iPadOS app with SwiftUI drag gestures in Xcode. This could be a great portfolio app that you can show up with confidence in your job interview.

11f8c73a

Modern User Interface Design

Who is this class for?

This SwiftUI class is suitable for anyone with some prior knowledge in iOS development.

What is the difficulty level of this class?

The difficulty level of this SwiftUI class is INTERMEDIATE.

What will you learn and what are the main objectives of this SwiftUI project?

By the end of the class, students are able to accomplish the following development tasks and build an iOS and iPadOS mobile application:

  1. How to set up the Honeymoon app, an iOS/iPadOS 13 project in Xcode 11.

  2. How to create a Launch Screen for the project

  3. How to build up the layout of the individual Honeymoon Card view

  4. How to develop the Header layout of the Honeymoon App with SwiftUI

  5. How to develop the Footer layout of the Honeymoon App with SwiftUI

  6. How to create reusable components and write less code with SwiftUI

  7. How to create a new view for the guides of Honeymoon App

  8. Learn how does binding work with SwiftUI?

  9. Show views with Binding and dismiss view with Environmental objects

  10. How to create a new view for the credits and app info

  11. How to show views with Binding and dismiss view with Environmental objects (exercise)

  12. How to implement the card deck with a computed property

  13. How to implement the Swiping Motion with SwiftUI

  14. How to display the Heart and X-mark symbols during the swiping

  15. How to remove and insert the cards

  16. How to enhance the animation with custom transitions with SwiftUI

  17. How to implement haptic feedback (success) and playing sound effects

How can students get feedback from the teacher and other students?

  1. Students can share screenshots of their finished projects with the teacher and other students on the Skillshare learning platform by creating a new project in the class.
  2. By doing that the teacher of the class with many years of experience in the app development industry and other students are able to give feedback to the students.
  3. Students are encouraged to use the comments system and share their learning experiences with us as well.

62a839fd

Technical requirements

There are only two technical requirements for this SwiftUI class:

  1. macOS Catalina from Apple (free)
    https://www.apple.com/macos/catalina/

  2. Xcode 11 from Apple (free)
    https://developer.apple.com/xcode/


Start your SwiftUI development and app UI/UX design journey with this hands-on project and learn by doing. Without further ado, see you at the class!

Custom iOS 13 and iPadOS mobile app icon

e58de477


App Icon

Meet Your Teacher

Teacher Profile Image

Robert Petras

UI Design & App Development with SwiftUI

Teacher

Hello, I'm Robert Petras. I teach UI/UX design and iOS app development with the Swift programming language in Xcode. 

Recently started to teach iOS, macOS, watchOS, and even iPadOS mobile app development with SwiftUI which is a native User Interface framework invented by Apple.

Apple recently updated SwiftUI 2.0 and made iOS and macOS app development much easier for everybody.

After WWDC 2020 I decided to share my knowledge as much as I can for those students who are eager to learn by doing awesome applications while having a great time and fun with me.

SwiftUI is a modern way to declare user interfaces for any Apple platform. Create beautiful, dynamic apps faster than ever before.

My primary user inter... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Preview How to Build a Tinder Like iOS App with SwiftUI in Xcode: Swift UI is a modern way to declare user interfaces or any Apple platform. Creating beautiful, dynamic apps is faster than ever before me. The Swift programming language, learning iOS App Development with adverse native user interface framework and creating remarkable applications is a practical and engaging activity. Media, right? Learning material and teacher. Hi, my name is Robert, the lead instructor of this class. I am a professional iOS app developer and UI UX designer. Since nowadays, a swipe gesture is quite a popular UI pattern on every mobile device. Therefore, we are going to learn how to use it with safety UI properly. This iOS app present users with a pile of honeymoon destination cards and allows them to use the swipe gesture to lie or dislike a card. Who is this class for? This intermediate level class is suitable for every MBA shoes have a developers want to create remarkable applications from scratch. The skills you will pick up from this class can be used to create apps with similar functionality or both iPhone and iPad devices. But is this class all about? This practical class is about completing three main learning objectives. Swift UI framework. The first thing that you'll learn is how to use the thrifty Apollos native user interface development framework, iOS development. The second thing that you will achieve, his learning how to create this amazing application from scratch. Xcode essentials. The third thing that you will acquire, he's the essentials of real app development in X code editor. But you will create in this class. By the end of this class, you will create these honeymoon destination habit custom Swift UI gestures that you can launch and use on your mobile devices. Then you can use this complete project as a foundation of ABA development or building even more complex applications. Why should you take this class? Project based learning approach? This class takes learning programming concepts through a project-based approach. It means that you learn everything you need to know by creating these application as your class project. Contextual learning. Contextual learning is our method of instruction that enables students to apply new knowledge and skills to real life situations. This means that new app development concepts are introduced lonely when you need to use them. Hands-on development. Finally, this class is not just going through boring programming concepts, but instead we will focus on writing grills, Thrift code in Xcode, apparatus or visual evidence development tool. By taking this class, you will accelerate your development and programming skills may creating these real-world application. Having said that, see you at their class. Hello. 2. Let’s set up the Honeymoon Destination iOS 13 project in Xcode: in this class, we are going to develop a modern I us and I better s a profits vibe motion by word by this week to I framework. Having said that, we will dive into some advanced the gesture techniques In this section. The AB presents users with a pile of honeymoon destination cards and allows them to use this vibe gesture to like or dislike a card. This could be a great board for you up that you can show up with confidence in your job interview without further to Let's set up our swift Do I project, as usual, them. Load the resource vice from this section. Place it to the desktop and Nancy bid by clicking on the package. The provided main folder contains three folders marked with a swift A logo on the Supplemental River book fais with the objectives in PDF and A Bob Formats. As you know, by now, the completed project is in the green folder. This finished project with the source courts may have you when you are stuck and they need some quick help. The next four there is the red one. This contents, all of the resources you really need to build the honeymoon app. Finally, you can save your project in their blue. Further, we are going to create and save your app in this place. That's why it's empty for now. All right. Our first step is to launch X court. Then you need to create a new project. Click on the second menu item on the camp in the O. Then choose the single. You have project template under the IOS, the bar. Next, we need to configure our news 50 I project for the product name. Enter honeymoon for the team. If you have an apple developer account, looking in here allows you to build your app on a device. If you don't have an apple developer account, you can skip this part and test your app in the IRA simulator on your Mac organization name , and they're your personal or company name. Here. You can even leave this black to for now Organization. Identify where the usually enter the company's website name in the reverse order, for example, com 0.50. Why masterclass the bundle identify air is automatically combined from the project name on the organisation. Identify their next. Make sure that the language is said to swift than the user in their face must be swift. You I finally leave the core data units test and the U I test options unchecked. After all of this, that things click on the next button. Then the X scored will ask. Ask where we want to save our project on the computer. Navigate to the death stop and choose the students Up folder as the destination off the X scored project. Now click on the honeymoon project Name on the project Navigator at the deployment in four panel. Please uncheck the landscape Left and right options. The honeymoon app is best used in portrayed more. Next we are going to have the ABI cause to the project. Please followed Miss that by step. If you are not an experienced I was developer yet select the assets water in the Project Navigator panel. Now we need to navigate to the computers to their stop and open the resources for their inside that open the app icon and at icon set for others In this folder, select all of the graphics and the content vice. Then copy them toe the clipboard. It must be 47 5 soul together. Go back today. Ex scored assets for under. Select the empty at bike on. Further right click or control key. Conde, Empty a. Pichon, Select the showy and finder option in the Context Menu and Ex Court. You're bringing us to the icons for their and a new finder in though open the Abiko set folder and based everything from the clipboard into this place. You will be asked to replace the existing content jesu file. Choose replace Finally closed the finder in, though. If you follow my instructions, then you will see that all of the I cross off this project had been placed correctly on the assets for their just have a look at how many icons do we need tohave to create a well designed our US up. Now we are going to bring all of the resource vice to the project. Navigate to the resource is for the or the second time. Select the lunch screen for order and drag it to the Assets catalogue panel in the X Court . After that, have a look at what's inside this folder and select all of the two BDF graphics. Then open the inspector spinal on the right side of the X scored find they re sizing, setting and click on the preserve Vector that that check mark. This will make sure that our graphics will be kept a sharp as they were designed. Okay, it's time to add the photos off the beautiful honeymoon destination to the project. Open the resource is further once again. Then select the photos for order and drag and drop it to the sets. Cattle open A. So far, so good. Just take a short look at how gorgeous those for those are off course via give full credit to the photograph furs later on our last two graphics mature areas are the honeymoon logos , which have both light and dark versions open. The Lagos Group in the resource is Father. Select the local. Her name will be the f file and drag and drop it to the assets Cattle open a after that, under the criticising setting creek on the preserved factor that a check mark then select at the appearances option the any light and dark more adoption. This will provide us a bunch off anti slats for the additional graphics vice because our logo is a factor file. Therefore, we only need to feel out the one X places. Select the UN A moon logo in the any slot and copied to the clipboard. Then select the empty light appear ius slut and based their logo from the clipboard. Okay, dokey, jump back to the logos folder and drag and drop the logo. Honeymoon Dark. Pdf file to the empty dark appearance place. We are going to do the same for Sydor without being logo. It has a light and the slightly darker version as well. Select and drag and drop the local honeymoon being pdf file to the assets catalogue Banel. After that, click on the preserve Vector that check mark, then select the any light and the dark mode option. Copy that being clo, go from the any to the light appearance place and finally jam back to the resource is folder for the dark being clo go drag and drop the logo on a moon. Being a dark file to the empty dark appearance place, Select a logo FIEs and create a new folder for them in the contextual menu. As the pro fabric ALS order is the sole off everything, just one more thing we need to other the sounds Waldir to the route off the project, as I show you when we dragged the Sounds folder to the project than X scored. Well, ask, Ask some options. Make sure that the copy items if needed and they create for other references and the honeymoon target check Mark is selected and click on the finish button. And that's all they have just managed to add all of the graphics and sound fights through the honeymoon project. Let's have a look at how the honeymoon at Icon looks in our really iPhone devices or the simulator. It's time to build and run the honeymoon app for the first time. By closing the head, we can see the honeymoon icon on the iPhones and their stop nice thought is ended. 3. Let's create a Launch Screen with a Storyboard file in Xcode: in this lecture. If you create a very simple lunch screen with the stretching color Grady and background and a logo in the center of the screen, just a reminder. Usually when you try to add a new image and the vaunted to feel out the four screen, he fell into difficulties because X court is in favour off using the safe area by default. Today I will show you a really easy way to prevent this default Behavior without photo. Hell, do select the lunch screen storyboard file in the project Navigator. Next, in the view seem banel find and select the actual view under the View Controller. As I show you now show the inspector panel If it's hidden beer, need this one. All right. Here goes the main deep of this lecture under the size inspector panel. Uncheck the safe area, relative margins and, most importantly, the safe. A rarely out guide. This letter setting the Hotel X scored that we don't want to use the same area. Then we create a new constraint in the storyboard. Now we go back to their tributes panel. After that, click on the plus button on the toolbar and search for the image view on their city in, though simply selected and drag and drop the image view into the center off the storyboard . As you know already some handy dashed the guides will help you to position it on the Attributes panel, Start typing background at the image you section and choose our color. Grady and the set Fire Jews aspect feel for the image of the content more if you stretch out the image from edge to edge later on. Now we are going toe had new constraints to the background by clicking on his button at the bottom off. The editor Follow me step by step, because working with constraints is never easy. Set all directional value Toe one now, then uncheck the constraints toe Marge's option by our think these new constraints X scored were stretch out. The background image, even beneath the safe area he only need to do now is to set the one point constrained to zero. Go to the size inspector panel now, then change all of the values off the constraints from 1.20 As I said before, this whole process a bit onion intuitive, but this is the price, which we have to pay if you want a nice color ingredient image as a background on the large screen. Great, our background is done. Our last task is to add the honeymoon logo to the large screen. Click on the plus button on the toolbar, seconds time and us set in, though we're pop up again, then enter image in the search field. Select image view. After that, drag and drop the image view into the center off the storyboard on the Inspector Banel Start typing logo and choose the Big White A logo as I show you the honeymoon logo type with the two wide rings and the heart symbol will appear on the storyboard, the Aladdin exact size for the image just for the sake off our originally out design. So click on the add the new alignment, constrains button and enter 240 for David and 128 for the height. The next step is to at Newell Lyman Constraints by clicking on its button on the bottom off the editor, check the horizontally and vertically and container Jack books finally click on the Add to Constraints button, and that's all we are done. It didn't take a long time. Toe created this custom lunch screen, did it? Let's build and ran it on the simulator or on your real device right now, why not go to that door bar and click on the beard and ran button to start a simulator and watch our new lunch screen? It's quite impressive, isn't it? In the next lecture, we are going to work on our APP further. 4. How to build up the layout of the individual Honeymoon Card view: in this lecture, we are going to create a card layout for the individual on a movie destination. Go to the Project Navigator and right click or control. Click on the honeymoon project for their then create a new swift fire. Name it to honeymoon model and save it right now. Control, click or right click on the file and select the new group from selection option from the contextual menu. The name of the folder will be model. We can even organize the files and folders in the project. Navigator just tried out. It's always a good practice to organize device and separate them in a meaningful way. Now import a swift Y framework and create extract Order Data model. Distract Destination Bar, please. Spring bar, Country String Floor Image String. All right, we are down with the data model. Now We need to create the actual data file for the honeymoon app. Let's create a new swift file for the data which were contained all of the information about the anymore recommendations they made to honeymoon data and save it just like before . Create a new group for the data file since formula, then import the swift. You I framework. That's great. An anti array for de static. Better you are honeymoon that destination right after that's navigate to the resources for their on the desktop and open the honeymoon that are playing text file in the data for their now select all of the content and copy it to the clipboard. Are you done? Great. Just close the finder window and go back to the ex. Corde simply based the content from that laboard into the empty array off destination. Why ever we are going to use this? That us right away. Close the open folders in the Project Navigator and select the content you file as you know . Now, if you create a new for their for their views, put the view for dinner at the top off the panel and let's create a new safety. I file for the honeymoon cards. Name it to God view and save it. After that, create a common section for the properties, then enter the full of in court. Let I d you you i d war honeymoon destination maybe a need an i d for the identification off the cards. You will see later on why we do this, then the honeymoon variable contained the data. Here goes the old error message in the preview section. So let's fix it by adding the missing that Honey morning honeymoon data. One by this, we are going to populate the second guard into the preview, which is Bari in the night, By the way, since it's a card, if you'll have a better understanding if you use a fixed width and height for its size. Review Layout picks. Beans 375 Height. 600 So far, so good. It's time to replace the place. Hold their tax for the actual honeymoon card image. Her name. Owner image. Whoa, That's innermost picture. Let's shrink it down and style it with the following view. Modifiers re sizable corner radios 24. Scared to fit. Free him, me and the kids. Zero max with infinity. Nice. It's so much better. Now we are going to add an overlay to the image overlay. This will contain the place off the honeymoon destination in the country. Name these tech alignment center spacing to have next on a moon. Place upper cased for grand color color wide text. On a morning country, Arbour kissed for grand color color white frame me and of it, 280 bad ink but, um 50 alignment. But, um, hold on a second and place. Pay attention to the alignment that tribute off the overlay modifier this real place are re stack with the text views to the bottom off the card, the bottom budding off the visas that were keep the distance from the edge of the card. As you can see, the design of the place in the country is quite boring. So let's give them some love with some further modifiers shall be formed. Large title front weight Boyd Shadow radios one. Padding horizontal 18 bedding. Batam for overlay rectangle Feel color right Free him Height one alignment Batam The new tax the world. They will create a nice horizontal divider for our layout. Director and girls within it. Now it's time for decorating. The second next to you. Firstly changed. Therefore Gand color from vital to black. Then create a nice white capsule shaped under the text you formed Food note Foreign trade Boyd for him, me and vivid 85 Bad ink Horizontal. Then that Dink vertical five. My grand capsule feel color right, creating a good looking design for our F. It's 50. Why is such a fun? Just have a quick look at the preview window in the campus before we had this card view to the main content for you. After finishing with the card layout and design, let's open the content you file. All we need now is to replace the place for their tax with the card for you, God's view on a one honeymoon data one. Finally, let's build around the application in the simulator or on your your device. Shortly after the large screen, we should see the honeymoon guard with a photo off the effort tower in Paris. It's a great place to continue our journey, isn't it? See you at the class. 5. Let’s develop the Header layout of the Honeymoon App with SwiftUI: in this lecture, we are going to create the other view for the honeymoon app. This head earlier contain two buttons on the edges and the logo in the centre part off the screen. Go to the Project Navigator and create a news 50 wife, ill name it Toe Heather View and save it to the view for their. Our first step is to resize the layout off the preview. But if you really out fixed, did 375 hide 80 Next the real and that the text you into a horizontal container ages thick , then give the fault budding to it as well. That thing. Now let's create the left battle off the other. Bratton Action Action. Brilliant in formation Image system Name in full So girl Formed System sighs. 24 Raid Regular. Excellent color color Primary. Finally, enter a spacer between the two elements. Spacer. Then another one after the text you spacer. Our next step is to create a new button on the right side. Matin Action Action Print Guide Image system Name. Question. Mark Circle formed system sighs. 24 right regular accent, color, color, primary. All right, The left on the right button are done. Now we need to replace the place, or they're taxed with the local image image logo on a morning Bink precise, able scared to feed, frame hide. 28. Great job art Heather looks promising. All we need now is three. Embed the heather view into their content. You jump to the content of your now, then the let's create the vertical container for the heather card and the future views and that the cardio in tow Avi Stack these thick heather view spacer, then add a temporary bedding toe. The card view. If you refine it later on, fix me at the betting to the guards. Bad ink. As you might figure out, maybe you need another spacer between the guard and the food. Spacer finally changed the picture just for testing purposes. I am going to load a photo on their crop for ease off attempts by changing the number from 1 to 2. Nice job. Let's build around the abbey in the simulator or on a real device before we start the next class. Shelvey. Slowly but surely, we are building up the honeymoon app. As you can see, the food or view will be our next target 6. Let’s develop the Footer layout of the Honeymoon App with SwiftUI: in this lecture, we are going to create the food interview for the honeymoon app. This water were contained. Two images on the edges and the bottom in the center part of the screen. Go to the Project Navigator and create a new Swifty WiFi. Name it Toe food Interview and save it to their view for their Our first step is to resize the layout of the preview. But if you lay out fixed leads 375 height. 80. Zoom in the preview in though toe 100% if you needed. Next we really embed the placeholder text into a new horizontal container. A. Just think give a default padding to this horizontal. Is that container petting? Now let's create the left image for the food. Her image Cyst them Name X mark So good I want cease them sighs 42 Wait light. After that, enter a spacer between the two elements Spacer Then another one after the text you spacer. Our next step is to create a new image on the right side. Image cyst them Name Hard circle formed, Ceased them sighs 42 great light. All right. The left and the right images are done. Now we need to replace the placeholder. Text it a nicely decide New button. Bratton Action Action Print success text book destination. Upper cased. Great. Let's had somebody viers toe the text you formed ceased them. Sub headline design around it Front weighed heavy, I think. Horizontal 20. Bad thing. Vertical bad. Excellent color color Being May grant capsule strugg color pink line with To these modifiers make our new bottom to shine and blend into the overall design off the honeymoon app. Easy busy our food. Our view is finished. All you need to do now is to embed this into the content. You jump to the content for you right now, then entered the future view below the last space in the vertical container. Outstanding job. Finally, let's build and run the AB on a really iPhone or in the simulator. Until this point, we were practicing, which we have learned in the previews. Lectures in the following classes. If you learn about news 50 y features and techniques, see what the glass 7. How to create reusable components and write less code with SwiftUI: in this class. If you create a reusable components, it's 50 0 I they use off. These components may be of ride less called the later on without further at two. That's a champion two X court. The first component contains handlebar and the Honeymoon loco. But before we start coding, let's create a new folder for the components. Go to the Project Navigator and create a new group. Its name will be, obviously component, then create a new swift you I file in this group and name. It's too, had their component. Next media resize the preview window on the compass, but if you lay out, pigs did 375 Hide 128. After that, embed the placeholder text into a new vertical stack. If he's thick alignment center spacing. 20. Let's create a new capsule shape for the handlebar cap. Soon frame did it. 120. Hide six for grand color color Secondary. Opus City 0.2 Great job. You might now that this is a quite trendy user in the grease element nowadays, the second you I element in this component is the honeymoon logo. Let's to replace the placeholder text with a new image image. You go on a Mona precise Ebola scared of it. Cream height. 28. Fantastic are Heather Component is then how cool is that? Let's continue of it. Creating another compliment for the honeymoon guides. Go back to the Project Navigator and create another newsfeed's Do I file name it, too. Guide component and save it to the component for their as many times previously with your start by re sizing the review in though this time the layout will be flexible. But if you really out size of that feeds after that, we are going to create for new drivers for the properties off the guide component. Firstly, enter a new comment section. Mark Properties. Secondly, create some new very avoris of our title string. You are subtitle. Spring Bar Description String Bar. I Go on String. I think that these names and what they do are self explanatory. Once we got all of the properties than we have, Toe had some sample data for the review. Otherwise, we cannot use these swift to I feature in X scored title title. Subtitle survived right description. This is a placeholder. Centers reveal duplicate this sentence three times because we need to see how it will fit to our layout design. Finally, at the icon to the Leo Go as well. I go on hard circle, this example that is a huge help for us to design daily At Fantastic. We fix the air only in the review and added some sample data for it. Let's continue with designing the actual godly out Shelvey jam toe that place for their text and replace it with the fall of in court ages. Thick alignment center spacing 20. Then add the icon for the guide image, since them name Icahn formed large title for grand color color pink. Next, create a vertical stack container on the right side of the guide. These tech alignment leading spacing. Four. The top off the guide were contained. A title on the subtitle In one horizontal, a stack ages thick. Next Tyto Upper case formed Daido Front Weight. Heavy Space. Her decks. Subtitle. Upper cased formed Food, not foreign trade. Heavy for grand color color being. Let's separate the description from the top with the new divider divider. I think Batam for finally at the description text block for the guide component next description formed food not for grand color, color, secondary. Fix the size horizontal for us breadstick or true pay addition toe the last modifier, which is the fixed size. I'm sure that this is a new one for us. Basically, it helps to render the text to use dimensions. In this case, we want to make sure that the height off the text will be expanded. Even if the parent view is smaller than an dimension off this text. You the ventricle. True. While you were forced the rendering and join under the hood to preserve its ideal height and do not allow to truncate the text. Okay. Dokey. This is the end in the next class. If your beard up a nicely out with these components, until then, happy Colding. 8. Let’s create a new view for the guides of Honeymoon App: it's thank to use the components which we created in the reviews lectures in this class, we are going to create a new view for the guides off the honeymoon application. Let's create a new swifty y file. Name it to guide you and save it into the views for their fearfully toe. Hide the navigation bonus if you want more space while we are cording in Ex Corde. Firstly, let's am about the placeholder text into a new vertical stack container. These thick alignment center spacing. 20. Then we need to further and that this v stack into a new scroll view. Screw all of you vertical shows in the Gators for us. You can try out the new column section feature off X court by using control shift plus up and done Aero case together. Alright at some basic modifiers to the views. Think now for him, me and Viet zero, Mark said. Infinity, bad ink Dope. 15 bedding Bet on 25. Bad thing. Corey Santa 25. After that, is that the heather component above the text to you had their component. Then add a new spacer between the heather and the title spacer. I mean land, then Okay, let's work on the title a little bit. Next, get started. Want Wade Black Front. Large Title. Four. Grand Color Color. Bink. Great. After the title, let's create a new text You for the marketing headline. Next Discover and Big. The perfect destination for your romantic honeymoon Lying Limit. Neela. More thieliant text that I meant center. All right after finishing in the headline, It's time to create some guides, which will have the APP customers to use the honeymoon app with your start by adding two spacers and the vertical us that container between them. Spacer. I mean land then and there this one more time spacer mean lang, Then then this one between the spacers these back alignment leading spacing 25. They are going toe. Add our first guide component inside every stack guide component. If you wait for enough time, the out or completion feature off X scored will help us to had the necessary properties through it. All we need is to reform at the court neatly and enter some text for the properties died or like Sub Diadora survived right description. Do you like this destination? Touch the screen and swipe right, it will be safe to their favorites. And finally the icon. Hard circle. Great job. We can see the first guide component in the preview window. Let's continue this and add two other guides. Toe the view repeating this process Guide Component My door This Miss Subtitle Survive Left description Would you rather skip this place? Touch the screen and swipe left You will no longer see it. I go on X Mark Circle Guide Component Title Book Subtitle Tap The bottom description Our selection off, Honey More Resorts is the perfect setting for you to embark on your new life Together I go on check Mark Square all some work. We are done with the guys. The only thing we need to create now is the battle at the very bottom off the view. So let's create it now. Baton Action Extra in Brilliant about Don't just stopped. Next continue upper cased formed headline I think for him Me invades zero Mark Swed Infinity background Capsule Feel color being for grand color, Color white I think that it was worth die being so many strings in this lecture because in the end we build up a modern and I can actually at for the guides. But do you think Are you ready for some advanced topics on Swifty? Why like that? Abide ings and environment objects. Let's figure out at the next class. 9. How does binding work with SwiftUI?: in this lecture review. Learn how the binding property works in Swift You I Our main goal is to show an allergy window open. A user taps on the book Destination button on the footer. Basically, if you make the food or view to communicate with the main content you and share a piece off information with each other. So what is the binding property? Rapper? The biding is one of the swift ey last use property rappers, but knowing how it works is still hugely important. The biding property that's also declare a value in a view and share this value with another view. Having said the death when this value changes in one view, then it will also change. In the other view, firstly, opened the food or view file, then create a new binder Girl property. It a comments section mark properties at Abiding Bar Show Booking Alert Bull. This bullion value will be shared between the food interview and the main content. You when a user types on the button, as you can see after we created the bind, Able variable for the preview stopped running and true house on error. We always have to deal with the preview and provide it what it wants. In this case, the preview. Ask us to provide the missing show. Booking alert property. In order to fix it, we need to create a new variable the tab bullion value and pass it toe the preview. And they're discord in the preview at ST Static. Far sure Alert bull for us. Then provide this missing Param Eter to the preview show Booking alert Dolar sign Show a left. Keep in mind that we needed these dollar sign before the property. Okay, we have just finished the first step. We created a new bind Able property which will be shared between different use. Now we want to use this property and change its while you When someone tops on the battle Go to the battle and comment out the print function Then the girl Dev, are you off the show? Booking alert with this cord Self show booking alert Dogar we have done with the food or view so jumped to the content you right now. As you may know, the honeymoon app is broken now because of the missing property in the food or view, the process is identical toe have we fixed it? Review slee in the Footer Views Preview window Firstly and their comments action for the properties Mark properties, then the Let's create a new property for storing the shared true or force bullion value between the footer and the content use and stayed var sure alleged bull. For us, this is the same name, just like in the photos preview, but it's not necessary at all. We can name it however we want. All right, it's timeto had the missing argument off the food of you since the value off the show A let property were change from time to time, from true to force and back and forth. Therefore, we have to use the dollar sign before it show booking alert. Show a left nice job. The value biting is basically done, but the honeymoon up a dozen Do anything reasonable the finance that after establishing the connection between the food er and the content, you is the show or hide the alert even though this is our main goal, by the way presented navigate to the very end off the Arctic Aslak container and let's create a new alerting, though alert, he's presented. Sure alert Alert tidal next sexists message. Next. Wishing a lovely and most gracious off the times together for the Amazing Couple, this means batter before it. Text. Happy Honeymoon. Are you done? Let's start the life review Chevy. It works like a charm. Just a recap. What's happening? The show on that property stores the true and force value. So when a user types on the bottom than the food or view, your changed the bind able bullion value and they're a distraction to the content. To you, the content he was always watching for any changes, and when it happens, then it decides whether to show the honor window or doesn't. This whole abiding concept is very similar to the States, but the main difference is that we can share values between multiple views by using the binding properties. Rapper With the States We cannot accomplish it. Finally, let's build around the honeymoon app on your device or in the simulator. Congratulations. You have just learned how binding works. It's 50. Why in the next lecture, if you use this technique to show the guys view by tapping the question mark button on the top of the honeymoon app, see you at the glass 10. Show views with Binding and dismiss views with Environmental objects: in this class, we are going to present the guides. You using bindings. It's 50 y After that, if you learn how to dismiss this view by using the AB environment presentation mode without further ado, open the heather you file, then add back home and section for the properties. Mark properties. Now let's create a new binding property at Binding Bar Show Guide. You bull. It's time to fix the review again by I think this property to it. Heather View Show guides you Now we need to create a static variable just for the sake of the preview. Add stayed static far Show Guide Bull for us, then added a city fault. Who are you for the biting Dolar Sign Show guide, It will make the preview toe work again. After creating the Bayda bull property, navigate to the guides button comment out the brain function and the Let's Talk through the show Guides view when a user types on this battle Self show guide view Togo. Our next task is to present the actual guide You my adding a new sheet toe. This pattern she'd he's presented show guides you guides view This is presented will watch when the binding changes from the default force toe the true value. All right, our job is done here, So let's a jump to the content you and fix the missing property off the heather view. As you know, we start by creating a new property that were stored. The binding bull value off the bottom had stayed of our show guide bull for us finishing with that at this property to the Heather View had their view. Sure guide you sure guide, Don't forget the dollar sign before the show guide, since it's why you were change and I use their taps on the question mark button, That's that's the honeymoon Happy in the life preview more and there it is. The binding works like a charm, and we can see the guys you Toby presented than the top on the bottom. One thing still doesn't work. The big being continue button, so lets navigate to the guide you and create a new environment property in order to use This means this view mark properties at environment presentation more you are presentation mode. This presentation more is the key property toe this miss a sheet view with a custom button , go to the Dismiss button and comment out the print function. We don't need it anymore. Then enter the following code seven presentation mode Proper. Advise you dismiss this. Dismiss Rapid while you will do what we want. When somebody taps on the button, jump back to the content you and let's there's the up in the Life Review Final time. Okay, the default I was 14 and dragging them feature is automatically working without writing any line off court by ourselves. Let's see our custom dismissed button on their guide view vow. Nice job. Let's build and ran the AP on a physical device or in the simulator. Shelly. Personally, I always like to get my hands on the iPhone and dust it. What about you? Perfect. What should I say? We have just managed not only to show of you by using the bindings with swift you I but we successfully dismissed it by calling the dismissed property off the presentation mode. In the environment, things are getting more exciting as we are going through the lessons handier than happy coding 11. Let’s create a new view for the credits and app info: in this lecture trivia practice that we have learned before, we are going to create a new view. It's some information about the honeymoon application and give credits or the photograph. Er's just a gentle warning. I am going to dictate a slightly faster tempo in this class. Without further ado, let's create a new safety wife. I'll name it toe in for view and save it into the views for their. Firstly, embed the placeholder tax into a new re stack. These back alignment center spacing 20. Then create a new scroll of us. Well, screw all of you. Vertical shows. Indicators. Force Embed the beast back into this cruel view and add some modifiers to the vertical container. Free Him, Me and David zero Max with Infinity Bed Inc Job. 15. Bad thing. Batam 25 Bedding Horizontal 25. Finally replaced the text with Heather Component. So far, so good. Now we are going to create a new custom modifier for the title, Open the guide view and navigate to the title text. Then select the front and the foreground color modifiers and cut them into the clipboard. Jump back to the Project navigator and let's create a new swift. Do I file for the title modifier? Name it to title modifier. Firstly, the lead. The review section, then modify. Distract, Distract. Try to modify your view. Modifier after that replaced the bar with a new function funk body content content, son Hugh content. Lastly based the text modifiers from the clipboard into the body content. Great job. Now let's create a new group for there for all of the modifiers which we will create later on. Reorder the four orders like I do if you reach to the noble in the guide view once again and had this new modifier toe the Tyto modifier died to a modifier. Now navigate today in for you file and create a new spacer between the heather and the tighter spacer. I mean the length. Then after that, let's create a new text you next at being for formed weighed black modifier title modifier . Always some work. Now it's timeto had the rest of the content to this view. That's creator basically yet for day in four section ages. Thick text application for grand color color gray spacer Next honeymoon Nice. We will add more contento this later on, but Now that's country new with the second part of the view. Create a new text to you for the credits title. Next credits form to eight black. What if I. You are title modifier, then add a simple rule with this good ages. Slack. Thanks for those for grand color color gray spacer. Next on Splash. After that, we need a new spacer between the credits and that this miss button spacer mean length. Then, finally, let's add a skeleton off the battle at the end of the view. Bratton Action action Brilliant about on Overstepped. Next, continue upper cased. Not about the basic structure of the code is done. It's time to make some refinements than add more content to the view. Our first task is to create a new custom view modifier for the dismiss buttons. That's why opened the guide view and navigate to the dismiss button at the end of the file . Simply select all of them were the fires there and cut them out to the clipboard. Then the let's create the new Swifty y file, name it toe button modifier and say, veto the modifiers for their once again delayed the review section and change. Distract as I do, distract, but on modifier. A few modifier funk by the content content. Some of you content. Finally, is the modifiers into the body content now jump back to their guide view and had this modifier to the button. It's quite easy, isn't it? Now it's time to add this. You modifier toe the second dismissed button on the info view modifier. But on the modifier. From now until the end of this lecture, we are going to create several hours of use and use them to create the rest of the content , go to the in force line and extract the age stack into a new sub view. Wait for a sec and name the serve you toe tapping for view. We will find this new, serve you at the end of the court and bed the H stack into a new movies. Thank Then add the following properties through it. These tech alignment leading spacing, then all right, This very slack off the wrapping for view is a just a content container. We will create another, serve you for the individual through as well extract the age stack second time into a new sub view they made to rule at being for view. Super Now embedded these h stack again into a new V stack than at a new divider. After the H stack, this thin line will make our design much better, You hear? See you later on. All right. It's time to create some new properties for this room. Mark Properties, you are item one spring. You are. I tend to spring after that. Replaced the content in the text use. Next. I don't one text, I dent too. Great job. So far, This is the final part where you can understand why we bothered so much with these sub use . Our goal is to keep our code as clean and neat as we could. Now we can repeat this row wrapping for view sub you as many times as with fish. Let's add the rest of the content for there being four through a being for view. I then run application I them to Anemona so happy for view. I didn't run compatibility i them to iPhone and I bet through Epping for view. I am one. Develop air. I am too your name so happing for you. I don't even designer. I am too Robert Address. So tapping for view. I don't run website. I tend to swift you. I masterclass dot com So happy for view. I Don van fashion I them to Bon Bon 0.0. Keep up the good work. We are almost done with this view. Creating the layout for the credits is much easier. Navigated Age. Stack off the credits and extract it into a new sub view name. It's two credits view and go to its court. Embed this horizontal container into a new V stack with the following properties these thick alignment leading spacing, then then headed. He scored after the age slack divider. Next, photographers for grand color, Color gray. Awesome. Now we need to insert all of the names off the photograph furs in a new text to you. At the end of the credits. Go to the data folder inside The Resource is warder on the desktop, then opened the credits. Text file and copy, therefore content to the clear board. Now jump back to the X court and based this content from their clipboard into a new text. You in the credits of you. Lastly, at these two modifiers to the text to you more Dylan Textile. I meant leading formed food. Note that, Ah, we are done. Let's start the life review and watch are complexly out design in the canvas. It's quite impressive, isn't it? Some folks might think that creating this kind off layout for static content is not so important. But in my opinion, the real difference between a good and the great Swifty why app often comes from the little details. 12. Show views with Binding and dismiss view with Environmental objects (exercise): in these short lesson, we are going to present day in for view by using this 50 y sheet and this miss it by using the presentation mode Environment Property. Without further ado, that's a champion two x scored firstly, opened the header view, then the let's create a new binding property at the binding you are Show in for you bull. After that, scroll them to the review and fix it by adding the missing barometer to it. Show in for view. We still need to create the new static property for their sick off the preview. Enter and stayed Static bar show you for bull for us now don't forget to use the dollar sign when you add it is showing for property to the Heather View Dollar sign showing for great job are binding Will property said it to use and they fix the preview as well. Scroll up today and four button. It's time to use this showing for you property. Firstly, command out to different statement. Secondly, that struggle the value of the showing for view. Then I use their taps on the button by this cord. Self show you for you, Targo. And finally create a sheet so we can present value for view than the value of the property becomes true sheet He's presented the last sign show you for view you for view. Nice job. Unfortunately, are happy still broken Because the Heather view in the content view still doesn't know about this new binding property. Let's fix it now Open that content you file Then create a new property for storing the value state off. They're showing for view Findable property at ST Bar Show you full bull force. Lastly, let's had a dismissing property to the header view show in full view dollar sign show you fool! All right, it's timeto does the honeymoon happy in the Life Review Shelvey click on dating for battle at the top left corner off the app Finally we can see are in for view in the new presentation sheet You How cool is that off course The IOS for tin building pulled on this misbehavior works But what about our ghost on this miss button at the very bottom Off the sheet? No, it doesn't work yet. We have a new mission. As you can remember, we can this means of you by using the presentation mold environment property. So lets navigate to the info view file and create this environment. Property Mark properties adds environment presentation mode You are presentation mode. Okay, now we need to trigger out that this miss my heading this Go to the button self presentation mode rapids value this, Miss. After that, we can build and run the honeymoon app on her iPhone or in the simulator and see how it works upon the ear. Four and their guide buttons. Then try out the custom dismissed battles as well. Finally, let's test the allergy in though everything is working like a charm. So far, you learned a ton off useful features with 50. Why? But the main topic is just coming using gestures and creating spite motions with swift you I see you at the glass 13. Let’s implement the card deck with a computed property: with all of the reviews preparation. Finally, we are going to start the implementation off the tender like user in their face with this fiber gestures. Just a quick disclaimer before we start. According this is a slightly advanced topic, and you may find it a little bit difficult to understand the logic and the code implementation. Have the APP works on the first side. If you are a daughter beginner, please don't be disappointed or discouraged if you don't understand something later on in this master class. If you learn the very basics off half gestures work of its with you, I in the section just concentrate to understand the big picture and followed meets, thereby Step all right. After this gentle warning, let's talk about the main Mannix off this app. You can imagine this apus Adecco field cards. Each card shows her photo off a honeymoon destination, so swiping the highest card slightly to the left or right it on views the next card underneath when we released the card. The APP brings this card back to the original position, but when this vibe it hard enough, then we can true a very the card and the fear. Bring the second guard for what? To become the top most card. While we are throwing away a card, you're so scaled down and rotate the card at the same time. Our other main objective is to write the logic behind the guard attack in an effective A. Just imagine a card deck three countries off guards. How resource intensive cool to be. That's why we are going to deal with this issue like in a real life. The big software companies face it, too. Without further ado, let's start coding. Firstly, open the car. Do you file, then make the car you type Toby Identifiable. Identify Ever soon, we are going to create the card deck with a computer property, and this is the reason why we added an i d to this view itself, the next task is to present the very first honeymoon destination in the preview change. The honeymoon data from Ron 20 Great. Now open the content you file and make enough room for the court is tour. We can even show the minimum. It could be a nice help for us to navigate, Then prepare for the heavy coding by adding some handy comment marks to the main part off the view. Let's start with Heather Mark had there, then replace the whole card. View it a new comment mark guards after that, at the comment to the food or as well, mark food or so far, so good. It's time to implement the actual pile of cards, but how can we do it? The most straightforward way is through overly each of the card views on top off each other using a Z stack. Let's try to do this right now, shall we? We start by creating a new computer property for the card views added this. Go to the content you distract Mark. God views bar God views card to you. You are views God to you. Four. Honeymoon in honeymoon data views event cards You on a more on a moon. He turn views. Prentice's. We have just initialized an array off guard views containing all of the honeymoon destinations, which was defined in the Al Iman data file. After that s create a new Z stack and present all of the card views on top off each other, using their for each loop disease. Thank forage guard views card to you in card to you Bedding horizontal. You might notice that a new card is presented on the preview. Converse a question to you. What do you think? Why did it display another image if you look after in the honeymoon that a swift file? The new Cassie that Sydney, Australia, is the last element of the array off honeymoon destination in their forage block. The first destination, the Maldives, is placed at the lower most part off the car to deck. Thus the last destination, the Australia becomes the top most card off the deck. Lucy. But you may ask about how do we make sure all the cards are laid out, since we can only see the last card on them? Preview campus. The answer to it is to use a new debugging tool in X court instead, off using the life review that surrounds the project. In the simulator. After the honeymoon app is launched, we conduct the bag view hierarchy button at the bottom off the toolbar in Ex Corde. We can only use thes when we are running a simulator. Then exclude is thought freely, rendering the view higher are here. You might see these The bag window the very first time. Just let me there you something about this stool. This Freedy rendering could be sometimes quite a bother consuming process, so it could take a long time to display all of the cards in the window. Unfortunately, my machine is quite old now, so I need to wait a few seconds in order to see the photos and er than just take a short look at their layers on the left panel. You can see the exact order off the cards in the deck. Yeah. Here it is. My creaking on the window. You will be able to move this view around in the three d space. How cool is that play? Video it for a minute and analyze the hierarchy off the views. All right, that's enough. Stop the simulator and jump back to the code. A detour via we successfully implemented the card deck. They actually have got to serious issues. The first issue is the following. The first destination is supposed to be the highest card. However, it's now the lowest card in the deck. The second issue is the following be rendered. All of the 21 card views at the same time. What if we have 1000 guards or even more in the future? Is there a better and resource? If you shan't way to display the card deck, the answer is yes. That's first fix. The card order issue shall be swift. Ey provides a Z Index modifier for us to indicate the order off the views in a Z stack of you with a higher value of Z index is placed on top of those with a lower you. So the highest card should have allowed just while U Z Index having this in mind, we need to create this following function. Mark Top card. Private funk is the card cards you God to you Bull God let index card views first index there. Well, our sign zero i d equals God to you i d. As Return Force Return Index ik waas zero This function finds out the index off each individual card view and there's house. If the card view is the most one or isn't after that update disease that as I do. Car two U Z Index, seven East off card card view. God you question Mark one columns zero. Did you catch what's happened in the preview compass? We should see the first destination on the top, most off the deck. But how does our good work? We have just that that the updated Z Index modifier for each off the card views it's a job is to shuffle the first card toe the top off the deck. All right, it's time to resolve the second issue because this playing a bunch off cards in the deck at the same time, it's turned out to be a quiet, resource intensive method. We need to optimize this somehow. Just hold on for a sec and let's ask it to ourselves. Do we actually need to render or card views at the same time? Or it's enough to just create to card Hughes and overly, then with each other. So when the highest guard you is thrown away, the car to you underneath becomes the most guard and at the same time, immediately initiate a new card view with a different destination and put it behind the highest card. This way, no matter how many cards we need to display in the car to attack, the application has only two card views at all times. However, from a user point off, u D Y off the honeymoon is composed off a pile of cards. Now that we understand how we are going toe, construct the card deck, let's move into the implementation first, update the card you array. We need to initialize only the 1st 2 Later. When the first card is thrown away. Reveal, add another card to it. Four. Index in zero, not dot unless you then to use event card to you on a moon Honeymoon data index. After the court change, we should see the exact same you eye on the preview campus. Having said that, let's build and run the project in the simulator and debug the hierarchy once again. Wait for a sec and here it goes. We should see only two card views in the three D space. How fancy is that? Congratulations. This was one of the hardest parts off the section, and you made it take a short break. You deserved it. Then the let's implement this five motion in the next class. Chevy 14. How to develop the Swiping Motion with SwiftUI: we are going to implement this five feature first before we dynamically remove and create new cards. Yet again, this is a fairly advanced topic. So if you haven't worked with gestures intensively using safety, why, then I highly recommend you to watch the section about the basics off gestures in the course. First we defined a possible states off the drag gesture to represent the drag states. We are going to use a new in, um, let's create the drag State Anoma Mark Drug State Any number Drug State case inactive Case pressing Case dragging Translation CGE Size bore Translation CGE size switch seven case inactive. Pressing return zero case dragging Lead Translation Reader Translation bar These are dragging Bull switch seven case dragging return True case pressing inactive Return for US blood expressing bull message said case pressing, Tracking return True. Case inactive. Hey, turn for us. This track state defies and represents all of the stages for our customs. Five Gesture. As you can see, basically, we have three stages off these drag gesture the first status for where no gesture happens. This is the inactive state. The 2nd 1 on the user taps on the screen This is the pressing state, the last one when the actual drug gesture is happening after the states in on creation, let's define a new at gesture. State were able to start the drug state we discussed before navigate to their properties block. If your minimum is displayed, then you can use their creek navigation feature by moving your cursor over the minimum, impressing the command key on your keyboard. As you can see, it's very easy to jump from one place to another with this new X course feature. Just try it out. Okay, back to our new would track state property. Enter and gesture stayed private. Bar track, State course track state not inactive. This war is, said Toby, inactive by default to sidetrack for a moment. Let's update the header and footer before we add a new swifty. Why gesture to the card for you? Our goal is to hide the header and the floater with a nice animation. When the user taps on the card and start the drag gesture, this piece off interaction is part off the U X a k a user experience design All right, junk to the header and at this modifier to it. Opus City Drax, They'd is the dragging question mark 0.0 Kalan 1.0 Animation Defour's This code will hide the heather using the default animation than the dragging is happening. Now go to the food er and at the same modifier to it as well. AAPA City drag Stayed is the tracking question mark 0.0 column, 1.0 animation The fort He ZBZ. The more complex part is just coming by creating a complex gesture. Recognize er modifier and attaching it to the card for you Go to the card view and create a new gesture modifier to hit below his index modifier. Enter gesture Long press a gesture Minimum duration 0.1 Sechrest before track gesture Abbey dating seven Dolar sign Trek stayed body But you I stayed transaction in a switch that you case first. True Stayed it waas Pressing case Second True. Let drag state because dragging translation Drag Question Mark Translation Double question mark zero The Fort break Basically, the following thing is happening. This with your eyes gesture modifier has got to gesture Recognize er's along press and the drag The long press a gesture is quite self explanatory. We are setting up a minimum time length for the press, a gesture on the screen off the device the user needs to tap on the screen, at least for 0.1 seconds before it triggers this five movement. Then, when the drug gesture is deducted, the update the track state variable and store the translation value. The drag this cold does nothing visible for the users just watching for a long press and the drug gesture made by their user. Then it changes the drag. Stayed accordingly. After adding these gesture, recognize er toe the card view. We can start the life review, and that's whether it works or doesn't let's do it. Now when we click on the card view and try to move it, then we can see that they, Heather and the food or section are disappearing as they sure to do. Our code works like a charm So far. Now we need to work on this fight motion. Have to the end of the lecture first reveal moved the card by adding on offset modifier after dizzy index modifier enter off, said X Self jack state translation with value self track stayed translation height thanks to the X Courts New Life Review feature. We can test it inside the Converse. As you can see, we are able to drink the card, but it's a quite clunky because there is no animation. Let's add one right now after the offset modifier Shelvey animation in their collating spring stiffness. 120 damping 120. All right, let's test it right now. Can you notice the difference this spring? Animation will make the back movement so smooth, and we are realizing the cart. After adding a new animation to this five motion, they are going to skilled them. The card during the movement at this effect before the animation modifier skill effect. So drag state is the tracking question. Mark 0.85 Cullen 1.0. All right, let's test it right now. Great. It works as it's supposed to do. The final segment off this Customs fight motion is to rotate the Carven. A user starts tracking the card to the edges off the screen at this new rotation effect modifier before the animation rotation effect Angle Degrees Deborah seven Track stayed Translation. Vit, divided by 12 Let's. There's the rotation effect on the card in their life preview. We define the rotation angle from the translation off the track so more the card moves more . Is that this stance from the origin place than they rotate the card? More and more. Nice job. Just a quick question. Do you notice a problem in the preview? While dragging is working? You are actually dragging the four card deck. But we really want East Well, oh, the user to drag only the top most card and stay the card underneath and changed. To fix this issue, we have to update the following modifiers accordingly. Offset scale effect and rotation effect. That's a jumper back to the offset modifier and update the existing court exposition. Self East Off Guard God Hugh Cards You question Mark, then column. Zero. My position. Self East of God God view God view. Question Mark, Then column zero. After that, let's continue with the scale effect at this second conditional statement after the is dragging double and said East off card card view card to you Super. Lastly, we are going to have date the rotation effect. Enter Self East off God card. Hugh card view, then question mark. And in the end, colon zero. All right, we are done via updating the offset scale effect and the rotation effect modifiers. This FIPE, a gesture is applied only to the top most card. We should definitely dust it on a real device or in the simulator. That said, Let's build around the project. After finishing this class, we should be able to drag the card and move around and add to these when you release the card, it should return to its original position. Congratulations. You have learned a lot about how to create a slightly advanced. Just sure it's 50. Why the honeymoon at is almost done, But before completely finish this up, we need to implement some missing features for it in the next lectures. See you in the class. 15. Let’s display the Heart and X-mark symbols during the swiping: Theo Track gesture off the honeymoon app is now working. How cool is that? In this lecture, we are going to display the heart and the X mark symbols, depending on the swiping direction, when a user tracks that almost card to right or left. First, let's create a new image with the X mark SF symbol. Navigate to the card section, then insert this new overlay modifier under dizzy index modifier. Overlay disease check X mark symbol image, cyst them Name. Ex circle for grand color color white formed. He sees them sighs 128 shadow color color. You are color. I read zero green zero blue zero that it fell 0.2 radios 12 x zero. Why zero? All right. The X mark symbol is already displayed on the preview Converse. Now, you probably may think that if you continue of it the heart symbol. But I would rather I recommend you to create a new custom Humadi Fire for styling these images. This way we can use this modifier both on the heart and the X mark symbols. Having said that, select the modifiers off the X mark symbol and cut them to the clipboard. Now navigate to the modifier folder and create a new swifty y file. Name it toe symbol modifier and save it to the modifier for their. So far, so good. Now delete the whole preview section and update. Distract as I do. Abstract symbol modifier. You modifier, funk body content content, some of you content. Then place the symbol modifier from directly board inside the content. Great job. It's time to use our new symbol modifier. Go back to the content you file that hide a navigator upon us and at a new view modifier for the X mark, symbol, modifier, symbol, modifier and charities. A big X mark is sitting on the top off the card. We can do this again with the heart symbol. Insert a new image inside the overly and under the X mark. Hard seem boil. Image sees them Name, board, circle 20 fire symbol modifier. That's then both of the same balls on this raid on the card at the same time. But obviously we want to hide them until a user tries to true away the top. Most got more over the intent to display these symbols only when the distance off the drag buses. A specific tres hold, for example, than the drug movement is not enough long than a user releases the card, it will move back to its original position on the car deck. This way, the add more value to this. Reach user experience. Without further ado, let's declare a new drag. Tres hold property private lead drag area. Tres horde CG flowed 65.0. Once the translation off the drag passes this 65 points stress hoard toe either right or left direction than reveal overly ah heart or an X mark symbol on the guard. Furthermore, if the user releases the card the every, remove it from the deck, create a new one and place the new guard toe the back off the deck. It's time to implement this functionality for the symbols. Let's start first with the X mark symbol. Opacity, self drag. Stayed, translation it less. Then minus said drag. A rare chess horde. Double end self. He stopped card God view God to you. Question. Mark one Born zero column, 0.0. Then likewise this. Let's continue with the heart symbol. Opacity. Seven. Track state Translation. The kids more than self tregg area. Chess Hold double and said East Off Guard card to you God's view. Question mark 1.0 callen 0.0 to sum up. What are these new modifiers do by default? Both same boys are hidden by setting their opacity to zero. The translations with has a positive value if the drug is to the right. Otherwise, it's a negative value, depending on the left or right track. Directions. The Abbeville on real one off the symbols. When these track translation exceeds the 65 points trash world and that's it. Let's start the Life Review on the campus toe. Have a quick test. You can see that when the drug exceeds that pretty find trash, hold the heart or the X mark symbol. We're appear on that card. We have just finished another exciting feature for the honeymoon app. Awesome work 16. How to remove and insert the cards: Theo. Honeymoon Happy is all more Sudan, but I am afraid that one more main functionality is still missing. Now, when we release the card, it returns to its original position. In this lesson, we are going to remove the top most card and add a new one at the same time. First, let's declare. I knew state were able to keep check off the last index off the card had stayed private Bar Last Card Index and because one you may ask what it is last card in the axis for basically when the card that kiss first initialized. Then we stored the 1st 2 cards in the array and display them on the screen. The last index is set to one. Okay, are seconds that business following? Let's mark the card views arrayed with the ad state so that we can update its value dynamically and refused the user interface with the new cards in Desert at state. So far, so good. It's time to define the core function for removing and deserting the guard views. Let's create a new function. Good move Guards Mark moved their card prided funk move guards, card views, removers said last card index plus equals one lead on a moon ik waas Honeymoon data Last card index Their son side Honeymoon data count Lead New God you the course God to you. Honeymoon Honeymoon God views a bent New gods You all right? Let's hold on a second and analyze what these new move guards function does. If you don't mind, this function first removes the top most card from the card use array after that it instead she eight's a new card. Since we have defined the card use wherever as a state property. Therefore swift, you live your refresh, rendering the card views again. Once the erase while you wish changed just one more thing. Be addition to the person sign, which is our modules operator in swift programming language. In this, the always want the card deck toe Keep showing. Ah, honeymoon destination guard. That's why after the last card is displayed, the rial revert back to the first card. Next, let's update the gesture modifier with deserting a new one and it function inside it, navigate to the gesture and start typing the following court under the updating modifier on ended that you, in God case second, true let track question. Mark equals value as return if drag translation read less, then minus self drag. A rare Josh World Double Bip Trek translation read more than sev drag area. Josh would said. Move guards great than the users Drag gesture ands. Then we check if they're dragged. Translation exceeds the 65 points Trash world and call the move Guards function accordingly . In the case that this that's off the track movement is less than 65 points than the card, we will snap back to its original position. Enough saying, Let's this are coat in the Life Review. Shelvey dragged the card to the left or to the right, until one of the symbols appears by releasing the card. The talk most card should be replaced by the next card beneath it. Why don't we test it on a real device or in the simulator? Let's wheeled around the project. Just wait for a second deal. It's really launched, and here it is a fantastic job. Her ray. It works as we want to. In this lesson, we learned have to remove the talk most card, and is that the new guard to the honeymoon Kardec. Don't skip the next class because I have more exciting features to show you. See you soon 17. Enhancing the animation with custom transitions with SwiftUI: the honeymoon Add functionality is done, but when it comes to the user interface and user experience design, it falls short off expectation. For example, one area that he could improve is the cards movement, and the user releases the card instead of having the card disappearing. Suddenly, the card should fall out off the screen smoothly. Then it's true Muay to fight on the animation reveal, attach a new transition modifier and apply on the symmetric transition to the card. Hughes without her Dorado. That's a champion to, according with ex schooled, restored by creating a new a somatic transition extinction. Having said that, let's create a new folder called Extension in the Project Navigator. Select this new folder, then create a new swift file. Name it to God transition and save it in tow. The extension for their. After that, importers 50 y friend work and create a new extension with the following court extension Any transition static bar trailing bottom, any transition, any transition, a symmetric possession, identity removal, any transition move edge trailing combined Did move edge. Batam static are leading bottom. Any transition, any transition, a symmetric insertion identity remover, any transition move edge leading combined did move edge bottom. Don't worry, because this is a slightly advanced swift You Why? But we've your practice it several times in this master class. Let's analyze this cold a bit. Basically, this any transition extension defines toe a symmetric transition effects. The main reason why we chose to use a symmetric transition is that we only want toe any mate. The cards transition when it's removed, so when a new card is inserted in the deck, there should be no animation whatsoever. The first trailing bottom transition is used when the card is trump every to the right off the screen. The second leading bottom transition is applied when the card is thrown away. Toe the left. All right. After we finished with creating the custom transition, now we get back to the content. You next declare a new state property that stores the transition time and stayed private for God. Removal. Transition equals any transition. Trailing Batam, the default value off this card remover transition is set to trailing Batam. Now we need to attach a new transition modifier to the card view. After Ader, the animation or the gesture modifier, I chose the last one The only thing we need to do now is to have the decode off the gesture modifier by adding a new unchanged function to it. Let's is there the following piece off court between the updating and the own ended functions unchanged that you in guard case Second, true that the track question mark, Because why are you as return if drag translation hit this, then minus self trek area trash would seven God removal transition? Because bleeding Batam If track translation did more than self Dregg area trash would seven god removal transition it was trailing bottom. But this function does is called the removal transition. Besides that, a type of transition is updated accordingly to the users five directions. Now the honeymoon episode Ito build and run in the simulator again. I must there you that I got a better result when I test that this court on my real device. Nevertheless, we should see a significantly improved animation and over l u I behavior than we true away the top most card in the app. Okay, okay. I promise you the last chapter off this section will be such a fun. You really see? Then we put the cherry on the cake 18. Implementing new haptic feedbacks (success) and playing sound effects: it's 50. I can easily build some cool, any measures and other more than you in patterns. However, you can enhance user experience even more by using sounds and haptic feedback. That is exactly what we are going to do in this lecture. We start by creating an audio player than reveal at different sounds in multiple places. Without further Ado Senate, the main honeymoon project for order in the Project Navigator, then by control or right click on it, create a new group called Helper. After that, let's create a new swift file for the audio player. Name it to play sand and save this file into the helper for their all right, that's start according First Important or the O Video Foundation. Friend Work Import a V foundation, then create a new function that he will play the sounds no matter what is the name or type of the sound file. Far audio player here, a V or the open here. Question. Mark Funk. Please sound sound string Taib String. If that off he calls Ban do mean above for resource sound, off dive, dive do audio player. It costs. Try a V or the open a year contents off you were Finally You were Elvis. Both both audio, Clear question. Mark three. Catch print, add or couldn't find and Breda Sound file. This block off court could be family heir to you since we have used it before in the US there class scores just a quick recap. First, he created a new audio player variable, which is an hour, the openly your type. Second, he created a new function. The two parameters. The first about a meter, is the sound name, and the 2nd 1 is the sound five format. Both of them are String Stipe. Next, inside the dysfunction, we defined a new variable this war. We're check if the AB can assess the sound file in the sound folder off the up good swift programming practice is to use the do try catch block off court for further error handling . If they cannot assess the sound file because it doesn't exist, or maybe we misspelled the name off it. Then it will print out a basic error message in the debug area. In the case that happen is able to assess the sun file without any problem. Then it will try to create the actual or the open here and use the bath off the sound file . After that, the audio player starts playing the given san file. The beauty in this code is that we can reuse it in the application at any time, as we want. All right, enough saying, Let's implement the sounds into these up. First, let's open the food or view file, then navigate to the battles. Action and call. The new function plays sound sound sound. Click Taib and be free. Nice if you continually they had a real Chevy, opened the Heather View file, then navigate to the first battle and add the new action to it. Please sound sound sounds click type and be free. Next jumped with a second Bratton and at a new action to eat as well. Please sound sound sound. Click Taieb and be free. Easy peasy. Isn't it? Great job so far we use only the click sound in the air, but there is another chimes sound in the sound. For other, our goal is to play this very catchy chimes sound than the user Tro Zaveri a card. It will create a friendly feedback for the user with a tiny enjoyment. Listening to this sound that said, Open the content you file and navigate to the move cards. Function inside the on Andy Dick gesture modifier than enter. Please sound sound sound. Rice dive and be free. So far, so good. It's time to dance the happy in the Life Review. Then click on their book Destination Battle and Listen. Then click on the Help Butter and listen again. Did you hear it? Something is wrong because I didn't hear the sounds. But about you, that's that's doing for battle now. Nope, it doesn't work at all. Let's see. We can hear the chime sound and the true away A card. Nothing happens. Our son function is definitely not working as it should. What's going on with it? According to the Swift compiler, our code is not broken. We can even run the test in the Life Review. Hold on a sec. Have you stopped the recording now and take a deeper look to figure out my vehicle? Don't hear the sounds All right, I figured it out. There is no problem with the court and with the function, but I made a rookie mistake at the beginning off this section, but I was doing wrong is that I dragged and dropped the whole sounds Walder into the Projects Route Fi system. If you can remember, I did the same thing with their set for others as well, which is good, no problem with that. But after then I dragged the sounds further into the project. The blue folder means that it is an actual real folder which exclude always watches. So when you add a new fight to this folder, it will be part off the project automatically. The blue for others are real for others in the deployed bundle of the app. However, in this case, we need to refer to the file with the direct path. Next, the yellow folder means that it is a reference group this way, the use groups to organize vice in the project without affecting their structure on the actual fi system. Because we want tohave a relative half locating the sounds vice in the F Bandel. Therefore, we must use a reference group for that. So let's fix my mistake I have done earlier. It's quite easy. Open the project navigator and simply deleted a whole blue sounds Father choose their move to trash option in the Baffin, though that's right. Now open the resource is folder on the deck. Stop and open the Sounds folder as well. Select all of the sound files there and drag and drop them into the main projects route for their. And here it is. Make sure that the destination and they create for the references options are selected and finish the process. Finally selected this vice and create a new reference group from the selection, As I do not a big deal. Let's test it in the Life Review and guess what by doing these are function will find the sound Feist without a problem, that one off the headers, batons and listen to the computer carefully. Yes, there is a solid click sound when we click on the button Play V, the other battles as well, a little bit. And here it goes. I like so much. The X scored new preview and steps capability and you now trying to true away some cards in the preview. Fantastic. So cool. Awesome job. You might us. What's next and the answer is predictable haptic feedback. RUS has some nice, pretty find haptic feedback such as a road warning and success, we are going to implement the success haptics in the honeymoon app. The process is quite simple and easy to follow. We need to write only two lives off courts for each haptic feedback, open the food interview and create a new constant for the haptics. Let have dicks because you why Notification feedback generator, then implemented inside a better in action said. Have digs notification a cured sexists. Great job. Repeat the same process in the future view as well. Lead haptics because you I notification feedback generator. Next, give these haptics to each battles too, said Had dicks. Notification a cured sexists said haptics. Notification of cured success. Super duper they are done. Now let's build around the upon the rial device or in the simulator Shelvey. Congratulations. This application is quite impressive. For sure you have just finished honeymoon a tender like a with some advanced gesture features. You can use these in your portfolio and even show up with it in your next job. Interview if you wish. The more you build, the more confidence you gain in your developer journey. I hope that you enjoy the score. So far, and I can tell you that more is coming. Just one more thing. I would really appreciate it so much if you could take time to give me a star rating or even better, if you could share your learning experience with other students by writing a review or discourse. If you wish, you can always send me a question or even recommendation about the masterclass. I would be glad to read your success stories, too. Until then, happy coding.