SwiftUI 2: Learn How to Create a Mobile App Prototype in Xcode 12 | Robert Petras | Skillshare

SwiftUI 2: Learn How to Create a Mobile App Prototype in Xcode 12

Robert Petras, UI Design & App Development with SwiftUI

SwiftUI 2: Learn How to Create a Mobile App Prototype in Xcode 12

Robert Petras, UI Design & App Development with SwiftUI

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (2h 24m)
    • 1. Learn how to rapidly prototype an app with SwiftUI framework

      3:24
    • 2. Let’s set up the Touchdown iOS 14 project in Xcode 12

      18:45
    • 3. Let’s create a custom navigation bar with a logo

      14:28
    • 4. Let’s develop an adaptive slider with Page Tab View

      11:49
    • 5. Let’s develop a horizontal grid layout for the categories

      16:27
    • 6. Let’s create a vertical grid layout for the products

      13:26
    • 7. Let’s develop a horizontal grid layout for the brands

      7:04
    • 8. Let’s create a product detail view - Part 1

      13:44
    • 9. Let’s develop a product detail view - Part 2

      21:30
    • 10. Add logic to the app and improve the user experience

      23:32
  • --
  • 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.

26

Students

2

Projects

About This Class

1189fe4a.jpg

In this section, we are going to prototype an e-commerce application. The primary learning objectives of this tutorial are the following.

First of all, we will create two main screens for the storefront of the sports equipment shop. By doing that, we will practice rapid prototyping using the SwiftUI framework.

Since all design assets are already prepared for us, therefore, we can focus on creating the layout and filling up the application with some data.

But we don't stop by only practicing what we have learned in the previous sections. Because we will perfect our prototyping skills with some practical techniques such as:

  • How to store and use global properties in a dedicated file called: Constans.
  • Then we will learn how to create header and footer sections for the new horizontal grid.
  • And more importantly, how to replace simple bindings with the 'environment object' property wrapper and share properties through the whole app so we can save time and effort in the development process.

By finishing up this section, you will get all the necessary knowledge to prototype any application rapidly. 

If this is something you want to learn, then launch Xcode and start coding along with me.

463b1f5b.jpg

What is the main project of this class?

Learn app development by creating a functional iOS 14 e-commerce app prototype with SwiftUI 2.0 in Xcode 12 code editor.

SwiftUI 2.0 user interface framework offers new features, improved performance, and the power to do, even more, all while maintaining a stable API that makes it easy to bring your existing SwiftUI code forward into Xcode 12.

dae17a17.jpg

Who is this class for?

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

eab9bd24.jpg

What is the difficulty level of this class?

The difficulty level of this SwiftUI class: INTERMEDIATE LEVEL.

8ebd0fad.jpg

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 e-commerce mobile application:

  • How to set up Touchdown iOS 14 project in Xcode 12
  • How to create a custom navigation bar with a logo
  • How to develop an adaptive slider with Page Tab View
  • How to develop a horizontal grid layout for the categories 
  • How to create a vertical grid layout for the products
  • How to develop a horizontal grid layout for the brands
  • How to display multiple Views automatically with ForEach loop
  • How to use scroll view, horizontal view, vertical view containers
  • How to create a product detail view
  • How to add Icons to the App
  • How to use the improved Canvas and Previews in Xcode 12
  • How to add logic to the app and improve the user experience

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

There are only two technical requirements for this SwiftUI class:

  1. macOS Catalina or Big Sur operating system from Apple (free)
    https://www.apple.com/macos/catalina/

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


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

da0931cc.jpg

SWIFTUI 2.0

SwiftUI 2.0 is shipped with a brand new life cycle management API for apps built with SwiftUI let us write our entire app in SwiftUI and share even more code across all Apple platforms. It's providing faster performance, better diagnostics, and access to new controls.

0f6e9885.jpg

XCODE 12

With an all-new design that looks fresh and modern on macOS 11 Big Sur, Xcode 12 has many great improvements such as:

  • Streamlined and much faster code completion,

  • Customizable font sizes for the navigator,

  • New document tabs

  • Universal apps by default to support Mac with Apple Silicon, etc.

6844a27b.jpg

APP ICON AND IMAGE ASSETS

As you can know by now, this class provides you excellent image assets with high-quality custom app icons as always. This will give you a real-life experience of how an app developer works with a professional app designer together. I'm sure that you will enjoy the process and you will be glad by looking at the finished application.

