SwiftUI Basics: Let's create an awesome iOS card app UI/UX design with SwiftUI in Xcode | Robert Petras | Skillshare

SwiftUI Basics: Let's create an awesome iOS card app UI/UX design with SwiftUI in Xcode

Robert Petras, UI Design & App Development with SwiftUI

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 31m)
    • 1. What kind of iOS app we're going to build with SwiftUI?

      4:00
    • 2. Xcode - Apple's App Development Software

      13:16
    • 3. Let’s set up the iOS 13 project

      11:25
    • 4. How to create a launch screen in iOS 13

      6:21
    • 5. Create a card view in SwiftUI

      14:37
    • 6. Repeating content effortlessly with ForEach

      4:30
    • 7. Create a data model for the cards

      2:21
    • 8. Let’s create an array of static data

      4:26
    • 9. How to load static data in SwiftUI?

      6:09
    • 10. Let’s play a sound file with AVFoundation in SwiftUI

      5:14
    • 11. Introducing SwiftUI Animation in iOS Development

      9:00
    • 12. Let’s add a Haptic Feedback for the iOS 13 app

      2:07
    • 13. How to show Alert window with SwiftUI in Xcode

      2:28
    • 14. Let’s create Stickers for the mobile app without coding

      4:49
12 students are watching this class

About This Class

5bd019c9

Visually learn SwiftUI, Apple's latest User Interface framework, and build a top-notch iOS 13 and iPadOS card app.

This class is designed for you to start SwiftUI and iOS 13 app development.

Who is this class for?

This SwiftUI class is suitable for anyone without any prior knowledge in iOS development.

What is the difficulty level of this class?

The difficulty level of this SwiftUI class is Beginner.

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 mobile application with eye-catchy UI/UX design using the SwiftUI framework in Xcode:

  1. How to set up a new iOS 13 project
  2. How to create a launch screen
  3. How to add icons for the app
  4. How to create a card layout with SwiftUI
  5. How to load different information from a data file
  6. How to play sounds
  7. How to animate user interface elements with SwiftUI
  8. How to create a haptic feedback feature
  9. How to show alerts with SwiftUI
  10. Finally, how to create stickers without writing any code

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

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.

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.

Students are encouraged to use the comments system and share their learning experiences with us as well.

Technical requirements of the project

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!

1f46047e

Transcripts