FEATURED STUDENT PROJECT

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 2.0 which is a new 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 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 i... 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. Learn how to rapidly prototype an app with SwiftUI framework: Swift UI is a modern way to declare user interfaces for any absolute platform. Creating functional prototypes is faster than ever before in Xcode, editor, learning ever design and development. It apples native user interface free and burn and creating remarkable applications is a practical and engaging activity. We there, right, learning material and teacher. Hi, my name is rubber, the lead instructor of this class. I'm a professional iOS app developer and UI UX designer. In this class, you will create a prototype of an e-commerce application. You'll really see how effortless it is to get started prototyping in Apple's Xcode software. Who is this class for? This intermediate leather class is suitable for every aspiring EPA designers and developers who want to create amazing app prototypes from scratch. The skills you will pick up from this class can be used to create UI designs with similar functionality for iPhone devices. What is their class all about? This practical class is about completing free primary learning objectives. Swift UI framework. The first thing you'll learn is how to use the swift UI apples native user interface framework, rapid prototyping. The second thing you will acquire is creating a working prototype that you can share with their stakeholders and coworkers, custom UI development. Now third thing you'll achieve is learning how to develop custom user interface elements and organize each custom component in their file structure that we're you create in this class. By the end of this class UV or create a realistic e-commerce application that users can launch and use on their mobile devices. This mobile app provides some very cool features, such as accustomed navigation bar. We then animated logo and Medan detail view of their products, sleek animations and PSAP to UX feedback. After completing this hands-on project, you can use it as an ultimate portfolio project that you can show up in your job interview. Why should you take this class? Project-based learning approach? This class speaks learning programming concepts through a project based approach. It means that you learned everything you need to know by creating this application as your class project. Contextual learning. This class also heavily relies on contextual learning, which means that numerous EPA development concepts are introduced only then we need to use them hands-on development. Finally, this class is in jazz, going through boring programming concepts. But instead, we will focus on writing really Swift code in Xcode, apples official EPA development tool. By taking this class, you really improve your app design and development skills by creating this practical mobile application. Having said that, see you at that class. 2. Let’s set up the Touchdown iOS 14 project in Xcode 12: In this section, we are going to prototype an e-commerce application. The primary learning objectives of this tutorial are the following. First of all, EV I create two main screens for the storefront of their sports equipment shop. By doing that, we will practice rapid prototyping using their swift UI framework, since all design assets are already prepared for us, therefore, we can focus on creating the layout and filling up the application with some data. Matt Vedanta start by only practicing, but we have learned in the previous sections because you feel bad facts are prototyping skills with some practical techniques, such as How to Store and Use Global properties. We had dedicated file coiled constants. Then we will learn how to create header and footer sections or the new horizontal and more importantly, how to replace simple bindings, media environment object property of wrapper and share properties, prove their whole app so V can save time and effort in that development process. By finishing up this section, you will get all the necessary knowledge to prototype any application rapidly. This is something you want to learn, then launch Xcode and start coding along with me, setup. All right, first things first, opened the downloaded the Resources folder from this section. As usual, there are three additional folders and they're supplementary workbook document inside it. The names of these folders are quite self-explanatory. In my opinion, you will find the source code of the completed project in that green for the, it can help you when you are stuck and need some quick assistance in that being folder, you will find all the resource materials. Finally, we are going to place our new project in that blue folder, super. Now let's open the book document and take a brief look at the learning objectives. You can notice a very detailed list of topics we are going to cover in this tutorial Xcode. Splendid. The second step is to launch the latest Xcode editor, then create a new project in the new VM though, make sure that the iOS, that menu is selected at that tap, then choose the option from the available pre-made templates. Finally, click on the Next button to create that project configuration. Now, we need to configure this new iOS project for their product name, Antar touchdown. For that theme. If you already have an Apple Developer account, login in here allows you to build your app on a real device. If you don't have an absolute developer account, you can skip this part and test your app in the iOS simulator on your Mac organization identifier. We usually and our website address in reverse order. In my case, this is the com dot Swift UI master class. The bundle identifier is automatically combined from the project name and the organization identifier. Next, the interface must be swift UI. Then the lifecycle must be swift UI app. After that, makes sure that Swift UI is the selected language. And finally, leave the core data and the include test options unchecked. After all the necessary Settings, click on the Next button. And now we need to tell Xcode where we want to save the touchdown project on their computer. Please navigate to the mastodons folder as the destination. As I do now, click on that Create button and Xcode creates all files and folders for their project that we need to start developing this application. Resources. Icons, great, reveal started development by adding the high-quality pre-made resource files to it. Shall we first select the assets catalog in their project navigator panel. Then click on the app icon. In the middle panel, we can see an empty set of icons on the right part of the editor. Now, right click or control click on the icon grew as I show you. By doing this and you will contextual menu will show up, select the Show in Finder option from this menu. And Xcode will bring gas to their projects icons folder in Anu Finder window. Next, select the app icon set folder and open it. That is only a content JSON file in it. Now, navigate to the icon folder in the Resources folder, as I showed you, you will find that pre-made at icon in many different sizes. First, select and copy them to their clipboard. Next, we are going to add these set of icons to their project. Jam back to the empty app icon folder and paste everything from their clipboard into this place, you will be asked to replace the existing file. Obviously, click on that replace button and we are good to go. The app icon is done. I satisfies. Now, it's time to add the rest of the asset vice to their project. Go back to the Resources folder and switch from Icon view to ListView in their Finder window, if necessary, then select only that following folders, brand, category, color, helmet, logo, and player. After that, drag and drop these folders into their middle pane of the editor window as I showed you so far. So good. Now we are going to add a JSON files through their projects itself instead of the assets catalog. First, unfold the data folder, then drag and drop all JSON files into the project navigator pane. As I do. Man, I knew window pops up, select the copy items if needed, and the create folder references options. Before you click on the finish button, make sure that the tach them project is also selected as our target with all these prep for the are ready to start developing the project. But before we start coding the Via create all folders that we need in advance. Viewer like keeping our projects wise, organized and neat. That's said, select all JSON files and put them into a new group for older. As I show you, it's also a good practice to get familiar with all resource files before we start using them. It's especially true then the work for a company and other team members and over these ready-to-use phi's. So please do it Settings. Next we are going to make some changes in their settings. Select them in project on the sidebar. Then select also the touchdown target in the middle pane. After that, make sure that the landscape left and right options are unselected. This application works better in portrait mode, super. Now it's time to set up a new launch screen. First click on the info tab menu at that tab. This will show us the predefined app settings. The property list consists of key and value pairs, that is, but reveal modify here. Right now there is an empty launch screen dictionary. Click on that plus button, then select the image name property. As I show you. After that, enter the following value, logo, linear. Great. Now let's add a new background color for the launch screen as well. For d value, enter color that grant, nice, they knew lunch screen is then the last thing that we need to do is to change the appearance. At the last row on delis, click on the plus button as I do, and from the dropdown menu, select the appearance property, then enter the light value. We are following many popular e-commerce applications. They are periods is designed for only lite mode. It's quite a common practice. Thus, alright, if you want, we can test this launch screen, my building and running the project C, that is a football icon in the middle of the launch screen. It's a great start. What about the app icon? There it goes, touchdown folders. Now, John, back to Xcode and create some new groups for the upcoming lectures. First of all, select the touchdown app and the content view sweet fires, then create a new group or the selection Nimitz t2 at Super. After that, let's create the following new groups. View. Inside this view group adds two new groups that name their first group to home. Then the second van to detail. That's right. Now, let's create the rest of their groups. Create a new group called model. Then create another group called extension. And another one is called utility. Finally, we can reorganize these folders by dragging them in order as we like. Great job so far. But before we call it a day, reveal, do something new in this masterclass, Shelly Collin's stance. First, let's create a new swift file and add it to the utility group. Give it the name constant and save it. Now, we need to import a swift UI framework. We just created a new file for organizing our sphere, global constants. Our goal is to collect the apps essential data and resources such as colors, fonts, images, strings, you are As, and so on. Let's go over the kind of data we might want to create constants for that. Color. Layout. Ux, API, image, formed, string, misc, etcetera. We won't use each of them in this project, but these are the most common types that he can find in any real project. For example, move the cursor to their color section and enter the following code. Color, LAD, color, background, color. Color, color, background. Color, gray. Color equals calor, UIColor system gray for. As you can see, that is a constant which is referencing a color set in the asset catalog. The benefit of using a constant property instead of using the name of their colors sat in our project, every rare is when we want to replace that color with another one. In that case, we can do it by modifying only this constant property. And we don't need to search for and replace every place where we use the name of their colors at. The second constant is referring to our UI system colour. They get the same benefit just like previously. Last, we don't have to type its long property value every single time than the van to use it. The third benefit is quite evident since we gather these global properties into one place. Therefore, we can manage them with ease. I hope that you can understand why we created this file. For now. We are done here. My dont worry. Later on, we will add many new constants to this collection. Filter. All Okey-dokey, it's time to start coding and make something visible Chevy reveal a warm up by creating a simple footer section before we deep dive into their development in the following lectures. That's said, select the home group and create a new swift file in it. Give me the name Footer view and save it. Now let's add the following modifiers for the preview. Footer view. Preview layout, size that fits, background, color background. After that, embed the placeholder text into a new vertical stack container. This alignment center spacing then. Command and off the stack padding. After that, let's modify detects enter text. We offer the most cutting edge, comfortable, light-weight and durable football helmets in the market at affordable prices. Foreground color, gray, multiline text alignment, center. Next, let's add a new image below this text view image, logo, dash, linear rendering mode, template for grant color, gray. And finally, we are going to add a copyright section to eat as well. Text copyright option plus g. Enter your name here and as a new line, enter backslash n, then override reserved, formed. Footnote, font-weight, bold, foreground color, gray. Multiline text alignment, center. Layout, priority one. Layout, priority 0. Layout, priority to Super. Their footer section is ready to use. Now that's inserted into their content view and see it in action. Opened their content. You will find and enter new comment, mark dash, but hold on a sec and let me show you another new thing that can speed up your development scale. Code snippets untill. Now we enter the comment marks manually. We don't have to do that at all since Xcode provides us the code snippet feature that he can use from now on. Let me guide you how to create a simple code snippet in Xcode, right? First, select the R code that will be the content of this new snippet. After that right click or control click on this code, then select the Create code snippet option from the context menu. As I show you this action, we open the snippets library for us. As you can notice in the left sidebar, some predefined code snippets are already in the library, but we can create custom ones as well. In the snippet editor on their right side, enter their name of their new snippet, like this one, mark, comment or comment Mark as you wish, then we can skip the summary for now and add a new place order to their comments section. Enter open angle brackets, hash, placeholder, hash clause angle brackets. Now for it's completion, you can enter a value. Would you like to use most Cmd? I am entering their Cmd shortcut because the CMM shortcut is already used by an under steep net that I have created way before. It's really up to you. But to choose. After all of that, finally, we can click on the Edit button that will save the snippet into the library. By the way, if you click on that big blast button on the right toolbar, then you can always assess to the sleepers library, as you can see. Now, let's see how this new code snippet works shall be nearly the line that we have entered before and start typing the short cut off your choice, cmd. And while hearing aid goes a full comment mark with a placeholder that we can continue to enter our code. As you can see with this snippet, we can speed up our development and add as many Comment Maher as we wish with ease. Madani improvement, isn't it? To make this lecture two, and we just need to replace the placeholder text with their footer view component. Navigate to it and replace that x v discord footer view, adding horizontal. What a fantastic start BY not only setup detach Dam Project, that we learned two important things as well. The first one, why we need to collect and manage the global properties and constants in our collection. The second one, how to create and use code snippets in Xcode editor. I hope that you enjoyed this introductory and you are ready for the next lecture. Each lesson will be straight forward and dv are developed either a new feature or a new component for their project. So we'll build out this application step-by-step. Our main goal is to practice rapid prototyping and pick up some handy tools to improve our development work flow by having some fun. That's being said. See you at that glass. 3. Let’s create a custom navigation bar with a logo: In this class, we are going to create a custom navigation bar, the then animated logo in their center of it. Besides that, if you have learned how to support Apple devices that came with their knowledge and their screens. You know, there is a problem when we use the ignore safe area view modifier. The result of using the signal safe area could be that denote reveal, obscure our custom navbar, and that's not about vivant at all. The solution is to get a very specific safe area in sets of the FV And though, and use it as that o padding modifier. No matter how tall that top-down area, our app layout will be future-proof. So at the end of this lesson, we will have an animated nav bar that looks good on both the older and there isn't iPhones as well. All right, without further ado, let's launch Xcode and start coding custom nav bar. We start by creating a component for this custom navigation bar. Select the View groups Home folder as its destination, then create a new swift file. Give you their name, Navigation Bar view, and save it. After that, added these new modifiers to that review Navigation Bar view, preview layout, size that fits padding. We can start using our custom code snippet and add some comment box through this phase mains sections. These are the properties section, the body's section, and the preview section. Next replaced their placeholder text, which I knew horizontals lack container. Enter each stack, new comment, and off each stack. After that, let's create a new button inside this container, like this one. Button, action, label, image, name, magnifying glass, font, title for grant, color, black. You comment and off button. Then we need to continue with their new spacer after it, spacer super. Now, we will create the second button of this nav bar. On the right side, enter the following code. Button. Action, label, image, System name, card, formed, title, foreground, color, black. You comment and off button. It's almost done. I said almost because reveal emulate a cool feature that many e-commerce applications use VV Or create an indicator. It is circle shape and the red color above their car tie kwon. Do that first, we need to embed the image into our new container. As I show you command or right click on the image and select the embed in z stack option, z stack. After that, add a new shape to it. Enter circa. Feel. Color red, frame with 14, height, 14, alignment, center offset x 13, y minus then it's much better now, this red circle indicates a product on their card and it drives the user's attention to continue the checkout process and not forget about it. That's said the first part of the custom navbar is already done. Now, we will finish up by pleasing the touchdown logo in the center. Since logo consists of three parts and then animation, therefore, we choose to create a separate file for it and keep this code lean logo, select the home folder as our destination. And let's create a new swift. Do I file for the logo component, give it the name logo view and save it. Then added these new modifiers to that review, logo view, review layout, size that fits, padding. Great. First we need to replace the Hello world with their new horizontal container H stack, spacing for new comment and of H stack. Then we continue by adding the left and the right part of detached downward inside the stack. Enter text, touch, uppercase, formed Title, Free, font-weight, black, foreground color, black. Then add a new TextView to it as well. Tax down uppercase. Font, Title Free. Font-weight, black for grant color. Black. Finally, is the logo between these two views. Image, logo, dash, dark, resizable, scaled to fit. Frame with 40, hide, thirsty, alignment, center. Easy-peasy, isn't it? Animation. The logo is then that's why jump back to the navigation bar view and add to it. We start by adding another spacer. Spacer. Then is that the logo between these spacers like I do, logo view. Now, the fun part begins. We will add a sliding movement to this logo from the very top to down to its desired position. To do that, first, we need to create a new property that v is thought of this animation. Create a new boolean property before the body's action. At state. Private. Var is animated. Bool equals false. Then let's add a new ON appear modifier to their logo view. Logo view on appear. Perform. Our goal is to start the animation each time when their logo appears on the screen, enter. Good animation is out. Duration 0 No.5 is animated. Toggle. With this code, we switched their properties value from false to true. The only thing you need to do is define the actual type of animation event to see at these new modifiers to their logo view. Opacity is animated. Question mark one, colon 0, offset X is 0, Y is animated. Question mark 0, column minus 25. As you can notice, it's as simple movement and opposite the animation. Nothing fancy there. It's time to fire up the live preview in Xcode and see how this works in action. See, it works without any problem. Actually, you may tell me that it was too easy. And what's the point of this lesson? And you are right, but wait for a sec because this was just their prep work. Before I introduce something new, something beneficial for you. Mainly container. First, we need to open the content you'll file. Then we create a new container for this navigation bar and an additional component to develop in the upcoming lessons, embed their footer view into our new Vertica slack container. This spacing is 0. You comment and off the stack. Background. Color background ignores safe area. All edges. All these background will fill up the whole screen than there is enough content in it to see it in action. We need to add a new spacer before their footer temporarily. So let's do that. Space, sir. Can you see how these spacer searches ad they're container vertically. Now it's time to add the Navbar component to this view. Enter the following code. Navigation bar review. As you can notice, discuss them. Nav bar stretched out the main container horizontally. That's how to fill out the screen where we don't have enough content to do that. Now, let's separate the navigation you from the main content area. Chevy. Add these new modifiers to the navbar. Padding. Background. Color, white, shadow, color, color black. Opposite the 0.05 radius. Five x 0, y five. You can see the first problem on their preview. The background color of the status bar is not white at all. As we like to have to fix this issue, we need to do multiple things. First, let's embed that we stack into a new disease. As I showed you. Z stack, new comment. And though is, is that the gross safe area, all edges top with these disease stack will be the main content container from now. So we can switch from the e-commerce apps store front home view to that product detail view later on. But hold on a sec because previews on their canvas are not so accurate as REO device or on an Xcode simulator. That's why it's worth to start the live preview and test the app. As you can see, the Status Bar is invite now, but these code cause that's another problem that we have to fix now, the custom navbar is Thiele covered by the ugly notch add data. So how can we resolve this issue? You may ask some of you might think that the solution could be adding some padding to the top. And you are right about how tall the spending should be exactly. You know, denote choose size at that top, arise in each iPhone and who knows how wide and tall will be in the future? Wouldn't it be nice to get this information somehow from the operating system safe area in sets. And that is a specific formula that we can use. In this case, at these new modifiers to the nav bar, padding, horizontal 15, padding, bottom padding, top UI application shared within those. First safe area in sets. Top. In this code, we put their safe area in sets as their top adding value. And for those who've under, we go those information from the OS. You know, the operating system keeps watching whenever you visible app and behind the scene. It collects or Manages all sorts of information that we can use. In this specific case, we asked the iOS to tell us the value of their safe area in set. We use this as their top paddings value. See, from now, the navbar is always displayed below the notch, no matter how tall or long it is. And if we have an iPhone coming without the notch, then these layout will work without any problem as well. Please keep in mind that we need to start the live preview if we want to test the or build and run the application in a real device or even an Xcode simulator. That's said, let's launch and iPhone eight and iPhone 12 simulator and test our application on them side-by-side, Chevy. First, I start the touchdown app on an older device without a notch. It works without any glitches. But about testing the newest iPhone, and it works like a charm. We couldn't be happier, MR. Right. I hope that you have learned something new about when or why we need to ask the system for a piece of vital information and use it to solve an issue like our layout problem. Of course, we need to know how to assess any piece of useful information from the operating system. And guess what? This was. All that I wanted to share with you in this lesson. Are you eager to continue? Then, let's jump to the next video. 4. Let’s develop an adaptive slider with Page Tab View: In this tutorial, we are going to create an image slider, the desk Swift UI framework. If you have finished that, review sections in their cores, then I am pretty sure that you know how to develop this UI component or ready to load data from our local JSON file, we will create a new extension. And for creating an image slider maybe or use a page view. That's why we don't waste any time discussing by V, do things by developing this residual component rapidly. So let's get started shall be data model. First of all, fire up Xcode and opened up layers that JSON file from the data folder. As you can see, this is a very straightforward JSON file. We then ID and then image key value pairs. Now go to the top right corner of X code and add a new editor on there, right? As I do. After that, make sure that the first editor is the selected one. Great VV Or create but data model. Select them or their group from that project navigator as the destination. Then let's create a new swift file from the context menu, give it the name Player model, and save it. Now let's create a new track and map the J's and K's here, enter the following code. Struct player, Cordova, identifiable. Let, id, int, let, image, string, and period goes. We can close their model and their Judaism fires since we don't need them anymore. But we need to do now is to create a new band dual extension with AIG isn't decoder, JSON decoder, select the extension grouping that sidebar. And let's create a new swift file. Give you their name, called the Boule bandwidth extension and CV to its desired place. Nice. Here we need to create abandoned extension with a new function. And extension bandit funk, the code, the code awol underscore file return t. I am pretty confident that this code is familiar to you. Basically, we have just created a new decode function as few generic that conforms to the recordable protocol. It is called reveal, able to decode any local JSON file from the absolute bandwidth. Now, let's define each action step in this metal to do the job for us. New Comment. First step, locate that JSON file. Second step, create a property for that data. Third step. Create a decoder for step. Create a property for the decoded data. Fifth step. Return, they're ready to use that. Alright, it's time to translate all steps of this algorithm into real code in Swift Chevy. Step number one, guard that URL equals self URL for resource file with extension. Neil as fertile error. Fair to locate finally, unbundle slab number two. Guard. Let data equals try question mark data, contents of URL as fatale Iran. Fair to load file from Vandal. Step number three. Let decoder equals JSON decoder. Slab number four. Guard. Let decoded data equals try question mark. Decoder. The code T cells from that as fertile era. Fear to the code file from vandal. And finally, step number five. Return the coded data. Excellent job. Adjacent decoder is added to use inaction new constant. To do that, first, open the constant file from the utility group. Then let's declare a new constant called players and give you the following value data. Let players array of player equals bundle dot domain dot decode, player dot JSON C. We can use this new constant wherever revamped in our application. So let's do it right now. Featured item, select the home group has a destination and create a new swift file, giving it the name featured item view. And save it. After that at these new modifiers to that review, featured item view, preview layout, size, that feeds padding by Grant, color background. Okay, it's time to create the layout for a single image of the slider. Enter the following code. Please typeof layer. Now we need to fix the missing argument issue in that review. Let's add a property to it. Featured item View, player, players indexes 0. This code we allowed the first item from the player's array. After all these prep VR, we can replace the placeholder text with a new image. And image player dot image, resizable, scaled to fit. Coordinator reviews. Image slider. First thing first. Perfect the layout of the single image in the slide there is. Then we can finally create the image slider using the pH that view. Let's create a new swift file in their home group. Give you their name, featured tab view, and save it. Then add these new modifiers to that preview featured tab view. Preview device, iPhone 12, rho by Grant, color gray. Now, if it is there, place order texts with a new tab view as I do. Their view, new comment. And though tab, tab view style pitch their views Theil, index display mode. Always. Now, let's continue with adding a new loop inside this stack view for each players play. In. Finally, we need to insert a featured item as the actual content in this loop. Feature that item view. Player, player, padding, top ten, bad being horizontal, 15. Super. Because I started a life review and test how the speech that view works in action. As you can see on the canvas, we can slide the featured items. You can also notice that the indicators are positioned at the bottom of the screen. It's not a layout bug and it's totally okay. This lift UI framework needs to calculate the exact size of each view to render it correctly. And since there is nothing guys, they're just that tab view. Not every u r component works like this in the Swift UI framework, but that tab view is one of them. This is why they're framework expanded it Don't worry, it will be alright. In the end, you will see how this behavior works in a much constrained environment. Just jam back to their content view and insert this component into it. Final touches, navigate to their spacer and replace it with a new Scroll View. And scroll view. Particle shows indicators for us. Content, new comment and of scroll. The stack, spacing 0. New comment and off the stack. This Vertica container with the scroll view will be there content container of this storefront. That's why we need to move their footer inside the as I do. And last but not least, and that is code above the footer. Featured tab view, padding, vertical 20 or some. We are done with it. Now let's test this image slider. Alright, it works great without any layout problem. The indicators are in their right place and the images are loaded. It was a great practice, right? I hope that you enjoyed it. In the next lesson, we will learn something new and exciting about the new horizontal agreed layout. And I can't wait to see you in the class until then. Happy coding. 5. Let’s develop a horizontal grid layout for the categories : In this tutorial, we are going to create a new lazy horizontal greedily add what the product categories easy horizontal agreed, is similar to the H stack. It's lazy because if we have US scrolling of this Korean Swift UI, you're not load them unless it needs to show them on the screen. This increases the overall app's performance. What's interesting also is we can add a header and footer section inside a lazy age. That's said with some creativity, you can even rotate these specific sections, creating a unique look for this UI component. Moreover, McCann mean these header and footer sections as well. However, we want use this feature in this layout. By the end of this class, we will have a two row, lazy horizontal agreed layout with all product categories. Categories. Alright, before anything else, let's fire up Xcode and open their category JSON file Chevy. As you can see, these, the JSON file consists of three types of key value pairs. That first key is an id, the second one is their categories name, and the last one is the image name. Nothing complicated there. Now go to the top right corner and add a new editor on there, right? As I do. After that, make sure that their first editor is the selected one. Nice EVA or create the data Medan for that product category. Celac, the more dire group from their project navigator as the destination. Then let's create a new swift file from the context menu and give it the name, category and modelling, and save it. Now let's create a new track and start modelling that JSON keys here. And that the following code, category called Diva, identifiable. That ID, that name, string, that image, string, grid are Category model is ready to use. We can close the model and the Jainism fires since we don't need them in this lesson. New constants, but we need to do now is to create a new constant and that constant file and add a new property in the data section. Enter data, lead categories. Array of category equals Vandal dot domain, dot D chord, category dot JSON. You may notice that we use that Bleuler form of the word category. This indicates that there is some data in an array. Next, since VEVO create multiple greedily ads for many components in the upcoming classes, therefore, we can use a layout constant to help us make it easy. Navigate to the layout section and enter the following code. Layout. Let column spacing CGFloat equals, then that row spacing CGFloat equals. Dan, var, GridLayout, array of grid item. Returned array will be eating Grid Item. Flexible spacing, row spacing, count to the first two constants are self-explanatory, in my opinion. However, the greedily out is quite a complex computed property. You might even notice that it is not a constant property. And you are right. The reason behind that, we cannot use that constant for computed properties. That's why we had to use a variable with a mutable value here. These grid layout will have us creating any two column vertical or any two row horizontal containers. You VOC later on how useful it is. Splendid. Now let's start developing an individual element of the lazy horizontal grid shall be Category Item. First of all, select their home group has a destination and create a new swift file, the name category item view, and save it. After that added these new modifiers to review category item view, preview layout, size that fits, padding. By grand, color, background. Super. It's time to create a new property for their category. Enter latter category category. Now we need to fix them missing argument issue in depth review. Simply add their category property to it. Category Item view. Category. Categories is 0 index. This code, we are lowered their first item from their categories array. After all these Bradford, we can replace the placeholder text be the new button. And that they're following Code. Button, action, Labor, Tax button, new comment and off button. This category button will have image and text views inside it. That's why we need to embed. It acts through you into a new horizontal container. Enter Age stack alignment, center, spacing six. So far, so good. Now let's add a new image before the tax. Enter. Image, category dot image, rendering mode, template, resizable, scaled to fit. Frame with first the height, 40, alignment, center, foreground color, gray. Nice. Let's continue with modifying that acts through tax. Category dot name. Dot uppercase, font weight, light, foreground color, gray. Finally, we can make this UI elements with flexible by adding a spacer too it enter spacer. See, we are almost done here. To finish up creating this component, we need to add some backgrounds and thus through OK to it. So let's do it right now. New comment and off each stack, padding, background, color dot, white dot coordinate radios 12. Grant. Rounded rectangle. Co-ordinate radios, 12, stroke, color, grey line with one. It's ready to use super-duper. Lazy horizontal grid. Now, we will create a new swift file in their home group, give it the name category, grid view and save it. Then add these new modifiers to their preview. Category agreed review, review layout, size that fits. Padding. The grand calorie background. After that, replace the placeholder text view with the annual scroll view and new lazy HE created. Enter. Scroll view. Horizontal shows indicators, force, content, new comment. And of scroll. Lazy, age grid, rows, GridLayout, alignment, center, spacing, column spacing, pinned views, empty array, new comment, and off grid. Frame height, 140, padding horizontal, 15, padding vertical. Then this code creates a two row, lazy horizontal agreed layout. But is worth to mention there, is there a fixed height? Since lazy age grade are pushed out views vertically, therefore, a vertical alignment or some fixed size constraints is useful. Great, now let's replace that placeholder text views with our foreach loop. And for each categories, category in category item view, category, category. See that preview the refreshed with our new lazy grid layout. It's time to start the live preview and see it in action. Scroll to the end of the content and back to the beginning of it. It works like a charm. But would you like to make it more interesting? We can do that by adding a header and footer section two, this component, header and footer. First click on the name of their foreach loop, then select the embed option from there contextual menu. As I show you this field wrap that loop into a new place holder container. Now replace it with the following code. Section. Header tags, header, footer, tags, Footer. Nice. We can test it in the live preview window. The newly added header and footer work nicely with the lazy greed component. That is one thing that bothers me. They are quite boring Iran today. To make them really cool, we need to create a custom template for both the header and footer sections. Guys, Tom section. As usual, celebrate their home group. And let's create a new swift file in it. Give you the name section view, and save it. After that. Add these new modifiers to that review. Section view, preview Willie out, fixed width, 120, height, 240, padding by grand calorie background. Okay, our next thing to do is to embed the text into annual Vertica container. These stack spacing is 0. You comment. And of these black background, color, gray, coordinate radios, valve frame with 85. As you can see, the added affixed VDD to this container. And that's why the content is read into multiple lines. But don't worry too much about it since we will rotate the text view that is soon enter this code. Tax categories, uppercase, font, footnote, font-weight, bold, foreground, color, vide, rotation effect, angle degrees minus 90. It still needs some modification to make it work at two spacers into their Vertica container. Spacer. Spacer. This code helps to expand their container vertically. We are almost done. Our end goal is to rotate the tags in their footer section in the opposite direction. To do that, make this componentry was able to create a new property or this feature. Enter at state var, rotate clockwise. Bool. This new property, we restored the direction of their rotate effect. Of course, we need to add these to the preview section view. Rotate clockwise, force. Now let's modify their rotation effect. Rotation effect, angle degrees, rotate clockwise. Question mark 90, column minus 90. So the simplest way to test fate is to change their property value in-depth review from false to true, as I showed you. It couldn't be easier, isn't it? But let's see how this works after integrating it into the agreed component. New sections. And jam back to their category agreed view file. And let's wrap dissection into multiple lines as I do. After that. Replace the headers lags B, then you section component, header, section view, rotate clockwise, falls. Then let's continue. Vdi footers content as well. Footer, section view, rotate clockwise, true. And Ta-da. There it goes. Then you custom header and footer without any dab, it's much better now. But do you think about it? Do you like it? I hope so. To finish up this lesson, We need to open their content you vile and added a category component to their storefront. Navigate to the end of the featured tab view and enter category GridView. See, it's that easy. Now we can test the application and this new category component, either in the live preview, in their simulator or on a real device. I hope that I can teach you something new today. And you enjoyed this lesson. As you can see, we are building up these step-by-step brick by brick. In the next class, we will create a Vertica agreed layout for the products. It will be so cool that I can't wait to show you. And they are dan, happy coding. 6. Let’s create a vertical grid layout for the products: In this tutorial PV or create a new Vertica agreed layout and show products in front of the e-commerce application. As you can see in this preview below the categories section, that is a two column grid with all helmets. Each product has its own unique background color, photo at title and their price. By finishing this lesson are touchdown will look more like a real e-commerce app. All right, without further ado, let's launch Xcode and start coding title component. Before we start developing the individual product item, we need to create a reusable title component. Select the home group folder, and let's create a new list UI file. Give it the name, title view, and save it into this group. After that, let's add they're following modifiers to that. Review. Enter, title, view, preview, layout, size, that fits my grand color background. Good aid. Start. Now we've modified the placeholder tax, tax helmet, font, large title, font, weight, heavy. The style of their title is okay, but we need to make it flexible so we can align it always on the left side inside its outer container. That's why we need to remember that text into Anu horizontal container. Age stack. You comment. And off each stack. Adding horizontal bedding, top 15, padding, bottom ten. Now let's add a new spacer into this container and make these component flexible horizontally. Spacer. Or read, the layout is done. Now it's time to create a property for their content of this title. Enter the following code, var title, string. After that, we need to add this property with some sampler content in depth review, title, view, title. But the last thing to do is to replace less static content when this property in their body. So let's do it right now. Tax title, and there you'd goes, the finished title component. Now let's implement it into their storefront shall be opened their content you will file and add a new header title, meeting their category grid view and their food or view. Enter title view. Title. Helmets. Refract. Nothing can stop us from continuing their product, great. Product data model. To do that first, we need to create a new data model for all products. Open their product that JSON file and take a brief look at its content. As you can see, the object has six key value pairs inside each instance. A Product ID, product name, a product image, a price, a description, and finally, an array for the RGB colour. As many times before, we will add a new editor to Xcode's window on the right. Then make their first been active before we create a dedicated file for the data model. Now select the Medina group and create a new swift file. Give it the name product model, and save it. It's time to map the keys of their product that JSON file. First, let's create a new abstract for the data model into the following code. Product, codifiable, identifiable, then added these new constants to it. Let id int, last, name, string, let image, string, let price int, let description, string. Let color, array of double. That's okay so far, however, we will need to make some modifications to use it more efficiently later on, more to come about it soon. Products constant. Now we need to create a new constant for their products. Open their constant file and add this code after their categories. That products, array of products and coils bundle dot domain, dot decode. Product j isn't super. I am sure you can appreciate how easy it was through the code. A little carriages on file with our extension product item. Select the home group and let's create a new swift UI file for the individual product item. Give it the name product item view, and save it. After Dan that's added these new modifiers to that review. Product item view, preview layout, fixed with 200, height, 300, padding, a grant, calorie background. Splendid. We can create a new property for their product and use it in the layout and lead product. Product. Of course, we need to tell the app review that data to work with and show us on that canvas. Let's modify it as well. Product item View, product, products index is 0. There is no mystery. We'll show us only their first product from that JSON file. It's time to create the actual design and layout for this component. First, we are replacing the placeholder text be the new Vertica container. Enter the stack. Alignment. Leading. Spacing seeks content. You comment, photo, your comment name, new command, price, you comment. And of these stack. Now VEVO start working on that products. Watteau Chevy z stack. Image. For that image, resizable, scared to fit. Padding, ten. New comment and of z stack, a grant color, red, product dot color 0 index, green, product dot color. First index, blue, product dot color. Second index, coordinate radios, valve. As you can see, the detached the background color from the product photo is have there isn't behind that. We van to animate only that picture without the background. Now let's continue with their product name and tax product dot name, Font, title, free font, weight, black. After that at that price as well. Tax. Dollar sign, backslash, product, price. Font-weight, semi bold. Foreground color, gray. Easy-peasy. Making good-looking at prototypes with Swift UI, isn't that hard at all? That's what we all can agree with. In my opinion, the layout and the design is already done. However, we can improve their code here and there. You know, I found it quite cumbersome to enter each RGB value of the background color. A second thing that we can change for the better is the price of the product. We can improve all these areas by modifying the data model. That's said, John back to their product model file. And let's add some new computed properties to it. And var red, double, return color 0. Var green, dabble, return color, one. Var, blue, double, return, color to VAR, formatted price. String, return, dollar sign, backslash. Rice. As you can see, these new computed properties simplify things. To see them in action, we need to change the component and add them to it. John back to the background color in their product item view file and replace the old values with their new computed was, as I show you, read, product dot red, green, product dot green, blue, product Dot Blue. After that, let's modify their price as well and tax product dot formatted price. Our code is much better now, just a side note, if you are a beginner developer, overtime UV again, such experience in app development that you via later reading how you can improve your code before hand, lead that you want, need to spend reassures time to refactor your code. Okay, enough feed that. Ok, let's finish up this lesson by creating a new grep for all products on their home screen Chevy products. First, we need to open their content view file and add a new lazy Vertica agreed after the title, enter the following code. Lazy V grid columns, GridLayout, spacing 15 content. After that, we will add a new for-each loop by VI, replacing their placeholder values for each products. Product, in product item View, product, product. New command and of Lou. You comment and off grid. Finally, let's add a padding to the agreed delay out, padding 15. And guess what? Our goal for this lesson is already accomplished. We just need to start the live preview and see how these new Arctic and agreed component works in action play. We did a little bit by scrolling down and app. As you can see, the Home screen is full of all football helmets. Is in that impressive how effortless was to create this feature. I think that we are all blessed by working with Swift UI framework. We did have development is more delightful activity by the survey. In the next lesson, we will have more fun while we are developing a new section for the sport equipment brands. The home view, we'll be well rounded and fully developed in all aspects. That's being said. See you at that class. 7. Let’s develop a horizontal grid layout for the brands: In this lesson, we will create a new section for the sport equipment brands, the last one on the home screen. This exercise should be short and sweet, since you are already know how to create a lazy horizontal grid layout with their swift UI framework. That said, let's get started by opening the Xcode editor, shall be that our model. First of all, we need to create a new data model for all brands. Opened abandon JSON file and take a quick look at its content. As you can see, the object has only two key value pairs inside each instance, a brand id, and then image name for their logo. I am pretty sure that you know that by now, we need to add a new editor pane on the right. So let's do it. After that. Make their left editor active. Now, select them more than a guru and create a new swift file. Give you their name, brand, model, and save it. It's time to create a new struct for the data Medan and map that JSON keys. And the following code. Subtract brand, quote able, identifiable, lab, ID, int. Let, image, string. Nice, the brand value type is ready to use. That, said, open their constant file and let's create a new constant at the end of the data section. And let brands array of brand equals bundle dot domain, dot, decode, brand dot JSON. So far, so good. But end item, it's time to develop a new component or the brand item. Select their home group as our new fire destination. And let's create a Swift UI file. Give you their name, brand item view, and save it. Okay, first things first, we will create a new brand property and land brand, brand. Then we need to add this property to that review with some additional modifiers. Brand item View, brand, brands is 0 index, preview layout, size that fits by adding back ground, color, background, grade, all SSLD prep for Turkey's than Soviet can Delia that design, replace that placeholder text field, a new image and that they're following CT image, brand dot image, resizable, scared to fit, padding free, a grand color dot, white, corner radius, the valve back grand. Randy drawRectangle. Coronary, the US 12 stroke, color, dotted gray, line width, one. There is nothing complicated here, so we can use it in our lazy horizontal grid brand grid view. To do that, we need to create a new component. Select the home group in their project navigator pane, and let's make a new Swift UI file. Give you their name, brand greedy view, and save it. Here, the are going to add Samuel modifiers to that review. Enter, brand, create, view, preview layout, size that fits their grand color background. Now we need to replace the hello vertex B. Then you'll scroll view. Scroll view, horizontal shows indicator's false content, new comment, and off scroll. After that, let's add a new lazy grid into the scroll view. Lazy age, could it rose? Gridlayout, spacing columns, spacing, content, comment, and off grid, frame height 200, padding, 15. As you may notice, how greatly at constant Airbus prototype, any greed based components through the whole project is in that cool, is it? We can now replace the dummy text views with their new for-each loop, which will fill up this container with all imaginary brand logos. Enter 4H brands, brand in, brand item View, brand, brand. And there it goes. To test this new component, please start the Life Review on that canvas. As I show you, scroll the horizontal agreed to the end of their content and back to the beggining. It works as it should do. The only thing that we need to do in this rapid fire episode is to add this brand component to the home screen. Finer touches that's set up and their content TO file and navigate to their cursor between their Vertica agreed and the footer view. As I do. Then let's create a new title and add the following code. Title, view, title. Brands. Last but not least, at their new brand component. After this header, enter grand GridView. Splendid. To test how this works, we need to scroll down to the brand section. As you can see, we can scroll their component horizontally without any glitches. How amazing is that? I hope that you enjoyed this quick and sweet exercise. In the following lessons, we will develop a detailed view of the individual product and much more. Until then, happy coding and see you at the class. 8. Let’s create a product detail view - Part 1: In this lesson, we will start developing their detail view component for their product. Our main goal is to create the upper part of the detailed view. This upper part consists of pre separated views, a custom navigation bar, header component, i, product price, and our product image. By the end of this class, this detailed view, we'll be in good shape. All right, without further ado, open Xcode and start coding along with me. First snowfall, open their constant file and let's create a new property. And that they're following chord. That sample product, product, product 0 index. As you can notice, we have just created assembly product and this is their first product from that JSON file. The reason behind that is that we don't need any connection between their home view and the detail view. At this stage of rapid prototyping, we will deal with these information sharing later on. This approach, simply wj's are over and we can focus on designing the layout. Great. Now we can create that product a detail view file. Detail view. To do that, select the APK group from the project navigator pane as the destination. Then let's create a new swift UI file, give it the name product detail view, and save it. After that, we need to add some modifiers to that review and product detail view preview Lee at 50x did 375 hide 800 valve? As you can notice, we decided to use a fixed size review window without the device basil. Now we need to replace that placeholder tax return you vertical slack container. And that they're following caught these alignment, leading, spacing. Five, content. You comment and off the stack. Inside this container reveal the Eclair or sections that we need to add to this component. These comments, new comment, navbar, new comment header, New Comment detail, top part. New comment Detail, button part. New comment, ratings, class sizes. You comment, description. New Comment, quantity, plus favorite. New comment Add to Cart. Now we need to add some new views to it temporarily. And header. Text, sample product, dot name, Add to Cart, spacer. So far, so good. Our goal with this was to push up the content that create very soon. Before that, we can set that tone of this design by adding some important modifiers to the outer container. And he ignores safe area. All edges, all the grant color. Red. Sample product dot red, green, sample product dot green, blue, sample product Dot Blue. Now let's wrap the RGB values and add a new modifier to this color. Then enter discord. Ignores safe area, all edges, all super. The background color expands the whole screen vertically. However, to make this design for a screen, we need to create a custom navigation bar. Custom navbar. That's sad. Select that ETL group from the project navigator and let's create a new swift file. Give it the name, navigation bar, detail view, and save it. First, we need to add some modifiers to WVU and navigation bar detail view. Leave you layout, size that fits, padding by Grant, color, gray. After that, replace that acts through with their new horizontal slack container H stack, new comment, and off each stack. Now we will add a new button to it. Baton, action, labor, image, System name, chevron, left. Font, title for grant color, vite. Then we need to have a new spacer as well, spacer. And finally, let's add another button on the right side. Button. Action, labor, image, System name, card, font, title for grant color, right? For some, the custom navigation bar is ready to use. John back to their product detail view and insert this new component. Enter navigation bar detail view. That being horizontal. Padding. Top UI application, shared dot windows dot first, safe area is sets, not top grade. As you can notice, we use less safe area is sets as the value of that top padding header. Xlab is to create a new header component for the header section. Select that ETL group and let's make a new Swift UI file. Give it the name header, detail view, and save it. Now we need to add some new modifiers to that review. Header detail view, preview, early. Size that fits. Padding may grant color dot gray. After this Bradford, if you replace, it acts theo with their new vertical slab container. The stack alignment, leading, spacing, six, Content, tax protective gear. You comment and of the stack. Foreground color, right? Tax. Sample product, dot name, Font, large, title, font-weight, black. Now we need to insert this component into the detail view. Jam back to the header section and replace the temporary tax 3D ID header, the TableView. Adding horizontal. As you can notice, using the sample product constant, the development is speedy. The last component that we need to create is their product price with their product image. Top part. As many times in this lesson, we need to create a new swift file in that detail group. Give it the name top part detail view and save it. Then add these new modifiers to their preview. Top part, detail view, preview layout, size that fits. Padding. After that, we replace that text view with their new horizontal container. Each stack alignment, center spacing seeks content. You command price, you comment, photo, new comment, and off H stack. As you can see, we VRBO dab this component with two views. Let's start with their price tag. Enter the following quote. These stack alignment, leading, spacing, Six, content, text, price, font-weight, semi boiled. Then let's continue. Vdb formatted price. Tags, sample product dot, formatted price, font, large, title, font-weight, black. If you find that the abbreviated font-style is not enough and you don't want to use an exact size, then the scale effect comes to rescue you. And scale effect 1.35 and core leading. See the font is really huge now. Now it's time to work on that product image. First, we need to separate that two elements from each other with a new spacer. And this spacer, it will make this component flexible horizontally as well. After that, let's create a new image view for that product photo. Image, sample product, not image, resizable. Scared to fit. David And the height of this image via, via different, depending on the device sizes. We could call it a day Matt we want because we want to add some motion animation to this component to store and mutate the animations state, we need to create a new property. Enter the following code. At state. Private. Var is animating bool equals force. Then we need to add a new or appear modifier to the horizontal container on a pair. Therefore. And the mission is out. Duration 0.75 is animating dot. Toggle video of that. Now, the last thing here is to define what kind of motion animation. If we'd like to run each time, then the elements of this component appear on the screen. We started their price tag at this new modifier to it as I do offset, why is animating question mark? Minus 50, column, minus 75. X1 is the product image. Add these two it offset. Why is animating? Question mark is 0 column minus 35. Since we are done here, therefore, we can test this motion animation in the live preview. And here it goes. Before we finish up developing their top part of the detail view, we need to insert this component, jam back to their product detail file and add that o part, which section is speculatively and top part a detail view, padding, horizontal. Now, as always, we need to test it in the Life Review. Chevy. That's it. The design and the whole layout with their Snapdeal motion animation work like a charm. It's a good start before we start developing the more complex button part of their product detail view. What do you think about these designs so far? I hope you like it and you are eager to continue developing this detailed view in the next tutorial. Until then, happy coding. 9. Let’s develop a product detail view - Part 2: In this lesson, we will finish up developing their bottom part of the product detail view. As you can see on that MOV, DO this part causes of multiple components. And some of them make this layout quite complicated, but makes this design fresh and unconventional is divide background with a rounded coordinates only on that up. That's said we will learn how to create these reusable custom shape using UI Bayesian path. Beside this new UI design, we create many other components for the e-commerce application. By the end of this class, the product detail view will be ready to connect with the home view. So without wasting any time, let's launch the Xcode editor and start typing. First of all, we need to create a new vertical stack container for the bottom part. Navigate to this section and enter the following code. Detail. Bottom part. These back alignment, center, spacing and 0 content. Then move up their comments and SB Server view into this Vertica container. As I show you, you can select multiple lines by pressing the Control Shift case via tapping on the down arrow key. Then by pressing the option command glass left curly bracket keys, you can move up this chunk of code with these. Great. Now let's add some content for this view. Shall we enter this code in the description description? Scroll View. Vertical shows the indicators for us. Content, tax, sample product description. Font, system, body design, rounded, foreground color, gray, multiline text alignment, leading, new comment and of scroll. Since iPhones came via different screen sizes, therefore, we must embed this multi-line text into annual scroll view. After that, add these new modifiers to the VCE stack, new comment, and off the stack bedding, horizontal. But Grant color dot wide. As you can see, that the axe is more eligible now, but there is room for improving these containers look. And that's what we are going to do right now. Cass thumb shape. Select the utility group from the left sidebar. And let's create a new swift UI file. Give it the name, custom shape, and save it. Then add these new modifiers through that review. Custom shape. Individually out peaks with 428120 padding. Alright, now we need to transform this view into a new shape and strapped custom shape shape. Then we replace the whole body part with our new function. And that they're following code. Funk, path in racked CG react returns, barf. We are returned a specific part for us so we can create our custom shape than ever we want. The base of this custom path is a rectangle. Now that there is the fact that our act anger has many values and dimensions we are only interested in here is its corner radius. That's being said, let's create a new path property for that. And that equals UI, Bayesian path. Rounded react, react by rounding corners. New array, top left, top right, coordinator radii, CG size with 35. Hide 35. Then enter this one. Return path, path dot cgi path. In a nutshell, this code creates curved line segments on that top left and the top right corner. To achieve this, we have to use the UI Bayesian path class. Basically, we use this class to specify initially just that geometry for a custom path. Later on, we can use it as a blueprint to render our custom view. But worth mentioning here is their CG size. This structure contains both width and height values, at least might not last. We must return this path at the end of the function. By dv. We only created a custom path only at that top corners and didn't detach the bottom part of this shape. The height of their shape could be set either fixed, size or flexible, but ever revamped. I hope my explanation was clear enough to move on and see how to use this custom shape in action. That's sad. And John back to their product detail view and grab the color background into our new line, as I showed you. Then add a new clip shaped modifier to this color. Color, dot, wide, cleaver shape, custom shape. As you can notice on their Canvas review, we just set a new clipping shaped using their custom shape. We created a momentum before. The next thing that we need to do now is to offset this background by adding some negative TO padding to it. This modifier to their background color, padding, top negative 105. And while this code works, however, now we need to set the proper order of these views using the Z index modifier. First navigate to the very end of desi stack and enter z index 0. Next, add these to the atop a detail view to top bar detail view Z index one. These higher z index value will move this part above others. We can test how this works by starting the live preview as well. Can you see how these unconventional design improves the overall look and feel of these e-commerce application. I bet you do. Now it's time to move on and make some additional components to this view. Ratings and sizes. Next, we will create a new component for the buyers ratings and the product sizes. Cell Baghdad ETA group from the left. And let's make a new Swift UI file. Give it the name, ratings, sizes, detail view, and save it. After that, added these new modifiers to that review. Ratings, sizes, detail view, preview, size that fits bedding. Since we won't develop full fledged features for these components. And we decided to keep them together for the sake of rapid prototyping. That said, let's continue with replacing their placeholder text. But then you horizontal stack container, Enter each stack. Alignment. Top. Spacing, free content, new comment, ratings, spacer, New Comment sizes, you comment. And of each stack. This code, we create a database of their new segments. First of all, we start with their bios ratings Chevy. Enter the following code. Ratings. The stack. Alignment, leading, spacing, free content, tags, ratings, font, footnote, font-weight, semi boiled for grant color, color. Agree. Then let's add the stars to it immediately. H, stack, alignment, center, spacing, pre, content for each i from one to five. Id, backslash, self, item. In button, action, label. Image, sees them name. Star dot frame with 28, height, 28, background, color, gray dot, coordinate radius, five, foreground color, right? This micro component is then. Now let's create their products sizes on the right side. Scroll down if you need it and enter sizes. These stack alignment, trailing, spacing, free content, text sizes, font, footnote, font-weight, semi boiled for grant colour. Colour, gray. So far, so good. But before we continue, I noticed something wrong. We need to change the foreground color from gray to colour. Agree at their ratings header, as I showed you for grant, color, color grey. It's much better now, sodium for my mistake. Next, to speed up the rest of the development, we need to display all available sizes dynamically. That's why we will create a new locale constant, add a new property. Land sizes array of string equals X S, S, M, L x L. After that, navigate back to their sizes and let's enter this long chord. Each stack alignment, center, spacing, five content for each sizes. Id, backslash, self, size, in button, action, label, text, size, font, footnote, font-weight, black. Foreground color, color gray. Prim with 28. Height, 28. My grand color dot y dot coordinate radius, five. Meg grand branded rectangle, coordinate radius five, stroke, color gray line of it too. I think discord is self-explanatory and you understand every line of it by now. So I won't waste our precious time discussing it. By finishing up this prototype, we can add to this section to that detail view. Jam back to their product detail file. And let's add these two it. Ratings, sizes, detail view, padding, top minus 25, padding, bottom, ten. With this minor adding adjustment, this layout is improved alot super. Now let's continue our work. Quantity and favorite. First, we need to create a new swift file in that detail group. Give it the name, quantity, favorite detail view, and save it. Then let's add a death following modifiers to that review. Quantity, favorite detail view, the view Lee ad size that fits padding. Now we will create a new counter property. Enter this code at state private, var counter int equals 0. After that, we are going to replace that placeholder text. Then you horizontal slack container. Let's do it. H slack, alignment, center, spacing seeks content, text, placeholder, new comment, and of each stack, font sees them. Title, design around it. For grant color, black, image, scale, large. Super. Did that. All charge view really inherited the style, font, type, color, etc. Then add a new button to it. Baton, action. Labor. Image, sees them name, minus dot circa. Then add a new TextView to it as well. Tax backslash, counter, font-weight, semi boiled, frame, mean VDD 36. And finally add another button to it. Button, action, label. Image, sees them name. Plus dot circa. Splendid. The left part of this section is then, now we will focus on the right. But first let's make this component expandable horizontally. Enter spacer. After that, we need to create a new button with our heart symbol in aside it, enter the following code. Button, action. Lieber. Image sees them name r dot circa, four grand color, pink. And to make their counter future work, we can add some functionality to die beta's actions. Lag this minus button. If Cantor more than 0, counter minus equals one. Then modify the tags button as well. Plus button. If counter less than 100. Cantor. Plus equals one. Of course this upper limit isn't mandatory at all. So you can skip this arbitrary conditioner part and keep the rest of this Claude. It's time to test how this works before deciding to add it to the detail view. Start the live preview and try to increase or decrease the quantity. C. It works without any glitches. That's said, jam back to their product detail view file and edit this new component after the description. As I show you. Quantity, glass favorite quantity favorably to detail view, padding, Vertica. Then. Awesome. We are almost done with developing the detailed view. Just one more thing. Add to Cart. Select group in their project navigator, and let's create a new swift UI file. Give it the name at two car to detail view and save it. Then let's add these modifiers to their preview. Add to Cart to detail view preview layout, size that fits by adding. This component causes of only one UI element. And this will be our flexible, stylized the baton. First minute to replace the placeholder text, menu button, enter, button, action, Labor, Tax. Add to Cart. Uppercase and comment and off button. Padding. 15. Background, color, red, sample product dot red, green, sample product dot green. Blue. Sample product Dot Blue. Clip shape, capsule. As you can notice, the color of this button will always be identical to the color of the product and the background. And he read goals, might tip of the day. To make a baton flexible horizontally. In Swift UI, we need to wrap that tax with two new spacers inside it. No horizontal container required. Let's try it out. Follow me. Please. Add a new spacer here and add another one there. See, it is the default behavior of the button element in Swift UI. Now, the only thing that we need to change is the tax. At these new modifiers to it. Tax. Want. Sees them. Title too. Design, rounded, font-weight, bold, foreground color, right? That it goes. Now, jam back to their product detail view file and replace their spacer at the end of their baton part. As I show you, enter Add to Cart detail view, padding. Bottom 20. Super-duper. It's time to test their finish detail view the live preview. Let's start the live preview and try out the different UI components. As you can see, they work without any problem as they should do. And you know what? I can't wait to show you how we can connect the home with that detail view. By finishing up the last tutorial, the e-commerce application prototype, we'll be ready to use and test on a real device. Not to mention that we can finally show it up to their stakeholders, friends and family members. After that, wink, wink. That said, See you at their class. 10. Add logic to the app and improve the user experience: In the last Swift UI tutorial of this section, we will finish up developing this prototype. As you can see in this demo, detached, that app works seamlessly, not only on the latest and greatest iPhones, but on the order forms without that top-notch. By the end of this class, we will have an impressive iOS application on your device. Not only that UV or learn how to use a new technique to share data between views effortlessly. You know, for data that should be shared with all the views in the entire app as leafed UI framework gives us the environment object. These environmental object, let's ask share more data anywhere it's needed, while also ensuring that our views automatically stay updated when that data changes. It sounds great, doesn't it? All right, without further ado, let's open Xcode and start coding. Shop class. First, select the utility folder as the destination. Let's create a new swift file. Maybe a call this file shop and save it by clicking on the create button. After that, let's create a new class with these properties and add the following code. Class. Sharp. Var, showing product. Bool equals false. Var. Selected product. Product. Question mark equals nil. We initialize the showing product property with that default for us value. The use of this property, we can show or hide the product detail view. If their value is true, then dv or show that product detail view. Then we need to tell the application which specific product to show on the screen. That's why we need a selected Product Property, which is a product type. Next, did you notice the question mark at the end of that type name? This means in Swift that this is an optional property. By default, optionals have the absence of a value which is referred to as Neil. And just to make it clear to you, I told you to add Danielle explicitly to this property, but we can absolutely ignore entering this nil because it's the default value for an optional. This comes in handy when certain class properties may or may not even have a value. In this specific case, there will be no selected product than our user just starts the application. However, it will store the require the information about our product than users select one of their products, showcase items. All these properties take an essential role in how these e-commerce app operates. And other important thing. We want to push this sharp reference type and its properties through the whole application. A Soviet can grab or unnecessary information whenever and wherever we want. We can't use the add state property of wrapper for that because it works only in advanced specific view and couldn't share information with other views. Of course, we can use simple bindings to do their job, but it will be extremely painful to bide information through multiple levels, give them an app. But hey, thankfully, there is a more efficient way to do this task. Observable object. Navigate to their class name and enter discord. Class sharp observable object, PDS code. We made that shop class conform to the observable object protocol. These observable object conformance RLabs instances of this class will be used inside any views we want. So then important changes happen. That view will reload. To make this work, we need to tell the safety UI framework which data it should continuously watch and take care of. Navigate to the beginning of these properties and add the following property wrapper to them. At published this ad published property of wrapper, does Swift UI that any changes to these properties show to trigger view reloads. I hope that everything is clear so far. Now, we need to inject this sharp observable object into the Apps environment to share it across the whole application environment object. First, select attached an app from their project navigator pane, as I show you. Then add these new property of wrapper to their content view. Content view environment, object, shop. This environment of Jack modifier allows us to create views that rely on shared data. From Now, we can assess their properties of this shop class anywhere. Let's see how this works in action to make it happen, opened their content view file and let's create an instance of their shop class. And that they're following code at their properties section. Environment, object, var, shop, typeof, shop. Notice how the show property is in given a default value by using the Add environment object property of wrapper, we are seeing the swift UI environment to provide that value rather than explicitly created by this view. From now, this view can assess their showing product and the selected product properties. Conditional view. Since our primary goal is to use this content view as their main content for wrapper of the e-commerce application. Therefore, we need to prepare for it. We are going to create a conditional statement in such a way that he can either show the home view or the product detail view on their screen. But before we do that, please pay close attention when I show you how to fold and unfold a block of code in X code. First, navigate their cursor to divert the gas that makes sure that it's positioned at the very end of this line as I showed you. Now, are you ready having some fun? Then press than the option command, left arrow keys at the same time and see how XCode falls in, in every line of code in this block. Here it goes, as you can see, there is an indicator with three dots in place of the whole block. How cool is that? Now, Command, click on their VCE stack name and select the make conditional option from their contacts menu. As I do this, we'll wrap this container into a new conditional statement. Here, we need to replace their place holders true value with this real cold. If sharp dot showing product double equals false, that will end shop. Dot selected product double equals. Just that quick explanation of this conditional statement in plain English. If users select no product and the product view is also not shown, then users will see the home view on the screen. After that, scroll down to the statement and modify it to the opposite. And he pleased the AMT view with this code. As product detail view. It couldn't be easier in my opinion. Just one more thing before we can test it in that review. To make this work, we must add the environment object modifier to it so that the reviewers can assess the properties as well. Enter content view environment of jacked Sharp. Please keep in mind that we always need to review how it can assess the shared information or data. Otherwise, we can't test the dynamic API and Xcode's VOT in preview. Now it's time to test the Chevy. Let's start the life review. There's Select one product by clicking on it and nothing happens. That's not quite what we want. But the compiler hasn't crashed either. And that's a good sign. So there is no bug in our code. You know, we miss changing their values of their shops properties. Then we select one of their products after tapping on it. So let's fix it right now. Navigate to their product item view in there, lazy V grid and add a new modifier to it. Product item view on tap gesture. With animation. Is out. Shop dot selected product equals product, Shop dot showing product equals true. This coat vi or change their properties values. And since the app matches any changes of these properties in the environment, it automatically triggers their views update. Now let's test the app again in the life review. See after we selected one of their products, then their screens content switched from the home view to that product detail view. But there are some additional problems that we need to solve. The first one is the back button on their custom navigation bar is not working at all. Then the second problem is we only see the sample product in that detail view, so we need to modify it as well. We will start with the back button before doing it. First, click on that Bean preview button at the bottom toolbar of their Canvas. As I show you this, We'll make this preview window always active no matter which file is opened in the left editor. It's quite a handy feature for this specific scenario when we are jumping from one file to another in our ash button. Alright, open their navigation bar detail view file, and let's create a new instance of their shop class at that top, enter at environmental object, var, shop, typeof sharp. Notice how the sharp property doesn't have a default value using the environment object property of wrapper, we are saying that this week UI environment will provide the value for us. That's sad, v this code, we can assess their shops properties and modify their values. After that, let's add a new action to their back baton. Enter this code with an animation. Is in Shop dot selected product equals nil, shop dot, showing product equals false. The sphere change their properties values, and this change will trigger the instant view update on the screen. And the last thing that we need to do here is to add the necessary environment modifier to that review as well. And environmental object, sharp. Without it, that review won't know what's going on in the environment. Let's test the app in the life review once again. And there it goes. C. We can use the back button to go back from that product detail view to the Home view. Our first task is done here. As far as the second task, we need to change their content in all components to display each products dynamic content. Be prepared because we feel swiftly jump from one file to another. Product detail. First opened their product detail view file, and let's create a new instance of their shop class at that tab, enter at environmental object var. Sharp typeof shop. Second, scroll down to that review and add these new modifier to it, environmental object, shop. Now we can modify their content of this component. Very it's necessary. Wherever you see the sample product property that will be our target. Navigate to the description and modify that tax. As I show you, tax shop dot selected product, question mark, dot description, double question, mark this code via replace their sample content with a real one. However, because it is optional, we need to provide some content to prevent crashing the app if something goes wrong. Just an important side note for you. In a real world scenario, revolt replace the sample product with a placeholder. But this is out of these tutorials scope. Later on, we'll learn how to create and use placeholders efficiently. Now, navigate to the background color and they're following coat color, red. Shop dot selected product. Question mark dot read. Deborah, question-mark. Green, shop dot selected product. Question Omar dot green. Double question mark Blue, shop dot selected product. Question mark dot MLU, double question mark. Again, we are using Neil coalescing with a double question mark to provide a default value for each RGB color value if I'm rapping results. And since we are done here, we can try out how this code works in the life review. And there it goes. And you can see the background and the description has been updated. It couldn't be easier to make all components used their desired content from their locker JSON file with simple binding. This would be such tedious work to accomplish. By now, I am pretty sure that you know what's going on. Header the tear, open the header detail view and create another instance of their shop class. And at environmental object, var, shop, typeof, shop. Then add these new property to that review as well. Environmental Jack sharpen, finally, extended product name, VDD, this code, tax, shop, dot selected product. Question mark, dot name, double question mark. Easy-peasy, isn't it? Now let's test the application again using that Vint preview. Great. As you can see, the product's name has been updated each time we select a new product. Top part detail. The processes there same, open their top part a detail view and create a new shop class instance. And at environmental object, var. Sharp, typeof sharp. Then add a new property to their Preview, like I do environmental object shop. Now we need to modify their price and the image of their product at this code to that price tag. Tags, shop dot selected product, question mark, dot formatted Brice, W question mark. Then jump to the image and add this one. Image. Shop dot selected product. Question mark, dot image, W question mark. Now let's test, detach down app Chevy. No surprise. There are code works like a charm. Wove their products surprise and the image have been updated. How cool is that? We add almost than the last component that we need to modify is the Add to Cart button. Add to Cart. First, open the Add to Cart a detail view file, and let's create a new property. And at environmental object, var shop, typeof shop, then add a new property to that review like I do environmental object. Shop. After all this prep work, let's change the RGB color values. Enter the following code. Color, red, shop dot, selected product crash Omar dot. Read. That will question mark. Green. Shop dot selected product. Question mark not green. Double question mark Blue, shop dot select that product. Question mark dot MLU, double question mark. Finally, let's there's the app in the live preview. As you can see, detach that an application works without any problem. And the transition between the home view and their product detail view is seamless. We can call it a day, but we won't because there are more areas that we can still improve. You know, it's not a secret that I am a massive fan of UI and UX design. This is why this week to I mustard gas course is different than the others out there. We can add haptic feedback to users and grab their attention at some point. These are the parts worthy of further consideration. There. First is that back button on the navigation bar. The second third is that product quantity increase and decrease our buttons. Then for is their favorite button. And the last one is the Add to Cart button. It sounds a lot, but don't worry, because if you speed up the development, the Thai new global constant haptics first of all, open on their constant file and add a new property in the UX section, as I show you, that feedback equals UI Impact Feedback generator style, medium. And that's it. We can use these haptic feedback than ever. And whenever Vi van't, that's set up and their content you file and let's add a new method to that product item view and feedback dot impact occured. This method will be triggered each time when users select a new product and the generator, we are provided them the desired medium slide haptic feedback. That is nothing complicated here. After that, we just need to continue adding a new feedback. Impact are cured mattered here and there. Next, open the navigation bar detail view. These code to their batons, Action, Button, action, feedback dot impact occured. Next, open their quantity favorite detail view and enter the same code to their button's actions as well. But on action, feedback, dot impact occured. Button action feedback, dot impact occured. And finally, baton action. Feedback dot impact occured. Last but not least, opened the Add to Cart detail view and add this code to that baton. And back dot impact occurred. Ru Dan, Great job. You have just finished prototyping the touchdown mobile application with Swift UI. Finally, we can test this model app on a real device, orient their simulator. As you can see on my screen, there is a very old iPhone and two from their latest release. Each one of them has a different screen size so that we can test the navigation and the design. You may notice that their custom navigation bar works with that top notch or without it, without any layout problem. Poisson, I would like to congratulate you. If you are a beginner developer, you have just made good progress on your journey to become a professional app developer. If you are already on that field, then I hope you learned some new tricks or best practices. Either way, I am proud of you because I deliberately speed up these sections space. I wanted you to feel how we can rapidly develop and prototype from scratch, hoping that you'll really enjoy the process in the next practical sections, give you sharpen our skills and discover new app development areas. I can't wait to share with you more awesomeness on Swift UI. And I hope that you are similarly eager to learn more in depth about it. Just one more thing. I would appreciate it so much if you could take the time to give this course a five star rating, or even better if you could share your learning experience with other students. I've writing a handful Review about this course. This way, you're not only encourage me to publish more useful content to this course, but at the same time, you can have others through dance to be informed about these excellent learning malaria as well. Nevertheless, I will be glad to read your success stories too. Thank you.