1. What kind of iOS app we're going to build with SwiftUI?: Learning, iOS app development and creating standing applications is not only practical matter, gratifying activity as well. They derived the learning material and teacher visually learn a swift UI, Apple's latest user interface framework and beard, a top-notch iOS and I bet OIS card app. Hi, my name is Robert delete, instructor of this class. Our professional iOS have developer and UI UX designer. In this class, I will teach you how to create an amazing mobile application from scratch using the latest and greatest in the Swift programming language and the Swift UI framework. Who is this class for? These beginner class is for every aspiring app developers who want to create apps from scratch. This skews UV again from this class, can be used to create apps for iPhone and iPad two devices. What is the class all about? This practica class is about achieving three learning objectives. Swift UI framework. Now first thing that you really learn is how to use Swift UI apparatus, native UI development framework, iOS development. The second thing that you will achieve is learning how to create this amazing application from scratch. Xcode essentials. The third thing that you real acquire is the essentials of app development in Xcode, code editor. But UV or create in this class. By the end of this class, you will create this fully functional developers card app that you can launch and use on your iOS device. You can use this application as a foundation of app development or building even more complex and powerful apps. Value should take this class. Project-based learning approach. This class takes learning programming concepts through a project-based approach. It means that you will learn everything you need to know my creating a new application as your class project. Contextual learning. Contextual learning is a method of instruction that enables students to apply new knowledge and skills to real life situations. It means that new app development concepts are introduced loyally venue need to use them. Hands-on development. Finally, this class is not just going through boring programming territories, but instead we will focus on writing real Swift code in Xcode Atlas official app development tool. By taking this class UV or speed up your Swift programming and iOS app developmental learning by creating, encoding, these gorgeous application. Having said that, see you at that class. And the reason is, but anyway. 2. Xcode - Apple's App Development Software: Ex scored ex Cordis at loose programming software For developers, It's free, and you can download it from the Mac App store. It's an all in vane tool with a very powerful code editor and many other sophisticated features Inside it. X Code is required to do mobile and next stop application development for any approved platforms such as iPhone. I bet Apple watch every Davey and even Macintosh computers. Having said that, your first step as a new APP developer is through. Open the Mac App store on your computer and them load X scored by clicking on the get button. Just the gentle of warning. The five size off Xcor is quite inner mus, so you are better to start them, loading it right now and carry on watching this lecture. Every development van on one vile ex corde is them loading from the Mac App store. We are going to get family air it the most important matter areas off development Shelvey received. Swift is a more than programming language that lets you write EPS for a U. S request and other Apple platforms. Like other programming languages, Swift contains the necessary functionalities for building programs. However, it doesn't have anything like user in their faces, in boots, out boots or audio and networking. Swift isn't only a powerful programming language, but it's also easy to learn. Swift. You I Swifty. Why is a modern cross plat firm framework toe there? Claire user in their faces for any apple platforms? It's swift. You I We can create beautiful, dynamic acts faster than ever before. With these it was so let's as well, abs for a U. S. Request TV us and even bachelor s with significantly less court than before. I us I bet US Mac OS vetch US, TV us These are the currently available operating system off the apple platforms. They are responsible for all operations on their corresponding apple devices, such as messaging making, phone calls, delivering notifications, droving on the screen, running all kinds off EPS, networking, etcetera. Ex scored ex corde includes every tool we need to create Amazing APS and toe bring our ideas to life on every apple device because everything is so well integrated into X court. Therefore, the APP development were Crow piers natural, just some of the tools and features that exclude provides through developers source code editor. A sad catalogue canvas. I mean the map jump, a bar version, editor source, control, Best thing, tubs, snippets, shares and so on. Simulator. The ex court simulator presents the iPhone, I bet, or Apple watch user in their face in a viviendo on your Mac computer. We can interact with simulator by using the keyboard and the mouse to emulate taps, device rotation and other user actions. It's a very useful tool, since it lets us through. Death are APS very quickly, without having to use a real device. Pally Grands Swift Play Grants is a safe and enjoyable development environment for learning , prototyping or testing a swift program. It comes with free flavors. First, we can called using the X courts playgrounds. Second, we can choose to use swift playgrounds for I bet. Finally, the Swift Way grants was so available for us as an independent index stop application from the Mac App store. It's weird to mention that we usually don't build a relapse Wheat les grands, but they are great for learning. They are going to use X court play grants in the swift programming language. Fundament does less going further. Redick scored in this lecture. If you create a basic swift, do I project and look at it in the X court workspace. If it's a bit overwhelming at first, don't worry. You'd want to need to know everything about X scored before you can use it to make caps, you will be guided through the process. Step by step, learning as you go along. Create a new project. Open X Court from the Applications Directory. The bear come to exclude Window appears in the American window. Click. Create a new Xcor project. Exclude Opens and Nuveen, though, where you can choose a template. Ex scored includes several built in templates for developing common types. EPS such as iPhone, APS, games, Epps with step based navigation and so on. Most of these templates have a pre configured in their face and source code fires. For this lesson, you were start with the most basic template called single view application. Make sure the eyewear section is selected at the top of the DIA log that you can see that the application heading in the main area off the ideologue, click their single view application and then click next in the next day. A look that appears. Use the following values to name your app and choose additional options for your project. Kodak name. Hello, Swifty. Why? Xcor uses the product name you enter to name your project and the app Deem if you have a napro developer account Logan, in here, we'll love 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 U. S. Simulator on your Mac organization. Name the name off your organization or your own name. You can believe these blank organization. Identify your your organization. Identify your if you have if you don't use com dot example bundle. Identify ire This way. You was automatically generated based on your organization. Identify your and your product. Name the language Swift. You are in their face. Swift. You I you score data on selected include unit test and selected include your eye test and selected Click Next in the dialog that appears, select deck stop as a location to save your project and click create. If you are not family air with source control, yet you can uncheck the box. That asks if you would like to create a git repository. After that, exclude opens a workspace window shoving your new 50 y project. You've you see a lot of information on the screen. We are going to learn the basics about these in some details. Ex scored areas. Having said that before we build and run our app at the first time, we are going to take a creek to ward off X courts, me and areas. The first time you open a project in X court, you've UC doesn't solve Butters, Banaras and steps. It can be hard to know Beach Butters. We'll show you different parts off your app and which will actually change the way your app works. Take it slow. You really become family air, with many off the controls in X scored over time. You don't have to understand exactly what all the buttons and menus do right away. And keep in mind that even the most experienced developers are always learning new tricks and techniques. The ex court, where space is divided into six main areas, each with different information about your app and it's fires. Let's go through each of these areas. Chevy toolbar, you have you use their toolbar to check their project status to hide and show the other window areas. And, most importantly, start running your air from the big play Button Navigator. You will use navigator toe. Move around your project. This is very you select, which filed toe open in the editor with a single click. A double click being open the file in a new window instead of the current editor and detour . This is where you will add it. Your court, Whether sore scored or user interface elements, most developers always keep the editor visible. Why they are working Campus Ex Court includes intuitive new design tools that make building in their faces with Swifty. Why as easy as the dragging and dropping as you work in the design canvas everything you add, it is completely in sync with the court in the editorial. Besides, to it, court is instantly visible as a preview. As you tie and any change you make toe, that review immediately appears in your court. Exc Ordinary combines your changes in startling and deserts them into our running version off your app, resemble and edit table at all times. As you notice there is an iPhone preview window on the campus area. We can create van or many previews off any swifty. I've used to get simple data and configure almost anything given to see in the user in their face. Inspector, you've your used inspector toe. Find that more details about the item currently selected or displayed in the editor. The quick help inspector can be very helpful, especially if you are a beginner app developer. Do you back? Did the back area opens at the bottom of the X court main window below the source and it worth and you build and run your APP? You may hide both the navigator area on the left off the window and the inspector area on the right of the window. If you would like more space, where did your coat or in their face FIEs build and ran your alright? It's time to ran the up in the simulator because your first Swifty y project is based on an ex courts template. The basic environment is automatically set up for you. So even though you haven't written any court, you could actually build and ran a single view application complete without any additional configuration to build and Iran your abused the simulator that's included in X court. The simulator gives you an idea off. Have your app would look and behave if it were running on a device. Build means assemble all of the parts into an app Randy Means started the as if you would that it's icon on the home screen to run the Hello Swifty. Why at in the simulator first, we need to click the run button in the toolbar at the top of the X Code window if you are running an app for the first time. Ex Court asks whether you would like to enable developer mode on your Mac. The developer more gives escort assess to certain the bagging features without requiring you to enter your password each time you see the simulator startup, then show the home screen. Then start your app. Congratulations. You made your first app. It's 50. Why? I hope that you have enjoyed this quick introduction to the development and the ex Corde tour. Your journey just began. So enjoy the process and learned by doing outstanding applications. It's 50. Why see you in the glass 3. Let’s set up the iOS 13 project: Let's set up our I US for team. Project them. Load the project Resource is from this section. Place it to the desktop and ANSI bid by clicking on the package. The provided package contains free folders marked with the Swiss logo. On the supplementary Very book file, you can find the completed project in the Green folder. This finished project with the source codes may have you when you are stuck and need some quick hap. The next warder is the red one. All of the resource FIEs are in this further ready for working with them. The color off the Final Four There is blue, this student's folder created mainly for your project. That's why it's empty for now. You are going to create and save your up in this place. All right. After discussing the downloaded project folders, we are going to lunch. X scored 11 when you open X scored a welcome window will ask us to choose one off the available options. Since we are going to create a new Xcor project, please click on the second menu off the left side off the window. During the initial project creation Ex Code provides us a bunch off Pretty find project templates. In this lesson, we are going to use the single of you up under the I rest the bar. Next, we have to configure some of the options for our new project, such as the project name, programming language user in their face and so on. For the product name. Enter. Learn by doing team. If you have an apple developer account, logging in here allow you to build your up on a device. If you don't have an apple developer account, you can skip this part and test your up in the IRA simulator on your Mac organization Them . Enter your personal or company name here. You can leave these blank to for now. Organization. Identify where he usually entered the company's website name in reverse order, for example, com 0.50. Why masterclass The battle Identify air is automatically combine from the project name and the organisation. Identify where to put it. Simple is the unique idea and the fire off your up when you publish it into the APP store. Next, make sure now the language is set toe swift. Then the user in their face is must be Swifty. Why Finally, you can leave the core data, the unit test and the U I test unchecked because we are not going to use them in this time . After all of the settings, click on the next and the ex Corde we'll ask. Ask where we want to save our project on the computer. Please find a desktop and choose the students Up folder as the destination off your ex called Project. Before you click on the Create battle and start the project, Please uncheck the source control setting and you are ready to go. Icahn open. The resource is for there inside that. Open the icon and I can set for their in this warder. Select all off the graphics on the content Jeez on file and copy them. Toe that clipboard. Finally, close the finder in, though in X code, click on the Assets Warder in the left side off the Project Navigator. You really see an empty Aiken folder in the center part off the X scored. Select the folder and right click with the mouse or Control Creek on the up Icon folder. Choose the show in Finder Option in the Context menu and Xcor will show you the Icons folder in a pop up window. Open the APP Icon, Set folder and based the icons and the content jesu file from the clipboard into this place , you will be asked to replace the existing content. Jeez, on file. Choose your place. Close the finder window again and you will see that all icons off this project had been placed correctly in the assets. Waldir Just have a look at how many icons we need tohave to provide in orderto publish our abs into the store. It's a quite tedious work to insert the icons one by one into the right place. Hold there, so we speed up this process. This time you color a set. Click on the plus button on the bottom part off. Exclude. Choose new color said, rename its toe color shadow. Make sure that the inspector panel is open. Select the color said there red, green and blue sliders to zero. It will create a pure black color change. The opposite E off this black color toe 60% which makes it semi transparent. And that's it. You created manually a new color asset for the project. Pretty find colors. Now we get to the resource is for there again on the desktop above X code. Open the Colors folder and select all of that wealth. Color assets in it, then track and job This folders toe the assets panel. As I show you, you will see these vibrant colors in their sets. Wanna select thes colors by clicking on them and pressing them the shift button at the same time? By right click or control? Click on them. A context menu will be a paired Choose new. Further from selection, it feels. Insert all of their color assets into a new father. Rename its two colors. After creating the color assets we are going toe art the graphics to the project. Navigate to the resource is for there again on the desktop above X court. Open the developers for their and select all of the graphic. Fasten it, then drag and drop this PNG's toe the SS panna, as I showed you before, you will see that one X toe works and the super Adina Tree X variants off the graphics in there. Sad Spagna. After then, select these images by clicking on them by oppressing them. The shift button at the same time again by right click or Control Creek on them. A context menu will be a paired Choose new folder from Selection, it feels. Insert all of the assets into a new four there, rename it to developers. The same process will be aptly cable toe. The other graphical a satisfies Navigate to the resource is folder again on the desktop above X court. Open the large screen further and select the to fi. Seen it, then drag and drop this B D efs toe the assets wanna the same way as we did previously. Next, select these vector fais by clicking on them by pressing down the shift button at the same time again by right click or control. Click on them. A Context menu of you will be a paired Choose new folder from Selection. It feel Insert all off the assets into a new folder. You name it toe lunch before we finish all of the preparation work. With their sacrifice, we need to do one more thing. Select both the Grady and Color Asset and the Swift logo Fais Open day Inspector panel under the image said top section. Check the criticising mark and preserve vector data for a project. This option. We'll make sure that our rector graphic will be sharp on all devices. As you see in their assets panel. We have all of the necessary graphics and colors in our clean and organized structure. For Swift do I project just one more thing before we start according Choose the iPhone 11 pro simulator on the toolbar, then build and around the current app by pressing the play button this feel a lunged a simulator and by closing the AB, if you will be able to see the APP icon on the desktop. 4. How to create a launch screen in iOS 13: how to create a lunch screen in I us for Tin. Since the launch screen is the first screen, users see even the open an app. Therefore, it's important to know how to create it. We'll start with the background off the launch screen. Select the large screen storyboard filed in the Project Navigator. We will see an empty iPhone story word in the editor. Click on the plus button on the toolbar. A new asset. Syrian, though we're poor Pap then and their image in the search feared select image of you. After that, drag and drop the image view into the center off the iPhone storyboard. The dashed guides will help you to position it. Make sure that the attributes inspector panel is active at the image of you section. Start die being launch and choose the lunch screen image name at the image of you. There is a content more here. Choose Aspect field for the image. It will scale up the image and feel the full screen for us. Later on. I had a new constraints by clicking on its battle at the bottom of the editor. However, over the same waas and that duty pure give you a hint which one it is. Be careful now because working with constraints, it's a bit tricky. Choose the view instead of the safe area and said its value to zero. Start with the top than the left than the right side. Repeat the same options and finished this process with the bottom one. When you are done, click the at four Constraints Button and exclude. We'll do the rest for us. You can see that a purple toe being background feel that the whole storyboard screen after the background we are going toe had a local and the slogan to their launch screen. Click on the blast button on the toolbar. Seconds time a new setting those be a pop up again, then end their image in the search feared select image of you. After that, drag and drop the image view into the center of the storyboard. Follow the dashed guides toe position that will go in the center. Make sure that the Attributes inspector panel is active at the image you section Start typing logo and choose the logo Dash Swift dash outlined image name a wide, swift logo via a bear on the storyboard next we are going toe odd attacks labour to it. Click on the plus button on the toolbar. Third time search for labour, object and drag and drop it below their logo. Image on the storyboard. All right, so far, so good. But we need some changes on the new tax label at the labor section, said the alignment to center. Then enter. Learn by doing slogan into the text field. Then click on the default labor colored drop down menu and choose the fight color. You may find it at the bottom of the list. Our next task is to choose the right typography for our slogan. As you see, we are going to use the system from type 40. It's wait style Jews thin and for its size, and the 36 click on the damn button with this combination beer Get on I catchy launch screen. The final step is to put the logo and the label into a vertical. Is that container and center precisely this container on the launch screen because are absolutely out. We'll be optimized not only for iPhones, but I pets as well. Select both the image on the label, then click on the embedded in button at the bottom off. The editor. Choose the stack you option with this. X court will create a vertical stack container and put the logo and labour into it. At the attributes inspector. Change the value off the default spacing from 8 to 12 after this small refinement, adding new a Lyman constraints by clicking on his bottle at the bottom off the editor. Firstly, check on the horizontally in the container checkbooks. Secondly, check on the vertical in container Checkbooks finally click on the add to constraints pattern, since we have already created an all some lunch screen for a project. So why not build and run it on the simulator right now? Go to the toolbar and click on the beard and ram 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 for murder. 5. Create a card view in SwiftUI: create a guard view in safety. Why in this lecture we are going to work on this project further. If you create a card you and designer complexly at for it, go to the file Main menu. Choose new you file manually item in the next panel under the iris. Stop Choose Swift, who I view type from the provided templates. Give this file Ah, cardio name and save it by clicking on the create bottom Xcor were open this card you filed immediately. They started to code by adding a comments section about the body off the card and there mark God, Then delete the default text You if you replace it with a Z stack which will be the main container off the card in the Z stack and the decks God, when they change significantly the coat than the automatic preview stops working and we are forced to restart it manually by clicking their resume bottom at the top right part off the preview window. Our next task is to add some properties to the card Enter frame of aids 355 hide 545. This cold defines the vid on the height of the card. Next, we are going toward background color for the card and, uh, background cooler pink. Then we realized the nice corner radios to it. Corner radius 16 we are adding. Drop them shadow with the radios off. Eight points to the card shadow radius aid the contents. You in this part, we are going toe embed are separate card view to the main content You off this app. So like the content you filed in the project Navigator Bana. It's always a good practice off adding a comments section above the main parts off our code and there mark comment above the body of you replace the text you with the card you card for you. After resuming the preview, we can see the embedded card view in the content You. It's were to mention that at the Batam part off the court there is the preview section, so let's mark it with a nice block comment to. Moreover, we can define which simulator we want to run in the preview in, though in this case I will choose the iPhone 11 pro so enter preview device iPhone 11 pro below the content you preview mode jump back to the card. Select the card view file in the project Navigator Panna at a comment to the preview, too. But this time, if you only want to see the size off the card, so use size that fits parameter in the preview layout. Modifier like this preview a layout sighs that hits resuming the life preview. If you see the card only in the preview in though, Grady and Color Next, we are going to create a sleek Grady and color for the card. Mark a common section above the card and call it properties. Mark Properties create a new were able for the Grady End, which is an array off colors and at the 1st 2 colors, as values off it from their sets. Color one and color, too. We will use this Grady and color for the cards background. Delete the previews background and create a new one with linear radiant, where the ingredient is Grady and and Close on the Grady. And where I ever the start point is top and the endpoint. These Batam resumed the life preview and you hear, see the Grady and color off the card guard image that's quickly jumped to the assets catalogue and have a look at the names off the images. Go back to the card of you and replace the text with an image. Give you the name developer number one. Do you see after reloading the preview? It's quite cool, isn't it? The title. After all of this, we are going to create the title of the card out of the toolbar and click on the glass bottom. Search for vertical stack and click on it Odd Adex to you inside the V Stack and enter safety y. Then create a new text you below of the title and enter better abs. Less code. Finishing with that really learn have to use the library toe. Add a new modifier to our title and hand line text sounds good press and there after the titles code. Then click on the plus library battle at the toolbar again, this time instead, off the Views library, which is the first man you choose, the second menu. This is the Modifiers library search for for gun color and selected change. The foreground color property, toe color, white. The other way to other new modifier. Toe on element is by using that Swifty y inspector comment blasts click on the text and select the show. Safety. Why Inspector Menu item A new context. One l Real poor Pap said that text alignment to center then said there phoned Toby. Large title. Finally, choose heavy for their phones. Weighed. Next. Let's play Vin The headline again Command plus Click on the decks and select the show. Swift You I inspect or menu item choose Light for the phones weighed. The foreign scholars should be wide after that. Enter the phone color. After that. Enter. I'm telling our title section looks much better, however, we need to position it at the top of the card. Yet after the last Prentice's off the re stack and there, Wolf said, Why Minot's 218 as you see the title with the headline will be jumped immediately to the top. You have done a good job so far. The battle. We are going to create a unique button and place it at the bottom of the card. Start typing the following court in a new line below the title Bratton Action Print. Francis is next live next at the following more than fires to the text you front weighed heavy for grand color color, white accent, color, color white. We need to position the button at the bottom off the cards toe, so enter after the last parentheses off the bottom offset. Why 210? You may wonder why we choose these exact numbers for the title on the bottom. The answer is quite simple. By the fall, the X and Y coordinates are zero, and this is the center off the parent elements. So using plus number were positioned the child element upward than the negative number will position it downwards. Just a quick refinements after the learned string Enter a bad case. We are almost done with the car's design and they Yes, I've seen boys. If you have installed as have seen, boys Mac OS application provided by Apple than open it now. If you haven't started it yet, please go to the apple developer. Swear upside on. Downloaded right now in the search field at the toolbar. Enter arrow, baby receive does us off arrows as a search result. But we are interested in a specific one called right circle Arrow. Select the right circle arrow and under the edit Main menu item. Select the copy Name Action. Go back to the car you file Common plus click on the decks. You inside the button. Select the MBA Dean H. Stack in the context menu. This feel of wrap the text you in the horizontal container. As you see we are finally able toe. Other symbol after the text and, uh, image. Cease them. Name a row right circle below the image and they're they're following modifiers to formed formed Duyvil. Wait medium and excellent color color wide. After adding the symbol, we only need to create a background for the button in orderto pop up from the environment at the fourth budding toe the horizontal stack. Finally create the background with the fall of in Court by Grant Linear Grady Int Grady int create the End colors Grady int Reliable start point leading endpoint trailing. Resume the life preview and you will see that the design needs more refinements to look nice. What about rounded corners? Enter sleep shape Capsule. This is one of the prefer methods to create a nice who ran did battle design in Swift Do I . The very last thing which the card is missing is the drop shadow. Do you remember that we manually created a semi transparent and backcourt in the SS library before we need it right now. Just jump to the library and look at the exact name off the color color shadow in Van Word after the clip shape, modifier and shadow Color, color, color Shadow radios six x zero. Why three? This will make a custom shadow under our bottom. See you the difference. It's not bad, but I miss one more last thing. In my opinion, we need to add more horizontal space inside the Batam. So we leave the default vertical budding as it is and add a new custom horizontal budding with this value 24 points. Since we finished working on the car view for now, we can watch. How does it look in the life preview or even better, in the simulator? You have just finished the hardest part of this project and learned a ton off useful things . Congratulations. Yeah, 6. Repeating content effortlessly with ForEach: thing in this short lecture, we are going to repeat cards. Using the forage structure is 50. Why open the content? Use 50 WiFi. If you are developing on a computer with smaller screen size, then you can get more space by hiding the Project Navigator. In this case, go to the View menu at the menu bar, choose the navigators and simply click on the Height Navigator menu Item the next step ease . Select their card view and comment, plus click on it. It will show the context menu. Select the embed in age stack from it. This will put the card into a horizontal container. If our content wider than the screen, then we need a scroll of you, too. So then great a scroll you above the age stack. Then select the full age stack and move it into the scroll. View a handed deep. You can use keyboard shortcuts, towheaded courts as well. You can select column up and them by pressing the control plus shift plus up or them arose . Then move up or them the selected courts by pressing the command plus old plus left or right brackets. After that, we need to tell which kind off scroll view do we want by default? It's worth a car, however. We need a horizontal one in this time, and their horizontal shows indicators force the next that is the center the cards and said 20 points pacing between them. Finally, we had 20 points padding toe the age stack as well as we can see in the life preview. The card shows up in that center off the preview device. So far they work on the container. But how we can repeat the card itself many times. Actually, it's quite easy by using X coats Auto completion feature, Select the card view and us before by pressing the command key and clicking on it. Ah, contacts. Many of you be shown. Find a repeat action and selected. This will rub the card view in a forage function with less cold. Be expected, since we want to repeat our card six times, change their properties in the forage. That's all. Click on the life preview button at the right button off the preview window and see how easy was this challenge. You can scroll through all of that six cards in the preview window to the back in preview mode. What about to test the bottom right now, when we top on the button, nothing happens, Unfortunately, but previously we entered a print pattern was stopped. Function into the bottoms action. Therefore, we can test what's happening when I use their tops on the bottom. Firstly, stop the life preview than control plus click on the play button and you will see that a new contacts menu has a paired Select the the Back preview option. Immediately the back area. You'll be slide up. Try toe top on the button and you will see the battle of us stopped message, which is printed in the D Back area. Amazing job. You have learned not only have to repeat content but have to use that the back preview in this lecture as well. 7. Create a data model for the cards: create a data model for the cards. In this tutorial, we are going to create a data model for the cards. This card mothers purpose is to represent the actual data off the cards. Go to the final main menu. Choose new new file menu item in the next funner under the eyewear. Stop. Choose three fight type from the provided templates. Give this file Ah, card, mother name and save it by clicking on the create button X scored were open This find immediately replace the foundation framework betwixt why and imported. The next step is to place a common section for the card more than after that. We are going to create the actual murder using a sexual time. Enter strapped God identifiable your line. Create a variable called I D, which is on universally unique identifier. This variable we'll give our cars are unique. I d using this. I d They can differentiate and identify the cars from each other. Next, we are going toward a title headline. Ah, Fire name off the image. A court action tax off the Batam and an alert message. All of these bars are type off strings. Lastly, we need to declare on empty array off the Grady and colors off the guards. And that's our They managed to create, Ah, food at a structure for the card model. In the next lecture, we are going to deal with the actual data off the cards. 8. Let’s create an array of static data: let's create an array of static data in this tutorial of your work on. The better for the cards is that that contains all of the content off the cards in Van file For our sweet to I M. As usual, go to the file top menu. Choose new new file menu right them in the next banner under the eye us that choose swift fight type from the provided templates. Give this file a card that name and save it by clicking on the create button. X Code will open this file immediately. Hey, please, the foundation framework. It's 50 y and imported. The next step is to place a common section for the card that that's great. Ah, card data that a type with an array off cards, we are going to court manually. The first card, then reveal use our data file from the resource is for there and their card. Then wait a second after then the ex Corde Auto completion will show us a hint about the card structure. Choose the one starting with the title and press the enter key. As you see the court. Auto completion gave us all of the necessary where I a blows, so we don't need to remember them from the head. The title is swift. You I The headline is better abs less good. The name of the image Hyleas Developer number one. The call to action but on text, these design the alert messages introducing a modern way to design user in their faces for any apple devices. Lastly, but not least, the Grady and colors are color color of on color color, too. Finishing with all of that. You see that this is a long, long line, and it's quite hard to read it. That's why it's a good cording practice toe wrap. Each were liable for into a new line like this. Guide to headline image, name, Call to Action Message. And finally, the Grady and Colors. See our swift code is more digestible. Now it's time to speed up the process and use our data file from the resources for their go to the deck, stop and open the resources for the you real see another for their name that in it open its two. There is a card. The other simple text file. Open it with the text that it or up by clicking on the fire name twice. As you see, this is the whole cards content, including the 1st 1 as well. Now you need to select the text from the beginning. Off the second card alway done toe the last card. When you are done, copy the selected text to the clipboard and grows the file and the finder window. We don't need them anymore. Piece the text after the coma off the first card. Better. Congratulations. You have just created the card that for our swift do I up. 9. How to load static data in SwiftUI?: you have to load static data in Swiss, do I? It's getting more and more exciting because our next goal is to fetch de static data and display the different cards in this 50 y application. Just a quick preparation before we have to comment out the card view in the content you file because then we start to load the data into the card view it feel immediately break our existing court here you will see why later, enter a temporary text you after the commented card view. That's right for a while. So, Jim, back to the card view file. You can use the navigation menu in the editor window for this purpose in the Properties section, Let's create ah card. Why ever It's quite straightforward, I think. But it will break a preview immediately as an ex corde error message tell us there is a missing argument for our card. We can fix it by loading a card with the missing information from the car data, which we created in the reviews lecture and there God card data. And let's choose the second card. I want to demonstrate to you how awesome in the preview Converse will be automatically updated after we start to lower the actual data. Are you ready? Firstly, we are going to replace the hardcore that value off the image by fetching the card image as a source and the the picture changes immediately. We are no longer looking at a pretty develop burger, but a guy. We will continue these steps and replace all of the hard cord attacks in our card view file . The second replacement is the title Enter God title. The next one is the headline Enter Card headline. After that and there card call to action. Inside the button stacks and the next one replace that Grady and Colors and their guard, Grady and colors finally change their cards. Background color with dynamic colors. And they're the same court here. Card, Grady and Colors. As you see, the whole card was replaced from the first card toe, the 2nd 1 Since we don't need the study ingredient forever anymore, we can dilated without hesitation in the top property section. Do you want to play with the cards and make sure that all of the data can be load it, then go to the preview section and simply change the cards number from 0 to 5. It's quite easy, isn't it? Braving them for a while. It's obvious that we succeeded, and the card is changing all the time. Since our guard view works perfectly, it's time to work on the content you and load not only one, but all of the cards into our swifty. Why jumped with that content? You file, then make a new comments section and name it toe Properties. Let's create a cards viable, which is the type of God. Then load all of the cards data into this array. Again, we had to fix the preview because it doesn't know what to show up in the window. That's why we tell it to fetch the cards with the cars that are together. It will dismiss the missing argument Aero message promptly. Go to the for each loop and replace the fix range numbers to the dynamic number off cards. After that, delayed the temporary Next to you, a NCAA meant the card view and tell it to load the data into the card item one by bun, reload the preview window and start the life review mold to see all of the cards in the horizontal scroll view. It's quite impressive. So far. So long, Let's see, are up in the simulator or on your iPhone device. So let's build and ran it. After rebuilding our project, we can see that we have reached another huge My stone. This 50 y up gets better and better each time the accomplish a new lecture. It's time to add some juicy features to this up and make it more interesting. Are you reviewed me? 10. Let’s play a sound file with AVFoundation in SwiftUI: Let's play a sound file in Swift, do I? I think you really enjoy this lecture, because sounds can make ups to life and increase the over user engagement at the same time . It's always fun playing sounds and music in I Was Development and the same is true for Swifty. Why, if the Navigator planners are hidden, then goto their view in the menu bar and click on the shop. Now we got our menu under the Navigator's section. Navigate to deck, stop and open the resources for their You will see a sounds for their in it. Open it to the reason and be free fire called sound chime drag and drop it into the main learn by doing projects route for their I knew Option Window will be shown. Check on the copy items if needed, and the ads. Tatar gets check marks. Click on that finish Bratton. With their common plus and shortcut, we can create a new swift file, click on the next battle and give this file the following name. Place sounds. Finish the preparation by clicking the create button in orderto play a sound in IRAs development. We need to import a new Apple framework called Audio Video Foundation in a new line, import a foundation as many times before. The next step is to place a common section for the audio player. Then let's create on Audio Player Variable, which is an audio player. Type itself after that. If you need a new function funk place sound, it has got to perimeters. The first parameter is the sound name, and the 2nd 1 is the sound file format. Both of them are string Stieb. Next, inside this function we create a new war and check if we can assess the sound file in the roof. Order off the app. We will use the do try catch block off court for further error. Handling is swift. If he can't assess this sound fired because it doesn't exist or maybe the misspelled the name off it. Then we print out a straightforward our message in the D back area in case we can assess the sound file without any problem. Then we will try to create all the open a year and ask it to use the bath off the sound file in our app. This is why the use above you are l here as a barometer off the audio player. Our last task is quite easy. Reveal. Ask this player to play the given sound file. We have just finished working on this function, the beauty off this in this court that we can reuse it any times we want in our Swifty. Why application? Let's see how we can implement this function into the cards. Open the card view file and hide the navigators. Find a button action where we print out the bottom of us. That message. Here we are going toe called the place and function with the following parameters. The sounds name is sound chime, and if I diabetes and be free 54 months before we start the life review, we needs toe open the content. Few file. Click on the canvas round button in the preview window and click one off the battles inside the cards. Do you hear the friendly chimes sound? Let's launch the iPhone simulator or your real test device and play video it a bit undoubtably. The sounds makes our safety Why, At more impressive, it increases the user experience even better, in my opinion, 11. Introducing SwiftUI Animation in iOS Development: introducing Swift do I animation. Besides playing a sound file, there is another thing which quite cool, as I think this is the animation with 50. Why users un internationally pay attention to the moving parts off the user in their face because animations are eye catching for them. Let's play with 50. Why animation Shelvey Open the card view file. Our first step is to create a new private variable and name it toe Fade in which will be a bullion type with the force initial value. This fading property will store the state off the image animation. Right now it's force, meaning that the animation is interactive. We also use at ST to mark our property to mute table. You may ask why, because we want to start the animation on Lee when the up has already lunched and ready for the user in directions. The second step is through art the on their modifier to the main card container disease stack. Everything that we put inside the on appear for the fire were run on Lee after the APP has been launched. In our case, this is the targeted time to start the animation, so to start this animation, and they're the follow of In Courts With animation in the air and the injury ation, which is 1.2 seconds inside the apprentices. We are changing the state off the fading property by the toggle mattered. This means that from the inactive stayed, we changed it toe on active state, and we want to run the animation, all right, But what? We are going to any mate? We haven't defined it yet, and we need to choose our target object to animate. Go to the image view and at the following mother fire to it. Opacity fade in question mark 1.0 colon 0.0. Inside the opposite the modifier, we refer to the state off the fading property. The question mark means men is true. Then use 100% opacity and showed the image after the colons mean many it force. Then use zero person Oper City and hide the image. These settings. It will hide the image by default when the up is lunched, then review. Start the fading animation with 1.2 2nd duration. Let's build and run the up and watch or first animation with Swifty. Why did you see it, Let's restart again. The image off the developer quickly fade in when we launched the APP, Let's move on to the second animation event, the title. Toby, hidden by default and sliding from the top off the card, and we launched our application. This is on Gore. This time we are going to create another property toe. Watch the state off the title San Imation and there at ST Private War move downward property type off bullion and its initial while you ISS for us, goto the on a pair modifier off disease back again, since we want to use a shorter duration for a second animation, then we need to add another with animation property to it. Let's do this with animation in here. Jury Asian 018 After then inside this toggle the move the world state like this self moved downward. Togo. Here we are again. We need to choose that titles re stack and at the animation to it as a new modifier like rice, Wolf said. Why move down the world? Question Mark Miners 218 Colon's minus 300. The titles initial Y coordinate is minus 300 which means that the title is outside the cards boundaries and they can't see it in this case, the move downward property has a force while you. When the up launches this, they it becomes true and we change the value off the vie coordinate toe minus 218 inside the cars boundaries. Finally, the animation will last only 0.8 seconds, which is quite quick. Let's build on around the Did you see it? Let's restart the again. The title and the headline quickly slide in from the top When you launch the app, The last thing we want to animate is the cards battle. This animation will be the opposite. Off the titles animation reveal sliding the bottom from the outside off the car tow upward . We are going to create yet another property toe. Watch this state off the Butters animation and, uh, at stated private war move upward property type of bullion and its initial while you let the force goto that on a bear modifier off disease that class time since we want to use the same duration as the title San Imation, then we choose the second with animation property. Enter the full of in court to the property. Seven. Move aboard girl, then find the bottom section and change the offsets who are used like this offset. Why move upward Question mark two hundreds, then colons 300. The buttons Initial Y coordinate is 300 which means that the button is outside off the cars von trees and we can't see it. The move upward property has a force value to when the up lunch is the state becomes true and we change the value off the Y. Coordinate to 210 inside the cards. Bun trees. Lastly, adulation off the buttons. Animation will be the same for 0.8 seconds. Let's build and run the swift. Why up with all off its animation, you can test the app on the iPad simulator or real test devices as well. For example, I choose the iPad pro tablet, then build and run the APP again. This time, not only the image riel fading and the title with headline be quickly sliding from the top , but the bottom we'll be animated as well. When we launched the app, we can say that we brought our after life with these smooth movement since 50. Why which turned Toby is in so hard after all, Doesn't that look just amazing? Play a little bit with their cars on? They can note that reveal add even more exciting features to this up in the following lectures. 12. Let’s add a Haptic Feedback for the iOS 13 app: Let's add haptic feedback for the iris for tin. In this lecture, I am going toe introduce have to create back to you what have dicks are on the iPhone to simply put haptic feedback or so called haptics or haptic Touch is the use off touch feedback. Then you interact with your phone. Then you do feel things like steps, vibration and even pressing and releasing. Then you top an up icon or up feature and setting from your iPhone. Open the car view file. Let's create a new viable for our first haptic feedback, and they're far have take impact. It course you I impact feedback generator style heavy. By the way, this is a computer property, so when we call it, it will make heavy haptic feedback on the screen so the reserves can fill it with their fingers. Next, find the bottles action and enter the following court in a new line below. The place and function self have Take em backed impact a cured and that's it. These are haptics. In our case, we chose the heavy haptics, but there are many other have dicks ties beside it, such as soft, light, medium, rigid and of course, heavy. It's war to mention that in I, Wes for Tin we can create our own style as well. Lastly, Mary in mind that we can dust it on Lee on iPhone devices. I do. 13. How to show Alert window with SwiftUI in Xcode: how to show window in Swift You I in this lecture idea did you have to present on alert window with 50? Why, like other things in this tutorial, a serious presenting an alert requires us to add another at state property toe are card to you. This time its purpose is to track better. The alert is visible or not at this line off court to the properties section and the top off the car view file at ST Private War Show Alert Mul For us off course, the new Allah Tendo won't be reasonable by the four. It we will trigger it by tapping on the bottom. So go to the bettors Action and enter self show alert Toga. Now the real attach an alert modifier, toe or card after the on their modifier on alert must have a title, a message and at least one this Miss button. Enter the following court alert This presented show a Let Prentice's this gold will decide to present the alert or doesn't next enter inside it Alert inside it A title which is a tax to you. Guards died too. Message. This is a text you two and its value is guard message, and this means button. Choose that the force tied with attacks to you. Okay, run the project and see what you think. It's truly coming together. Now each card has a different alerts, title and message so you can play vit them in the simulator or on your real device. 14. Let’s create Stickers for the mobile app without coding: thing in this black church, we are going to create sticker packs. A sticker pack is a messaging extension that lets people share content with France the's messaging extensions over a fun, engaging way for us to express ourselves in the messages up conversation without typing or using EMOJIS. Without further ado, let's create our first thicker back without writing a single line off court. Firstly, opened the Project Navigator that select the main project on the sidebar. It must be highlighted, then at the very bottom of the project panel. Click on the plus button and add a new target toe are up. We have to choose a template in the new options in, though in the search, feared and their sticker and make sure that you choose the sticker back extension option. Then click on the next battle. The product name will be stickers. Click on the finish button. Activate the sticker Shame renamed the display name Toe Learn. By doing this will be the name off our sticker extension displayed in the Apple Messages application. You will see a new for their cord stickers in the Project Navigator on the left side, unfold the stickers, water and click on the Stickers Assets Library in the Assets library. Select the I message App Icon folder, which is empty currently the next that is to go to the deck stop and open this week. Do I up resource warders the last time we are going toe to toe our nepotistic or cycle than the sticker graphics? Open the sticker icons for their this time. If you're drag and drop the icons to its container, be ever off its size is because X court will only allow us to put the icons into the right container. I am sure that you will find this is a time consuming process as I do, too. You really see that there aren't only square but other rectangle. I close as well. Our very last task is to drop all of the pre designs thick a graphics on toe. It's right place. So select the empty sticker back folder in the Assets library. Go back to the Assets folder on the desktop and open the Stickers Images folder. Select all of the B and if ice in it, then drag and drop them into the sticker packs container. You might be interested in how to customize the appearance off the extension, make the inspector spinal visible and select the attributes inspector menu you can set. How many columns do we want for displaying our sticker graphics in the messages up? There are options for two freak or four columns. I find that free will be just suitable in our case and dress. We have just created a sticker back extension. It's time to test the stickers in a simulator or on a real device. Make sure that that that get is still the stickers and ran the AP since he chose to run the stickers. Therefore, X Scordia lunch the messages up instead of the regular app. I am sure that you know have to use the messages. You only need to find this thinkers extension icon the Swift logo in the capsule shape with the purpose Grady and background color. By clicking on the icon, it will activate the extension so you can send and receive these thinkers from Bonn Test user toe. Other test user. Well, you have fun playing with these thinkers in the messages up, just like myself. I do