SwiftUI: Build Your First iOS Mobile App with Swift and Xcode Editor ♥️ 2022 | Robert Petras | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

SwiftUI: Build Your First iOS Mobile App with Swift and Xcode Editor ♥️ 2022

teacher avatar Robert Petras, UI Design & App Development with SwiftUI

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (3h 19m)
    • 1. iOS 14 App with SwiftUI 2.0 and Xcode 12

    • 2. Let’s set up the iOS 14 project in Xcode 12

    • 3. Learn how to create an Onboarding Screen using Page Tab View

    • 4. Learn how to create data model and fetch data using Swift 5

    • 5. Learn how to use App Storage and understand the new SwiftUI App Life Cycle

    • 6. Learn how to create List View and retrieve data using ForEach loop

    • 7. Learn how to create a Detail view layout in SwiftUI 2.0 - Part 1

    • 8. Learn how to create a Detail view layout in SwiftUI 2.0 - Part 2

    • 9. Let’s create an outstanding Settings View - Part 1

    • 10. Sui2 app 01 chapter 11

    • 11. Sui2 app 01 chapter 12

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.





About This Class


Learning iOS 14 Development with the latest SwiftUI Framework and creating outstanding applications is a practical and delightful activity - with the right learning material.

The primary goal of this class is to create the best possible learning experience with that in mind.

In this hands-on class, we’re going to develop a gorgeous encyclopedia of fruits called Fructus.

This Latin word means fruit in English.

This quickstart guide will help you to get familiar with iOS 14 app development and the latest SwiftUI 2.0 framework using the new Xcode 12 editor.


What is the main project of this class?

Learn app development by creating a fully functional iOS 14 mobile application with SwiftUI 2.0 in Xcode 12 code editor. By building this colorful encyclopedia of fruits you will learn many new features that Apple's engineers added to SwiftUI 2.0 framework during WWDC 2020.

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.


Who is this class for?

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


What is the difficulty level of this class?

The difficulty level of this SwiftUI class: BEGINNER LEVELS.


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 encyclopedia of fruits application:

  • How to set up a new iOS 14 project with the new SwiftUI App Life Cycle
  • How to develop a unique Onboarding screen
  • How to use the new AppStorage in SwiftUI 2.0
  • How to save and load data using UserDefaults
  • How to create custom Views with SwiftUI
  • How to retrieve local data using Structs in Swift 5.3
  • How to display multiple Views automatically with ForEach loop
  • How to use scroll view, horizontal view, vertical view containers
  • How to create an outstanding Settings view
  • How to add Icons to the App
  • How to use the improved Canvas and Previews in Xcode 12
  • How to test the iOS 14 app in Xcode Simulator
  • Get familiar with the new Xcode 12

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 Big Sur operating system from Apple (free)

  2. Xcode 12 from Apple (free)

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!



One of the main learning objectives is to create a fully-featured iOS Onboarding screen with the new Page Tab View capability provided by the updated SwiftUI 2.0.

Users if they want, now they can restart the application by toggle the switch in the Settings screen. That way the app starts the onboarding process and we will see the welcome screen again.



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.



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.


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.



Meet Your Teacher

Teacher Profile Image

Robert Petras

UI Design & App Development with SwiftUI


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

Starting from 2022 I will focus on teaching 3D modeling with AR development, and UI design with app development.

In my opinion, the best way to learn native mobile and desktop development is to learn the Swift programming language and master Apple's latest user interface framework: SwiftUI 3.

You can create applications with less code using SwiftUI in the Xcode editor.

I'm pretty confident that you will enjoy the development process and you will be satisfied by looking at the finished applications while creating the main project in each class that I teach.

Recently started to teach iO... See full profile

Class Ratings

Expectations Met?
  • 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.

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.


1. iOS 14 App with SwiftUI 2.0 and Xcode 12: Learning iOS 14, EPA development may delay desk thrifty Y3 and work and creating outstanding applications is a practical and delight who'll activity PDA, right? Learning material. This practical class is dedicated to creating the best possible learning experience with that in mind. Hi, my name is Robert, the lead instructor of this class. I am a professional iOS app developer and UI UX designer. In this class, I viewed each. You have to create an amazing mobile application from scratch using their latest and greatest in their Swift programming language and the Swift UI framework. Who is this class for? This class is for beginner level developers who want to create their own apps. The skills you read again from this class can be used to create apps for iPhone and iPad devices. What is their class all about? These practical class is about achieving three key things. Swift UI to framework. The first thing that you really learn his hand to use the swift u2, bruce, native UI development framework, iOS 14 Development. The second thing that you will achieve is learning how to create an iOS 14 application form scratch, Xcode 12 essentials. The third thing that you will acquire is the essentials of EPA development in Xcode 12, What you will create in this class. By the end of this class, you will create a fully functional and cyclopedia of fluids mobile app that you can launch any use on your iOS device. You can use this application as a foundation of app development or a building even more complex and robust apps. Why should you take this particular class? Project-based approach? This class takes learning programming concepts through a project-based approach. It means that you learn everything you need to know by creating a new project in there for more of a real application. Contact shall learning. This class was so heavily relies on contextual learning, which means that various Have development concepts are introduced only then we need to use them hands-on development. Finally, this class is not just going through pure programming theory, but instead we will focus on writing real God in Xcode, approves official app development tool. By taking this class, you will accelerate your Swift programming and iOS app development learning by creating, encoding, this amazing application. Having said that, see you at their class. Now to Canada. Okay. 2. Let’s set up the iOS 14 project in Xcode 12: in this class, we are going to develop a gorgeous encyclopedia off through its court frutos. This Latin word means through it in English. This quick start guide will help you to get familiar with I US 14 have development and the latest Swifty y two framework using the recently updated Xcor 12 added or the main. The learning objectives off this tutorial are the following. We've you learn how to create a new IOS working project in X scored. Then I have to add a graphic resources to this project. After that, we ve run, have to create a useful on boarding screen. Made a new swift. Do I apply circle and ab storage, then have to create a data model and fetch that are from the Lok are not the source. Next we are going to learn how to create a list for you and the details view to display their fruits in the encyclopaedia. Finally, they are going to develop a modern setting screen using many news 50 y two elements building This eye catching application is a great start to get excited about all of the latest features that swift you I two provides for the app developers and much more set up without further ado. Let's set up our new I US 14 project. First, download the resource Vice from this section. Place this compressed package to the deck, stop and and zip it by double clicking on its icon. The provided main folder contains three additional four orders inside the the sweets the logo marked on them. Besides that, there is a supplementary bird book file with the learning objectives as well. You will find a very detailed list off the topics that we are going toe cover in this tutorial. First, let's take a short look at the Four Orders Shelvey. You will find the finished project in the green folder. This completed project with the necessary source code may have you. Then you are stuck and you need some Greek help. The next folder is the other one. This contains all of the resource materials that you will need to build the through its application. Finally, the blue folder is created for you. We are going to create and save. Then you project into this folder. That's why it's empty for now. Ex scored, all right. Our very first step is to lunch The X Court 12 that you have already installed onto your computer. Then let's create a new I wear sporting project, as I am going to show you when you first start Xcor 12. Then they're coming, though we'll ask you what to do. First, let's click on the Create a new Xcor Project option on this very conv indo. Then make sure that the IOS app that menu item is selected at that up and choose the from the available application templates. Then click on the next button as I show you. Now we need to configure our new I Us Wharton Project for the product name. Enter fruit juice for the team. If you already have an apple developer account, logging in here allows you to build your app on a real device. If you don't have an apple developer account, you can skip this part and test your APP in the U. S. Simulator on your Mac organization. Identify your the usually and there are companies website address in reverse order, for example, com dot swift you I masterclass the bundle identify air is automatically combined from the project name and the organisation identify here next make sure that Swifty why is selected for the in their face then the projects like So girl must be swift. Do I ep? This is a new feature in swift You I two meaning that from now we can create a 100% thrifty . Why application? Another important setting is the programming language. Make sure that it remains the default swift. Finally, leave the court daughter and the include test options and selected as I show you after all of the necessary said things. Click on an exit button and now we need to tell Ex Scored very want to save our project on the computer, Navigate to the deck, stop and choose the students APP folder as the destination off this new X court project. Just one more thing. You can leave the optional create git repository on my Mac creature and selected because if you're not needed to develop this application now, click on the create button and see how X scored. 12 creates our first I US 14 up using the selected up template portrayed more All right. Before we start adding the resource materials to the project, we need to make a small change about how the app works on our device. First click on the fructose project Name on the project Navigator on the left side, off X scored as I show you then at the deployment in four settings, please uncheck the landscape left and right options. The reason behind this change that the Frutos AB is best used in portrayed more. I goes so far, so good. Next, we are going to add the icons to the project. Please follow me step by step. If you are not on experienced, are us the Velo? Bury it. Select the assets catalog in the Project Navigator panel. As I show you now we can see an empty icon set off Icons group in the middle of panel off the Assets catalog. Click on the APP Icon group and take a short look How many I goes. We need tohave to provide for a typical IOS application. As you can see, there are so many at icon sizes that we need to support. Now I am going to teach. You have to manually Aditi's I goes to the project. First, we need to navigate to the Projects folder on their computers. Next stop. Great now open the resource is folder inside it Inside this folder. Open the up icon folder as I show you, There are 36 different sizes off at icons pre made for us and an additional content Jason File that contains all of these icons names in a well formatted list. It's pretty cool, isn't it? Now resize defined their window and select the settings icons. These are the at Icon 29 by 29 at two X and Icon 29 by 29 at free expires since they make appear in the assets catalogue. Therefore, we can drag and drop them together to their empty slot in X court. Follow me and drag and drop despairs off icons to the settings Sluts. Nice jab. As you can imagine, this is quite tedious work with many potential errors. We can speed up this by adding or off the icons to the project that once let me show. You have to do this first. Select the empty at Icon folder in the middle panel. Its name needs to be highlighted. Then right, click or control click on the icon group. By doing this, a new contacts Sure menu views show up. Select the show in Finder Option at the top of this menu and ex court will bring us to the Icons folder in a new finder window. Next, Celac the app icon set folder and open it. Here we can see the two previously added icons with an ex court auto generated contents lease as you notice. Now jump back to our resource is folder and select all of the graphics and the content fast there. Then copy them toe directly Board as I show you, it must be 37 5 altogether. Now go back to the APP icon set for order and based everything from the clipboard into this place, you will be us to replace the existing icons and the content. Jeez, on file, select the applied to all check mark and click on the replace button respectively. Finally closed the finder window and that's all. Do you see the recently added icons in the app icon group? I hope so. Just scroll down from the top smallest to the bottoms. Largest I cause if you follow my instructions, then you will see that all of the icons off this project had been placed correctly in the Assets folder. Just have a look at how many icons do we need to have to create a well designed RUS application? It's quite amazing, isn't it? Fruits. Okay, dokey. It's time to add the rest of the graphic assets to the project. Your country New with their photos off the fruits open, the resource is folder once again, then open the fruits further inside it. We will fight a bunch off BNG if ice we transport and backgrounds. All right, I know their background is right in the finder window, but trust me, in reality, it's a transparent now drag and drop all of them toe the assets. Cattle open L. As I show you. So far, so good. Make sure that all through its are selected and right click or control Greek on them. By doing this, a new context menu will pop up. Now select the create new folder from Selection Option, and Ex Court will put these photos into a new folder. After that, click on the folder name and rename its to fruits. Do you see the transparent backgrounds around the fruits? I told you logo. Now we are going to add a logo to the project. Jump back to the resource is folder on the deck. Stop and open the local folder. Inside it, we will find a professional logo pre made for us the Red Apple and the Greenberg Grand. This graphic, I said, is a special one because it is a vector file. What is quite new in I, Wes Wharton is from now we can add SVG file four months as an asset to our projects. These SVG if ice can be scared up infinitely without accelerating them and losing their quality in general. Having said that, let's see how we can do it in X scored, select and drag and drop their logo. Got svg file into the assets panel. As I show you now via these recently added logo. Is theus selected in the Assad Spinal Navigato? They re sizing option at the Attributes panel on the right side in X scored here we have to select the preserve vector data in order to use thes svg as a scalable wrecked a graphic in the fructose project. Basically with the setting, we told Xcor Toe not tow pixel ate our logo and use the original doctor file as it is. By doing that, our logo will be always crystal clear and sharp. No matter have much we want to scale up or shrink it down. The logo will always look perfect in this up, Color says. Now it's time to talk about the colors. Every APP needs to have a very design color team. These photos is not an exception from that by purpose. I designed these up in such a way that we can use a wide range of Grady and colors and learn have to use them efficiently. Let's learn how to create some new color sets. Shelvey first click on the big plans button at the bottom off the assets panel, then select the new color said Option from the Context menu as I show you. As you notice, there is a new fight color. Set a date to the project now by clicking on its default name, we can rename it. Give it a new name, such as Color Blueberry Light, Nice After that, select both off the any appearance and did are a periods colors in the editor, as I show you, since both light and dark appearances will be the same colors. Therefore, we can change their values at the same time. Now change the input method from floating 0.28 bit accidents. Immel at the attributes. Banal Following me, then ender hashtag 66 the six f f This will change their the fourth fight Color toe. A nice light blue color in the editor as you can. Not this, since every fruit has got a dedicated light and the dark color for day Grady and Bag Grant . Therefore, we need to create a dark blue color said. Now let's do it. Shelvey. Let's click on the big plus button at the bottom of the assets funnel and select the new color said Option from the Contacts menu. Rename this color toe color. Blueberry dark. Nice job now select both. Will there any appearance and the dark appear Ian's colors in the editor? Just like before? Let's change the input method from floating blowing toe eight bit hacks, a decimal at the attributes panel. Then enter the full of ink color value hash tag. Do 47 f f f This were changed. Divide color toe a darker blue color in the editor as you cannot. This colors all right. We created a light and the dark color for the blueberry, since you have already learned have to do it. Therefore, we don't need to create the rest of the colors manually. We can speed that. The process by I think the pre defined color sets from the resource is having said that navigate to the resource is for order on the deck. Stop and open their colors. Folder inside it. As you can see, each color set is basically afford er with the color value inside it. Now select all of these color sets and drag and drop them into the assets catalogue as I show you. Whoa, Do you see these new, vibrant colors? They are a great much for each fruit. For those now, select all of the colors. And let's create a new folder from the selection, like Vice video before give you the name colors. Great job, orographic matter years already added to the projects. We have also organized them by putting them into folders accent color. Now, before we start holding, let's talk about another new feature in X court 12. As you can notice, there is a new dedicated color set for the except color. This new accent, color said, is globally used by the operating system in the eye. US 14 app. As you may know, the accent color is vitally used for buttons and other different you. I elements in navigation here and there, since the default blue accent color looks terrible in these photos app. Therefore, we need to change it for the better. Let's see. Have to change. It shall be first. Make sure that the accent color is selected in the assets catalogue, then change its appearances from none to any and dark as I show you. By doing that, we can differentiate its color in the light and the dark. Appearances. Now select the empty any appear Ian sculler, which is responsible not only supporting the light A periods, but the older I US versions without the dark mode as well. Okay. Now, for his color content, select the S RGB color system. After that, we need to change the red, the green and the blue color sliders by used from 1 to 0. As I show you with this, we created a pitch black color. Now select the empty dark periods color and choose for its color content the RGB color system as well. Review. Leave its color Are you since we want provide color in the dark Mort by doing all of these that things we have just created, a black and white color said for the global accent color. That's thing. And that's all for this lecture. All we need now is to launch the simulator and test the APP icons on the redesign toolbar Select and iPhone as a target. This device, then by clicking on the play button lunch X court simulator. If it's a fresh new lunch, then it we're take a vial and the simulator boots up, By the way, since then, you 50. Why life cycle is chosen for this I West 14 project. Therefore, if you don't have to create a lunch screen using the old storyboard technology, I find it birth to mention before we wrap up this class. And here it goes. The Iowa Sap is already largely in the simulator, and there is the default welcome message on the screen, since our main goal is to test the icon. Therefore, let's close the app and check it on the home screen. See, it's perfect What do you think about it? I think that's a great start. We not only set up a new I US 14 projecting X Court 12 but we have already added all the necessary resource matter year sweet as well. Besides all of that, we have learned that starting from a US 14 we can add a speech, a graphic files as vector resource is to the project. And finally we can said the colors for the global accent color as well. Awesome job so far. See you at the next class. 3. Learn how to create an Onboarding Screen using Page Tab View: By the end of Discuss, we are going to develop a fully functional on boarding screen. It's 50 wise new Beach that view in order to make this on boarding screen, this place some content. If you create a new reusable card view for the fruits, as you can notice, we can see only one card at one time. But we can activate the next card by moving our finger horizontally on the screen. This paging functionality with the little circle indicators at the bottom of the card is a building feature that we can utilize in Swifty White through with writing only a couple of guys off court. All right, Without further ado, let's open the fructose project in X scored and start Kolding Chevy organizing fice and Borders Before we start working on the card view, let's organized first the main swifty wife eyes by putting them into a new group folder. Select the content you file on the Project Navigator and rightly or control, click on its fire name by doing this. A new contacts Sure Menu Ville Papa in this menu, select the new group from selection option as I show you. After that, give this folder. The following name. Super. The next file that we need to put into this folder is the Frutos at Swift file. By the way, this is the entry off the application, and we are going toe cover its importance later on in this section. Starting from now, we are going to put all major views into this folder and separate them from the other Feiss . Okay, enough with the talk and let's do something visible. Card you. Our next step is to greet another group folder by right clicking or control cooking on the project name in the project Navigator panna. Give it the name. Have you? Starting from now, we are going to save all of their smaller views into this folder and keep them separated from the main views. By doing this, reveal organizer project and keep the fire structure clean and neat. Now it's time to create the actual card view for the foods. First, let's create a new fine in the view for order. When X scored, Villa's could choose the type of the fight in the new pop up window, then select Swifty I view and click on the next button in the new Vin, though, and they're through it card view for its name and make sure that its destination is the view folder. Finally click on the Create Button and ex scored Will added this file to this I US 14 project. All right, let's start holding first, let's separate our file into three main sections as a starter. Enter the following comments as I do Mark Properties Mark Buddy Mark Preview. Nice job. Now let's add a new modifier toe this preview window. Enter review Li L Peaks Feed 320 Hide 640. This fixed size is more suitable for us when we start designing the guards layout. After finishing with all this preparation, navigate to the placeholder text in the body and replace its content by diving blueberry. As you may notice, the preview window on the campus automatically updates its content. It's quite amazing, isn't it? We can call it on the left side off the editor via on the right side off it. We can watch the layer changes immediately. Updated. Okay, now command click on the text name and select the embed envy stock option in the recently pop up context menu. As I show you this will quickly and bad detects to you into a new vertical stack container as we desired. After that, we need to add some spacing between the elements in this container. Enter spacing 20. Nice. Now we can mark the end of the container by, I think a closing comment at the end off it as I show you new comment. These thank it's not mandatory, but I find this practice very useful over the past year, developing many applications with Swift You I with the help of these closing comments, I always know where to put the views modifiers All right. Another thing that I like to do is add new comments to the U I elements beforehand I start holding. This practice is always helping in the Abdullah elopement. Having said that, let's define the different types of content inside the card that we need to develop. First, Vivia need a card image and, uh, you comment fruit image. Next, we have already placed the carts title just and there is comment about it. New comment, Fruit title. Then we are going toe head. A headline below this title Enter NewCo meant fruit headline and finally we need to create a custom battle as well. Enter NewCo meant Button starred Card image. All right, So far, so good. Now let's add a new image for the card. Shelvey First navigate to the image comment and add a new image of you. Image. Blueberry. Wow, these blueberries are huge, so let's add somebody fires to shrink them down. Enter re sizable. Scared to feed Nice. These to view modifiers had a lot, but about, I think a nice drop them shadow to this image. Enter shadow Color, Keller read. Zero green zero Blue zero Opus City 0.15 Brady use eight x six. Why eight? As you can see, the discord we had did a gentle, semi transparent black shadow to this fruit. It will prop up our image even more from the black grand color after we added to the card later on. Trust me, these little details make a difference between a good and then outstanding swift You I application background. Now it's time to add and expand table by grand view to this card in order to separate this flexible black grant from the rest of the content we need to him about this V's like container into a new Z stack container. The quickest way to do this is to embed this V stack into another one. Using X courts Quick command, click on the name off the V stack and select the embed envy stock option from the new contextual menu. After that renamed the first V's That disease that as I show you disease, think off course. We need to fix the closing comments at the end off the court as well disease that these thank super. Now we are going to add a new background modifier to these Z stack and there the following court. Big Grant Linear Grady Aunt Greedy Ent Grady Ent Colors Color color Blue barrier Light color Keller Blueberry Dark start point endpoint. But, um, finally we are finishing avid, adding a coronary views to this view as well. Enter Cordner. Reduce 20. Our design gets better and better. Just one more thing is still missing. Our goal is to make this beautiful color Grady and expand itself all edges off the screen. We can accomplish this by adding a new frame modifier, toe this view and make its size not only flexible but expandable as well enter the following modifier at the top of the others because their order really matters in Swift you , I free him Mean defeat. Zero Max Weed Infinity Mean height zero Marx Hide Infinity Alignment Center. As you can see in the preview window, the background with the Grady and Colors is feeling up. The whole space is in that cool. Is it title? Now we are going to work on the cards title and make it better. It's a new modifiers. First navigate to it and enter the following court for grand color color wide formed. Large tidal front weight, heavy shadow color galore bread zero green zero blue zero opacity, zero bond. 15 radios to X To Why? To, as you can see on the preview window, these four lines off modifiers, including the subtle drop shadow, make a huge difference to the look off discards title. But we don't stop here. Headline. Let's continue the cards Development with the headline shall be navigate to his comment and let's create a new text you, below it, enter thanks. Blueberries are sweet, nutritious and virally popular fruit all over Devard. It's quite important to try to simulate the length off the text s precisely as we can, because later on, it will be more difficult to modify the layout in this case, two or at max rear lines off. Content for the headline is ideal, but what about its appear IUs? Let's make its design better by adding some new modifiers to this text you enter for grand color color wide, more thieliant text that I meant sender. Bad zinc, horizontal 16 frame max of it 480. All right. The headline is done as well. It's much better now. In my opinion. Do you agree with me? I hope so. But what this frame with the maximum with size is four you may ask. Well, I can tell you that with my many years off experience in Mobile have design and you are UX design in general on my back. I know exactly that. On divide iPad screen. We need to maximize the length off the text line toe. 80 characters in orderto keep the content easily digestible for the Reznor's I. Usually Saturdays marks veto 614 for the long text block. However, in this case, I find it a little bit better to keep the content block off this headline. A slightly narrow custom button. Fantastic. The card of the fruits is almost done. There is only one missing element that we need to develop. This is the custom start button, since it's more complex than the default button provided by the mobile operating system. Therefore, I find it more approachable to develop it separately from the card view, not to mention a unique functionality off this button when I user taps on it, so keep it short. It's always good practice to develop these kinds of complex elements As a stand alone you, I component with its own functionality. That's why we are going to create a separate switch. Do I file for it? Give this new swift. Do I file the name start but on view and save it into the view group as I show you Now it's totally after you to follow me, because commenting on the main section off the file is an optional thing. But still it is a good practice. In my opinion. Enter Mark Properties Mark body Mark preview. Now, as for the unique size off the preview window, I would like to keep it flexible that fits its contents size. At this modifier toe the review preview lee out sighs that feeds see the preview window shrank them its size to feed its content. Okay, after all of this prep work is done, it's time to add the actual battle toe. This view first replaced the default placeholder text you with this basic bottom structure . But on action print exit the on boarding Thanks start. There is nothing fancy about these better. It prints out a text message to the outward and the user taps on it. Nothing more, nothing less. Just a plain boring button. But hey, we can do it better country. Okay, let's have some fun. The sweet do I shall be first and foremost that Zoom in the preview window to get a better picture off the upcoming changes. 150% magnification is big enough on my screen after then let's try out one off the new features in X Court 12. On the preview Stuhlbarg Please click on the settings button and change their color. Shame from inherited toe dark appearance as I show you this were changed, their previews environment too dark. Since we are going to embed this custom button into the card view that has got always a dark ingredient Berglund color beneath it. Therefore, it's more suitable for us to design its layout in dark appearance as well. Now at the following modifier to the button closing comment button Accent Color Color Wide this court will force to keep the buttons appear Reince to light consistently. Even then, the user is changing the phones, appearance from light to dark and vice versa. Okay, now let's embed the text you into a new Corey Zonta Container Command. Click on the name of this text view and select the embed in age stack auction as I show you . It's just that grade now at some spacer to this container spacing aid. Shortly after these, let's add a new image after the start. Content image. Seus them. Name. Ariel. Right circle. Not bad at all. But with scaling up this system icon, this could be even better, in my opinion. So let's add this. The weed image scale large. See? It's much better now. Now let's add some pending toe this bottom before the embed it into a capsule shape. I think horizontal 16 a bad ink vertical, then just that quick tip for you. Having a little bit more padding to the horizontal direction than to the vertical direction is a very long practice amongst the you I designers. And finally, we are going to add a new capsule shape as a new background for this button. Enter the full of in court but grant capsule stroke Border color wide line with 1.25. Splendid. As you can see, this capsule shape with this white stroke will make this custom that own really shine. Do you agree with me? I hope so. All right. It's time to embed discussed, um, butter into the car to you. Open the through it card view file and navigate to the end of the court. Then enter the following start button view. And here it goes. We have just finished their card view by adding this custom butter into it. It's quite an impressive design, isn't it? But we are not done yet. Animation By adding a solid animation toe this card, we can improve the overall design since it can grab the user's attention to the card itself . Let's do it first. Navigate to the top of the file and let's create a new property and that the following code ed stayed Private bar is animating bull because force, as you can see, this is not a regular property that stores are true or force bullion value in it, since we want to modify its value. Therefore, we must use a special at state Property rapper to achieve this goal. This at state property of rapper will allow us to mutate the state off the animation every time. Then the guard appears on the screen by default. Its value is force, meaning the image is still and there is no animation running. Having said that, let's change its value to true each time than the guard of years on the screen. To do this, navigate to the very end off disease. That and before any other view modifier, please enter this new one on a pier with animation. He's out duration 0.5 is animating true. All right, this code will change the state of the animation to True. As you can see to Aditi's, we also defined that it will be an easy out animation that is have a second long that is only one thing that is still missing in this logic, we haven't decided yet what we want when he made on the screen. We'll fix it by adding a scale effect to the image navigate today image and after the shadow modifier at this new one scaler effect, he's animating question mark 1.0 Callum a 0.6. You may ask how these gold works well, basically, when the value off the is animating property changes from force to true, then the initial 0.6% size off the image will be scaled up with original size, so the blueberries will be shrank down initially, and each time than the card appears on the screen. Debut will be skilled up to its original size with a smooth easing out animation. Enough talking about it and let's see it in action. SHERRY Life Review. Navigate to the preview stool bar and click on the start button. This will start their life review using on embedded simulator. The animation is badly noticeable, but there is another problem that we can notice. As you see, the card fuels have the whole screen, and this is not quite what we want matter. don't worry, we can fix it by adding on additional padding to the card. First, navigate to the end off the container and at this missing padding modifier to it after the coronary. The use bad ink horizontal 20 second. As you see, the Life Review is updated automatically with the creek animation that we have developed recently. To be honest, I frequently find myself to test these kind off animations and other user interactive behaviors in the simulator, or even better, on a real physical device. In order to accomplish that, we need to display this card view in the main view somehow on board the in view. All right, I have good news for you. We have already done V developing the card view and adding a smooth animation to it. Now we have reached the point when our Frutos application is ready tothis play this card on own boarding screen. Having said that, let's create a new file for this on boarding screen shall be first, select the folder in the Project Navigator, then rightly or control click on it. This will show up a new context menu for us. Select the new file option there, then select the Swift ey template and click on the next button. Now name this file on boarding view and make sure the destination is the folder before you click on the create button. All right, As you already know me by now, I am going to mark them in. Section off this file by adding new comments to them. You can follow me, escape this part. It's totally after you and, uh, Mark Properties. Mark Body Mark Preview. Great. After finishing with this prep work, we are ready to develop the basically up on functionality for this on boarding screen. First, we need to replace the place for their dext view with the recently developed cards view. Enter the following court through it card view. Oh, some jab. Now we are going to place this card in tow a page. The view, which is a new U I element in the safety y two framework. Enter the following court that view that move the card view into this stab. You now had a closing comment to this view, Deb. Now we must add a specific modifier to this the view in order to create a Beijing user in their face in swift ey. Enter that view style page, the view style, then follow up with, I Think and you padding to the whole view. Bad ink, Vertical 20. And that's all we have just created a basic Beijing that view, but only one modifier. Unfortunately, my preview stopped working properly. That's why you can't see it on my editor. No matter how many times I try to restart this preview, you can expect that sometimes the preview stops working without any particular reason. Just like this time, I'm sure about Proust. Engineers were improved its reliability over time. Until then, we need to use their proven simulator to test our application. But before we do that, there is still one thing that we need to do as you can see the discord the embedded only one card into the on boarding screen. Therefore, now we need to multiply the number off this playing cards. We can easily achieve this goal by wrapping our guard in tow a new for each loop five or six times. Let's do it right now under this following court for each from zero to less than five item in, Then move up. They threw it for you into these loop as I show you. Finally, enter new closing comment loop. Okey dokey, since the preview is still broken without any reason. Therefore, it's time to test our app in a simulator or on a really test device. First, open their fruit juice. This is the new entry point off this application. Later on in this section, we are going toe cover its importance off this F file in detail. But for now, in order to test this application, we need to tear decide to display the on birding view instead of the default content to you . Having said that, replaced the content view inside the window group inside their scene and inside the new protocol enter on boarding view. And that's all for this lecture simulator are only due to do is now to build and run the fructose application in a simulator. As I show you, Just wait for a second and see how our EP is launching in the simulator. After that, you can test this basic on boarding screen with the New Page Inc user in their face behavior. As you wish. As you can see, it's working without any problems or glitches. It's quite surprising at how few lines off court we can accomplish this functionality. Using the recently added page that view in this 50 y two framework. I hope that you enjoy this lecture. I can promise you that we can do even better in the next lecture there. Yes, we are going to work on heading more also nest trees through its application. Until then, happy Kolding and see you at the next class. 4. Learn how to create data model and fetch data using Swift 5: in this lecture, we are going to cover the basics off data. First, we will create a data model, then create a local data file that we stole all of the information about the through its in this encyclopaedia up second Levi, learn how to integrate and fetch this data as well. By the end of this class, if you're display different fruits in the on boarding screen and make it more interesting, all right, without further ado, let's launch X scored and start coding Chevy. Our first task is to create a data model for all of the fruits. This data model is basically a blueprint that describes all kinds off information about the type of the properties that need to be represented. Having said that, right, click or control, click on the main project name on the Project Navigator. After that, let's create a new group further for this data model as I show you give you the name model and let's create a new file for it. Selected a swift file from the available templates, and they made to, through its model, make sure that the destination is still the recently created model folder. Then click on the create button Xcor were open this file immediately. Now replace the default foundation framework with this 50. Why, as I show you then and there a short but yet informative comment about this model. You comment mark through its data model. Super, That's enough Now the next major task is to create the actual data model with all of the necessary information about their fruits in it. For this model, we are going to create a veil to design news tracked and there the following court abstract fruit identifiable of our I d. Because you you i d. Which is a universally unique identifying where. Voller title. Spring of our headline Spring bar image String Far greedy and colors array off color bar description Spring bar nutrition array off string Pay attention to the I. D variable in this model This you you i d metal were generate a random, universally unique identifying where for each fruit item in the media, with his unique idea value, we can differentiate each freed from the other fruits when we are displaying the fetch to data from the local data file. After this I d variable, we created a title headline Ah, fire name off the image and the description buyable us for they threw it. All of these, very evers, our strength types. Next, we created a variable for the Grady and colors. It will hold not string values, but actual color values. Each flu, it has got a light and the dark color, and we are going to use them to create an impressive linear agree of the end for the background here and there in the application. Lastly, we also declared another array for all of the different nutritional values for each through it such as energy, sugar, fat pertain, vitamin e's and finally, menorahs. And that's all we have just managed to create a complete that a blueprint for the fruit data. Next, you ve learned how to create a low card data file that were stored. The actual data for all of the through its in this and seek low paid ei up that, uh okay, dokey. Let's create our first local data file First, right, click or control, click on the main project name on the Project Navigator. After that, let's create a new group folder for this data file, give you the name, data and Let's create a new script file for it yet again. Seller the swift file from the available templates and name it to through it data. Make sure that the destination is still the recently created that a folder. Then click on the create button. Xcor will open this file immediately. It was super easy so far, isn't it? Now replace the default foundation framework with their swifty. Why, as I tend to do nowadays, then enter a short but yet informative comment about this file. You comment Mark fruits that now I am going to show you how to create a static local variable that stores all of the necessary information about the fruits. First, that's great. An empty constant that store and array off ruit type. And there the following court lead through its better array or through it equals open brackets. Closing brackets. So far, so good. Now we are going to use X courts building auto completion feature First, navigate the cursor inside the anti free data as I show you next, start tie being fruit and wait for a sec until X Court auto completion shows up in the selection off the available options. Now, since the random i d off their fruit is auto generated by the u. U I D. Metal. Therefore, we should sell like the second option. We have this idea as I show you press the enter on this particle er Option and Xcor were automatically provide us the necessary code snippet with many placeholders inside it. These place orders were Give us precise instructions about the value type that we must enter there. We are going to feel out only the first entry for practicing purposes. Just follow me by entering some real values for the first fruit title. Blueberry, then headline. Blueberries are sweet, nutritious and violet popular through it all over Devard. Next image. Blueberry Next Grady and colors Color color, blueberry light coma color color Blueberry Dark Next description Blueberries are perennial flavoring plants with blue or purple Berries and finally nutrition. 240 kilo. Jewell Coma. 9.96 gram coma 0.30 Free Graham Coma 0.74 gram Coma A comma. Be one coma. Got to see him. Magnesium and congratulations. You have just entered a real data for the encyclopedia or some job. Now, if you want to add another entry to this array. Then you only need to add a comma to the end of the first entry and start typing through it again, as I show you. But hey, don't worry, we are not going toe type all of the rest that instead, off these tedious work, we are going to copy and paste all of the data from the previously prepared Resources File Data file. Having said that, navigate to the deck, stop and open the resource is folder In there you will find another four order cold data. Open this folder as well. Now let's open the fruits that are text file with the default text that retort by double clicking on the fire name. Next, select all of the content by command, plus a keyboard shortcut and copy to directly board by Common plus C short cat. All right. After that, navigate back to the fruits that a file and replace the preview sleep manually entered content with their content from directly board by pressing the command plus V short got as I show you. Easy peasy is ended. I don't so, and here it goes. All information about each flew it in a nice that a file? It's quite a long file, Toby, honest. But we are done. Be dealing with it now. It's time for using it for fun that I integration. Now open the on boarding view file before we start the better integration into the through it card view. We need to make a small prep work. We are going toe comment out the through it card view in this file and replace it with a temporary text view as I show you. Thanks, guards. Great. The preview window updated and they threw it. Card view is no longer connected to this on boarding view. The reasoning behind it is that first and foremost, we want to make the data integration toe work properly in the through it card view before the start fetching the local data on toe This on boarding view. Okay, Now open the freed card view first time in this lecture In this file, our very first task is to create a new variable that will be a representation off the previously declared through it model. Enter the following court. Far fruit die both fruit. This fruit variable is a type of the fruit model without any initial value. As you can notice on the toolbar, there is an error, and the compiler stopped working immediately, since this fruit variable isn't initialized yet with any value. Therefore, it will break the preview immediately because it doesn't know what to do with this property that has no value. It's quite understandable, isn't it? Don't panic. Just scroll down to the end. Off the court. The built in error handing feature gives us a tip on how we can fix this error. Now click on the red Bean at the start off the error message. As I show you see, there is a missing argument for the fruit property that the review and successfully tries to call and display on the canvas toe handle this error. Click Wanda Fix button at the bottom right corner. Nice job as you can not His ex court put the missing fruit property inside the view, and now we just need to tell the source off the data that the preview can use for displaying some information for us to make that that I integration more visible and have some fun. Let's add references to the second threw it in the data store Shelvey ender through it card view fruit for its better one since the blueberry go down zero index, therefore the second through it as the first index. If you resume the preview, you were notice that the error is dismissed yet today through it didn't change to a new one . It's because we are still using the manually entered the information for the different elements inside the card. Let's integrate the model in tow. This and connected to the U elements. We start from talkto button. All right. First navigate to the image view and replace the static content with the dynamic one. As I show you enter image fruit image. Whoa! Did you see what's happened? I call it a radical change. Who does like Strawberry after blueberry? Now let's country new, but its title, shall we? The process is the same. They are going to replace its study content with the dynamic one. Enter thanks. Fruit died toe. See the content in the preview is updated immediately. Some folks call it magic, but it's pure engineering in the reality. No need to sugarcoat it. Its programming. I am sure you know the drill. The next one is the headline Enter Thanks, Fruit headline Fantastic! We are done with all dating the image, the title and the headline. It wasn't particulary hard task, was it the final You? I element in this card that we need to update is the colors off the linear ingredient now much me carefully, because it's quite different than the individual elements before, since it's an array off colors. Therefore, we don't need to add each color separately to these greedy and view off course. We call to do that as well, but there is a better and shorter way. First, the lead there. Two colors, including the square brackets off the colors. A race, as I show you second simply enter the new air, a referencing the data moda greedy and colors fruit greedy and colors. And that's all this new by Grand makes a such difference in their cards to design. Amazing. It couldn't be easier if you know how it works in Swift. That's why I love this programming language so much. What about the other fruits in our local data file? Wouldn't it be nice if we can see them in the preview? Let's do it. Navigate to the end of the file and let's modify the index off the fruit. You can play video as long as you wish. I hope that you enjoy building application but swift you I as much as I do. It's so much fun playing video it. But enough with the small talk and let's get back to work. Shelvey, After all of this nice work. Finally, we can fetch the data into their on boarding screen and finish up this lecture for now, fetching that first opened the on boarding view file and let's create a new property. Enter the following court at the top of this file bar fluids array or through it equals through its better. With this court, we not only created a new property for the fluids that we want to display on the on boarding screen, but this time the initialized it with them through its data as well. The on boarding view. We'll know exactly that the source off the data cames from now, the only need to do is to tell the Ludo fetched is that from the local data file to do this ? Let's modify before each loop as I show you enter for each. For you, it's from 0 to 5. VD scored via display, only the 1st 6 through its from the data file. It's quite an arbitrary number. Usually we don't display more than four or five cards on a typical on boarding screen, but back to work. Now we can finally delete the placeholder text inside this loop and call the fruit card view once again. Off course, we've you get a new error message from X scored. As you can read, we must provide some data inside this view and tell it Be true it to show by referencing with an index review past week a number from 0 to 5 and the Carve. You will understand that we want to display the 1st 6 fru its in line from the local data file. And just one more thing. Before we wrap up this lecture, navigate to the preview and let's fast the missing property with the necessary that our tweet as well and, uh, on boarding view through its through its that alright, it's time to resume the automatic preview on the canvas. By doing it. The preview updates itself, but now, with the different through it cards okay, for now, we can only see the first card, but when we start the life preview by clicking on the play button, then the beauty stimulator were stored, and we can see all cars in there. It's quite impressive, isn't it? Best thing as usual, it's time to test this application in the simulator or on a really does device. Let's a beard around the fruit juice project Off course. Best thing on the iPhone is much better than anything else. In my opinion, shortly after the APP is lunch, we can test have the on boarding screen is working with displaying all of the cards inside its page, have you? What do you think about it? I hope that you enjoy to developing it in the next lecture. Reveal ed more functionality. So when a user types on the start button, it will exit the on boarding and entered an exc screen. Until then, happy coding and see you at the class 5. Learn how to use App Storage and understand the new SwiftUI App Life Cycle: this year, Evel extended the swift ey framework with some new A B I, such as scenes. And perhaps this was a big expansion to Swift You I. And that's why many developers call it Swift You. I two point or one of the most important features is that we can now wield an entire happy just Swifty. Why in this class we are going to cover the basics off these new A B I and explain how views since and EPS work together. By the end of this lecture, users will be able to exit the on boarding process by tapping on the start button and enter the next screen in the book to its application. Every file, All right, without for Dorado, Let's large Xcor and open the fruit was swift file. As I show you, everything you see here is Brandon, you in swift you I 2.0, let's start with this at main attribute at the top of this cord Shelvey. The main attributes is a new future in Speaks 513 programming language that allows a type to serve as an entry point off the execution off the program. Normally a swift program would require a main dot sweet filed to execute. Now with this at main attributes, we can delegate that responsibility and our program automatically performs all the necessary set up on launch to get our at will appear on the screen. Noteworthy changes. What we can see in this new EP Swift file is a complete declaration for a basic app. In swift you I two point or using only a handful of flies off court Isn't that beautiful? Short and concise. Thank you. Apples engineers. Now let's go through the main parts off this Shelvey. As you can see, our Frutos applications tract is conforming to the new protocol A b I. And here is another new feature in Swift You I, as you may notice, this APP declaration looks similar to a common view declaration in swift you I, for example, both views and EPS can declare that our dependence is an app, however, is built using since and so its body property returns a scene instead off of you And finally we find a new window group scene inside his body as well. Let's demystify these new changes a little bit further swift you I at life cycle to get family year with how EPS since and views work together. Let's talk about their rules inside the new Swift. You. I have a life cycle. Let's thought with the smallest element off them, shall we views? Views are important because each of you devise a piece off you, I in the application. Then we look at a nap. Everything we sees of you, individual images or pieces off decks. Our views to the horizontal or vertical scrolling containers holding them are also views. To put it. Simple views, sir, as the basing building blocks rendering everything we see on the screen and they can be composed together to form more complex user interfaces. CES views form the content off since allowing them Toby independently displayed by the platform. Those scenes can also be composed together to form more complex, since some platforms like iPad OS can show multiple windows side by side. Next, Mac OS provides another great example off how seen content can appear in different ways. For example, in multiple windows, stepped windows, sidebars and so on. Other platforms, such as I Us Virtuous and TV West prefer to show only a single full screen window for each app are on boarding view is contained within ASEAN called Window group. The window group seen manages the window that are on boarding will run their into. It can also create addition of indoors within the same window. This is where reveal developed the logic that were control. Which views should be rendered, the initial on boarding view or the content to you to wrap up this short introductory This window groups in manages our main user in their face in the new Swifty. Why a life cycle? Absolute ege All right back today of development every on boarding screen must have at last won exit way that navigates the user to a different screen. To make this work properly, we need to store its state value using a permanent storage on the device for dysfunctionality, we can use one off the new swift US property rappers called up storage. So what is the X storage property? Rapper First, the app storage is swift. You eyes new dedicated property of rubber for reading values from user the forts. Second, this property of rapper automatically invalidates the EPS body property when a value change and refresh its you I immediately this X storage uses. The user devotes that our storage, which is ideal for storing small pieces off information about the app such as different kinds, off settings, utilities, etcetera. In this case, we are going to use this F storage to store and manage the actual state off the on boarding screen. It's not complicated at all. Either the on boarding screen is active or isn't. It's a simple, true or force bullion value. Having said that, let's create a new property that were stored this value using the app storage Shelvey first under the following code. Inside the abstract at AB storage is on. Boarding bar is on boarding bulls equals. True as you can notice, we are using the app storage property of rapper for creating our newbies on boarding property that this initialized with the default true value. Basically, we said the on boarding screen Toby, visible for the very first time when the user lunch is the application in the app storage property of rapper, we declare a new lease on boarding key to start this bullion value. Having said that each time when they want to modify this property, then we must use this key to refer to its value in the user devotes system storage. The real benefit off this new app storage is that it not only reads and writes that are into the user defaults, but it always watches each value change off the key. And when a value changes happening, then it updates the why. Immediately, it's a quite convenient tool for us. Conditioner statement. Okay, don't key, we said. The state off the on boarding to True. Now it's time to create a new conditioner statement to make the on boarding functionality toe work. Enter the following if, as statement inside a new window group as I show you if is on boarding on boarding view as content you and that's it. If the value off the east on boarding property is true than the window group seen renders the on boarding view for us, if its value is force than the content, you is rendered on the screen. So far, so good. The logic is already done for this. On boarding feature, there is only one thing that is still missing. We need to make sure that each time, then the user stop on the start button. Then they exit the on boarding view and enter a new screen start button. We can do that by entering only two lies off court. First open the start but on view file and let's create a new property that were used. The is on boarding G to mutate its value in the APP storage and there the following court. Ed F storage is on boarding of our he's on boarding bull question mark. This variable is optional bullion by default, but when they user taps on the button, then we said its value to force. Let's do that right now. Navigate to the battle and replace the print function with this cord is on boarding the course for us, then use their tops on this bottle than the state off. The on boarding will be changed to force and the APP store Ridgeville immediately revoked Au i off the scene and refresh it. It's simple as that best thing, and that it goes. We can finish this lecture by destiny are fructose application in the simulator. Let's do it shall be built and ran the project. So far, so good as you can notice. Our first goal is accomplished. Then the up is launched. The on boarding is the rendered view in the new initial Seen off this rift. You, I apply lifecycle now that one off the start buttons and let's see what's happening. Did you notice the quick change? Are seeing view changed from the previously rendered on boarding view to the content You with the default welcome message all some job developer. You have just successfully developed the previously missing functionality off the on boarding for the book to Sepp. With that, you have not only learned some basic information about the recently released Swifty y at Life Cycle, but you got familiar with how it works in general to, as you already know by now, the new F file contains the scenes, and the scenes contain the views together APS since and use for a unified hierarchy off the program. I hope that you are eager to continue the development off this I us for tin application. As I am in the next class, we are going to create a They're designed the list for the encyclopedia off roots. It will be a short and fun at the same time. Until then, happy according and see what the glass 6. Learn how to create List View and retrieve data using ForEach loop: in this lecture, we are going toe cover. How to create a list you and retrieve that using a loop to accomplish this may be a need to create a separate row component for this place. By the end of this class, we will have a very design second screen with the necessary content inside it. All right, without for Dorado, Open X court and let's create a new file for this least row component. First, select this 50 I view template, then give it the name through it. Rove. You make sure that the destination off this file is the view folder and click on the create button just a quick housekeeping before we start coding. I have already entered some comments for the properties body and the preview. If you wish, you can follow maybe this practice as well. Now navigate to the review section and add these modifiers through it. Review layout size of that feeds bedding. Awesome. Now have you make the editor bigger by hiding the project Navigator pane and zoom the preview window upto 150%. So much better now. Pro component. Now it's time to create the actual row component This time we won't use any hand coded that are developing Valley out, since we have ordered you learned have to fetch that using the previously created data model at Loca data file. Okay, we start by adding the necessary property at the top of the file. Enter the following court bar through it, die both fruit right after this. As you may know, already, the preview stopped working immediately. Now we need to fix the broken preview by adding the missing perimeter to it. And, uh, fruit rove you fruit through its that zero be this code. The review will know what we want to display on the canvas. It is the first through it from the data file Super the error messages already gone, and they can start creating the layout for this component. First, let's replace the placeholder text view with a new horizontal stack container. Enter age spec. New comment and off h Steck. So far, so good. Now let's continue with the individual image. You, off the through it shall be Enter the following in court image through it image rendering mood or Regina re sizable. Scared to feed frame vits a d hide 80 alignment Center Shadow Kallur Kallur Read zero Green zero Blue zero Capacity 0.3 Radios free x two by two by grand Clean year Grady Aunt Grady, Aunt Grady Ent Colors Through it, Grady and Colors Start point Dope Endpoint Bottom Cordner Radios Aid Nice job. Please pay attention to the rendering mood view modifier at the top. This will prevented the image Toby colorized by the system Link color when we had these Roto the least and embedded later on inside a New Navigational Inc Our goal is to avoid the default system behavior as you get more experienced by developing many applications with Swift you I you he'll be thinking and planning your court away ahead. Just seeing the rest of the code is self explanatory. I think we can always check how these modifiers work by watching the layout changes on the preview window. On the right side, it's so easy to prototype and be with the layouts with Swift you I all right. The term Neil image is already done. Now it's time to continue the development with the title and the headline. To do that first, we need to create a new vertical stack that were contained. The text to use Let's do that as I show you Weise Thank Alignment Leading Spacing five decks Fruit title formed Guy told to Foreign Trade Board Thanks through it. Headline formed caption for grand color Color Secondary If you have some reviews experience with Swift you I Then you will find this title to modifier toe a new one and you are right , Swifty y two point or got some additional funds. STAIs, such as title to Title three and so on. Feel free to explore them using X courts called Suggestion Feature. Besides that, with the use off the secondary color and choosing a smaller phone size, the edit a clear priority between the title and the headline and period goes. As you can see, we have just their beloved the entire row component with a few lines off court. Our next task now is to implement this component into the content to you open quickly since our Project navigator is hidden therefore, I will give you a very, very useful T on how we can quickly open a file in X scored. Are you ready? Then followed me. Press the command plus shift plus Okies at the same time, and Xcor were show up a new surge bar similar to the sport light search on Mac OS computers . Now we need to just enter the first letters off content you file and choose the right one from the available options, as I show you. With this shortcut, you can jump from one file toe another quickly with these least all right, enough with the door. And let's create a list pool of the through its Shelvey. To do that first, we need to create a new variable that were store all of their through its that and that the following code snippet bar fluids die both through it because through its data, nice job. This court should be familiar to you, since we use the similar round for displaying cards on the on boarding screen. Now it's time to tell the review, but we want to be fetched at the following perimeters to it, content you fruits through its that, uh, great All the prep work is done. Now we can develop the layout for this content for you. First, we need to greet the main navigation view for this scene and there The following court navigation view. NewCo meant end off navigation Super inside this new navigation replaced the placeholder Welcome message with a new least view as I show you police, Then add a new forage Look to this list for you for each through its idm in. As you may notice, this loop fetches all the loca that are using that previously I did through its property. The only thing that we need to do now is to display the custom row component inside here and call the individual through it one by one and, uh, through it rove, you fruit item. And here it goes. The preview window is already updated and we can see a list of through its on the campus. It needs yet one small refinement in my opinion. And, uh, that dink vertical four by debate is for tika. I think we're give more space between each row and make it more appealing for the I is in that cool. Is it Shatford metodo? What about having more fun with this list since the loop fetching the through its from the data file in order therefore the least remains always the same. But hey, we can add to it. Some love by shuffling them, and you will be surprised by knowing that there is a special method for death, and we don't have to write any fancy custom function to achieve this functionality, navigate to the through its property inside a loop and add these short Madore for it through its Shatford. Then wait for a sec until the preview updates the least and that, uh, as you notice, the rows are already shuffled in the list. It's quite amazing how easy to build something cool of its rift. You I But before we call the day, that is one more thing that is still missing at the top of this scene. Can you figure out why there is a noticeable white space at the top of the list view? And yes, you are right. This place is preserved for the navigation title that we need to add as a modifier inside it to work properly. Let's do it right now. Shall we jump to the end of the least view and edit, dismissing modifier to it navigation title fruits. It gets the large title appearance by default, but when we scroll down, it will be exacted as an in light title toe, the sticking navigation bar in I US 14 Life Review. Having said that, let's start the life review and watch how it works. Navigate to the preview window and start the life review by clicking the play button on the toolbar as I show you. As you can see, the preview starts the building simulator and re renders the content view. Most not Disable that there. Rose are shuffled each time when we start a life review, as I show you when I stopped and restarted this thing. By the way, if you are on IOS for teen on your test device, then you can test the fructose application on it as well. Having said that, let's build and run the application in the simulator now after then beat up on the start button. Then the on boarding scene is replaced that they knew scene and we can see the list of the fruits. It's pretty amazing is ended. I hope that you enjoy this lecture so far, are freaked us gets better and better. After finishing each lesson in the next class, we are going to create a new so called detailed view for the individual through it and displaying all information about it in detail. Until then, happy coding and see you at the class. 7. Learn how to create a Detail view layout in SwiftUI 2.0 - Part 1: upto this point. We have finished creating an on boarding screen and the second screen the least off through its looks. Amazing. But there is no additional functionality attached to it. Now it's time to add a working navigational link to each least throw. So when users upon them, then they will be navigated toe a detailed view. There are many topics to cover in this two part class and that were takes some time by the end of this class reveal finished developing the majority off this new screen. So without further ado, let's start coding, All right. First, we need to greet a new Swifty Live you file for this detailed view give you the name fruit detail view. Seems it's considered to be a man seen. Therefore, we are going to select the APP folder for its destination. As you may notice, I have already and third, some comments for the main sections in this file Feel free to fall over this practice or skip it as you wish. Okay, Now we are going to create a new property and practice once again have to refer to the data model ender var through it through it. This is mostly for beginner developers later on. In this course, we will cover more advanced methods for this kind of data handling. No surprise here that the preview is broken. Let's we exceed by adding the missing argument for this. For a meter Chevy enter through it detailed view fruit through its that zero. With this court, we are going to fetch all of the information for the first through it from the Loca data file. It's blueberry Great job. The error message has gone. Now replace the default placeholder. Taxi that title off the fruit, Enter text fruit guides or see the preview is already updated, and there is the title for the actual fruit. Always some jab. Now, before we continue the development off this detailed view, we are going to make a small detour. Our goal is to learn how to connect the least you with this detailed view Navigational Inc . To do that first, we need to open the content you file Nice now navigate to the for each loop and insert the cursor into the new line as I show you. After that, let's create the navigational link with this junk off court navigation link destination. Fruit detail view fruit idm. Now move the through it, Rove you inside this navigational Inc. As you can see, the destination is the recently created almost empty grew it detailed view with the necessary fruit item barometer. So when a user tops one off the rose on this least this perimeter, you refer to the actual through it from the data file that will be displayed in the details view later on. Nothing complicated here. You have just need to get usedto have this navigation system works with swift You I since both para meters are identical in the through it Rove you and the through it detailed view . Therefore, disconnection should work without any egregious Let's test it using X courts Life Review Shelvey Click on the play button on the preview stool bar and this this navigation system and here it goes, Then the click or tap one off the rose than the detailed view should be displayed with the platform. The Fort Animation Let's do it again. All of some job. It works without any problem. Please pay attention to the navigation bar in the detail view. As you may notice, there is a back button automatically provided by the operating system. No need to manually handle the current and the preview states in the navigation hierarchy. Swift you ice navigation view and navigation link Automatic ALS handled this for us for free. It couldn't be easier, in my opinion. Just a quick question. Do you remember that in the first lecture we modified the globe are accent color? Yes, you are right. This back ling should be in blue. But thanks to the previews, changes its black in the light more and buy in the dark mode. Great. The first mission is already accomplished. At least you and the detailed view are successfully connected to each other. Detailed view. Now it's time to continue delay of design off the details. You open the through it detailed view file once again and start working on it. First, select the title in the body and catty Tyto directly board as I show you. After that, let's create a new navigation view inside the body. Enter navigation view new comment, end off navigation. Then we need to add a new vertical scrolling view. Inside this navigation. Enter screw all of you vertical shows indicators Force new go meant end off scroll. Since I am not a huge fan off the scrolling indicators, therefore we make it hidden. Now it's time to head them in vertical stack container. Into this scroll view. Enter the following code These thank alignment center spacing 20 newco meant and though these thank nothing fancy there. But we want to be sure that there is a 20 points space between the elements inside it. Finally, we can base the title inside this V stack from the clipboard. Super. Now we are going to embed this text view in tow. Another new visa back inside the primary container as I show you by common class clicking on the tax Next had the following, but I meters through it these thick alignment leading spacing. 20 You comment and though these thanks then at some new modifiers to it as well. Bad ink. Horizontal 20 frame mark Sweet 640 alignment center. This will not make any difference on the iPhone screen. Rather, on divide I dress screen basically be separated the heather and the rest of the content from each other. The reasoning behind this in one hand that on device iPad screen Vivendi heather toe feel it out horizontally from edge to edge. On the other hand, the vendor contents view Toby narrow and centralized on the screen. I think that we always should think ahead and designed the layout in such a way that it supports the bigger iPad screen as well. Having said that, this basic iPad optimization is then with the help of this inner V stack, and it's maximized size on the center of the screen. All right, before we start adding the individual you I elements into this li l. I would highly encourage you to keep your court always need by being commenced through it. You can follow me by a dink. New comments for these new you I elements enter new comment. Had there title headline No trains Subheading Description link. By doing this, you see how easy to code and not to get confused about what court there to enter Title video started the text based content first. More specifically, we are going to add some cool modifiers to the title of you Enter the following in court formed large title foreign trade heavy for grand color fruit Grady and Colors. One. So far so good. You can always check out the results on the review in though. Headline now navigate to the headline section and enter Thanks, Fruit Headline formed Headline, multi line text that I meant bleeding. Easy peasy, isn't it? Next subheading We are going to skip developing the nutrients. You Why for now, since it has a quite complex design. Therefore, video developing in part two off this class, that's why jump to the section off this up heading and enter the following court. Thanks. Learn more about backslash open Prentice's fruit title, closing Prentice's uppercase form to wait Boyd for grand color Through it, Grady and Colors. One. Wait for a sec and check it out on the preview. As you can see, we have just inserted the title into a new text view and made its design fancy with some cool modifiers. We call this technique string interpolation description. It's time to head the longer stacks to this layout. It will be the deck scrip sh in with all information about the individual. Through it, enter thanks through it description, multi line text that I meant bleeding. And here it goes. This long content will feel out the whole screen and beyond it. That's why we had to insert the main content forever into a scroll of you. Heather. After adding all of these you I elements toe the detailed view. Finally, we can have some fun with creating the heather component. To do this, we chose to develop it separately from this file, select the view on the Project Navigator and create a new safety. Live you file. Give it the name through its heather view and save it. I have already separated the main sections from each other with some comments. You can do it as well now navigated to the preview and at a new modifier to it as I show you. Preview Early Out Peaks with 375 height. 440. Okay, dokey, let's add a new property to this view. Shelvey var Freud die both through it. After that, let's weeks the review. As many times before, I'm sure that you know that Israel, through it Heather view fruit through its that zero. I can't wait for teaching you how we can inject this using a more convenient way in one of the upcoming projects. But hey, practice makes perfect, Great all of the prep work is, then it's time to develop the headers design. We start with replacing the default placeholder text with a new disease that enter disease that NewCo meant and off disease. That then let's add a new, greedy and color as an individual view for the Bottomley air off this stack. Shelvey Enter the following in court. Linear, greedy end. Grady and Grady End colors Crew it Grady and Colors start point top leading endpoint but on trailing. For this view, the added a dia gona Grady and color. Next, we need to maximize the high off the heather view at this modifier toe disease stack frame . Hide 440. Finally, we can add the image on top of this nice Grady and color image. Fruit image. Very sizable. Scared to feed shadow color color read. Zero green zero blue zero opacity. 0.15 Radios, Aid eggs seeks Why aid bed? Think vertical 20. And here it goes. How cool is that? Just a side note. This vertical padding is mostly useful on the I Bet screen. Great. The design off the heather is then would it be called to animate the through it image here as well. Let's do it animation. First, create a new property that we store the state off the scale effect ender at ST Private of our is any mating image, bull equals force. Now navigate to the end of the Z stack and add a new modifier to it on a Pierre. The animation he's out duration 0.5 is animating image equals. True as you may notice, this animation we start each time than this view appears on the screen that were take off off the second long. Now the only thing that we need to do is to decide, but and have to animate on this view. I think that a simple yet well visible scale effect would make it work. Having said that, that's at this new modifier toe. The image you skill effect is animating image pressure. Mark 1.0 Callaghan, 0.6. How does the scale effect work with the animation? Basically, it starts with the skill to them image that we're scale up swiftly until it reaches its original size. Simple yet I catch animation. We have already finished here. Now it's time to insert this header view inside the detail view. Open the fru it detail, view file and navigate to the Heathers. Comment. I am sure that you already know have to insert a view into another view. Enter fruit Heather view Pruitt Fruit And here it goes. But wait for a sec. I'm not sure about this huge empty space at the top. Is there any way have to get rid off it off course. Let me show you how I will do it. We need to tackle two things to get rid off this empty space. First navigate to the end of the main V stack container. Then let's add a new navigation bar title to this view. Navigation bar title, fruit title display mode in line. We decided to make its design in line. Do you see it on the preview? That's right. The only thing we need to do now is to hide it, and we can do it by adding this new modifier to it. Navigation bar he didn't true. See, it's much better now, but what about the safe area at the top of the screen? We can make the entire school of you ignore it and that the following in court as I show you. And just ignoring safe area dope. Wow, What a great improvement. Do you like it? I hope so. With this cold disease that with the greedy and color inside it will a Q by the safe area. Please keep in mind that these Jews and colors meant Toby work nicely in the safe area without disrupting the users looking at the toolbar blinker view. All right, Our layout design is almost done. There is only one more thing that remained for the end of this episode. And this is the Swifty wise new blink view. Since the main information about the fruits is provided by Wikipedia. Therefore, I think that it would be nice to learn how to use the new link feature in Swifty. Why vile? Give them a credit at the same time, we are going to make a custom component for it. Okay, enough with that work. Let's develop it right now. Chevy first, select the view further in the project navigator, then create a new swift. You I've you file as many times before in this course give you the name source Lee interview and save it. Now jump to the review and at this modifier to it. Review layout sighs that feeds This will help passed over when its layout more efficiently and checking it out on the preview in the bad ink. After the spread work, we are going to replace the default placeholder tax with a new element in Swift You I 2.0 enter the following court group books This new group books you, I element provides us a container with a very sleek design. But to see in his full potential, we need to add some content inside it first. And they're all elements off this link component and let's discuss them after when we can see it in the preview, they just think thanks. Contents Source. Spacer link. Wikipedia destination. You are ill. Sprink https slash slash Wikipedia dot com Explanation. Mark image since them name and Rio um, right square formed food note. Okay, Dokey is then, As you can notice, this new group books you. I element has got a nice light gray background color. Not only that, but it's also designed, including this background color Toby, fully adaptive. So in the dark appearance, it will change its roof automatically. How cool is that it's worth mentioning that these group books has a title para meter as well, but this time we don't want to use it next. As you can see, we put all content inside a new horizontal container and there is a good reason for that. These group books behaves as a verticals, that container, so everything we put inside it, it will be displayed vertically. Another new feature off their latest 50 wife, remember, is the link view here We provided attacks for its title and then the U R L with the necessary website address, as it must have Roberty, since we didn't add a dynamic property for it, Therefore recalled safely, force unwrapped the U. R L. Optional. This website address off Wikipedia is certainly a valid U R L for us. Finally the added and SF symbol within a row at the end of this line. This will make sure for the users that this is an external website ling super duper, these two new you I elements will make the detail view even better. So without further ado, let's insert this link component inside it. Open the fruit detailed view for the last time in this class and navigate to the links comment line after then. Enter the following in court source. Link view. And it's then would you like to test it in the Life Review? Let's do it. Scroll down to the end of the detail, view and check. Have this new component works well, Not bad at all, But there is one thing that bothers me a little bit. The first thing that you may notice that the component is too close to the destination view and the bottom of the screen. You know, there is a handlebar that, unfortunately, the life preview cannot show us. But if we test in the simulator or on the real iPhone, you definitely notice the weakness off this layout to fix it. We just need to add some vertical padding toe this component as I show you enter bad ink top, then bad ink. Bottom 40. By the way, we don't have to stop the life preview, since it updates the scene automatically after each change we made. Now check it out again. See, it's much better now, in my opinion. Best thing now it's time for the final test for this class. Let's build a randy project in the simulator or on your test device running I us for dinner . After exiting the on boarding screen, we can enter the second screen with the list of the fruits. Now that one off the rose inside this least and let's see the detailed view. And here it goes. We can see every interesting information about the fruits. And as you can notice, each ruit has got its own title and sub header. Color is in that goal. Is it? The design off this look to set is juicy and colorful. I hope that you enjoyed developing it. What about testing the link component? Click on the link in the new Group box You, I element and let's see what's happening as you may expect the default suffering, even though lunches immediately and opens the Wikipedia website address. Awesome job. As you can notice, we can even jump back to the frutos up in no time using the system back button. Isn't that great, is it? Now, I would like to thank you for finishing at this long lecture. In the second part off this class, Revere developed the missing information books with the nutrients. It will be short and fun. Until then, happy coding 8. Learn how to create a Detail view layout in SwiftUI 2.0 - Part 2: in this lecture, we are going to finish up the detail view by creating an in four books for the new trends off the fruit. To do that, we were used to you I components that are new in strict you. I passion, too. You've you see how easy to develop this interactive user in their face and tested using X Courts Building Life Review feature. By the end of this lecture, users can unfold of lt designed the information box with all of the nutritional value that freed can contain. All right, without for Dorado. Let's get started. New trance First, let's create a new swifty. I've you file for this in four books? Component. Choose the View group as a destination for their 40 as I show you. Then select the swift. You live you template and give it the name fruit nutrients view. You may notice that I have already entered some comments for the main coding sections off this file. You can do it as well, if you wish. Okay, now I will hide a project navigator and make the code editor bigger by doing that, after then, click on the Settings menu on the toolbar off the preview window and change their color. Shame from light to dark. Appear IUs next navigate to the review block and add the following modifiers For this for you and, uh, review Lee out fixed kids 375 height 418 then another one as well. Petting super. We can even zoom in the review of in though if there is enough free space to feel that on the canvas After all of these scrapper, we can finally start developing this in four books. We start by adding the necessary crude property to this view. Enter of our fruit. Die both fruit as usual. We need to fix the error in the preview add dismissing our human to it Fruit nutrients view fruit fruits that zero be that now we are ready to display their first fruits that are inside the new in four books. But before we start this design process, we need to create another property at the top of the file This new Arabian contain all of the labour tax for the different types off nutrients enter the following court lead no chance array offspring because and RG sugar fed protein. Right Amis menorahs. We are going to use this property not only for displaying their labors off the new trends, but it will provide an index value as well for the loop. And we are fetching the information from the local data file. You will see how it works. Shortly after we created the group Books Container Disclosure Group now navigate to the main body off this view. And let's create a new group books and, uh, group books. New comment. End off books. Nice. Now move up that the fourth place or they're taxed in tow. This group this will prevent getting an error message. Since we could return to this view. Only one view at the time and this will be their group box. Okay, As you can notice, in the preview window, there is a new group box with a dark grey background color. Now it's time to add a new disclosure group in the title into these books as I show you this closure group nutritional value but 100 gram, then moving the text window into this disclosure group as well. Just wait for a second and look at the updated review window. See, there is a group books with the great background color and inside it we have a new disclosure group as well. So but you should know about this new you I element in this 50 wife framework. Well, this disclosure group view presents a disclosure indicator and content inside it. First, as you can see in the preview window, the content inside it. In our case, the hell over thanks to you is hidden by D four. Secondly, you can find an indicator called Chevron on the opposite side off the title. See, it will be automatically rotated with a smooth animation each time than someone taps on it . Now let's start the life preview and test. Have this disclosure group works. Shall we click on the start button on the toolbar after that Creek, Wanda, Chevron Button and Unfold the disclosure group We should see a hell over revealed as a content off it. The logic and the fording states, including its animation, are all automatic and provided by the swift. You I framework under the Houthis Disclosure Group user interface element, bounce to some sort off bullion property that determines whether the content is currently visible or doesn't off course. We can manage that manually. But in this introductory lecture, we are just fine to use the automatic behavior. With that, the need to create a new property toe Handle it. What do you think about it? It's so cool and convenient. But we won't stop here because now we need to replace the placeholder tax. Did the nutrients values Shelvey? First, my command plus click on the name of the text View a new contacts. Sure menu of your show up. Now select the repeat option from this menu and Xcor via provide as a well formatted blueprint for the for each loop, we just need to modify its perimeter as I show you and, uh, for each zero less. Then nutrients don't count. I d backslash sev this code. We repeat the content as many times as many elements are in the array off the new chance. In this case, we have six different elements in there, Ray. Besides that, we are using the strings itself from this array as an i d. By doing that, this for each loop can differentiate the I attempts from each other. Okey dokey. Since our goal is to display the new trends as a content off this disclosure group. Therefore, we need to work on that more. First, we replace the hell over and insert the labour off each nutrients. Enter the following court. Thanks nutrients Item. As you may notice, we are using the item as an index to refer to the actual string off the nutrients label. For example, the first labour is the energy. The second labour is the sugar. The 3rd 1 is the fat and so on. We can test it by using the Life Review feature on the preview. Let's do it. Just wait for a sec and click on the Chevron Indicator as I show you. And there it goes. The disclosure group has revealed the new content with the labours off the nutrients. How cool is that Off course? We can do it better by adding the actual values off these nutrients besides these labours. So let's do that right now. First, let's embed the labour into a new horizontal stack container Center page stack spacer Thanks through it. Nutrition item. All right, since we didn't stop the last review, therefore we can test it out without any hassle. Just click on the Chevron indicator and check out the results. See, they are not only the labours, but the actual values off the nutrients in the content area. Do you like it? To be honest, this default lane design is quite boring. But hey with adding some additional modifiers here and there, we can make it much better. Just follow me, navigate to the labor and insert it into a new play in group and at a new image you inside it as well. Group image. Cease them. Name being four circle if you wish, then you can check it out in the Life Review to not a bit, but we can make these design more appealing by, I think color to it. In my humble opinion, never get back to its court and enter the following modifiers to this group. Four Grand color Fruit Grady and Colors one formed, formed Cease them body board. Now let's see how it looks in the life Review Shelvey. By the way, if you are new to Swifty, why then it may help you to understand that by adding modifiers toe a group indicate all styling results. Toby affected one bold elements inside it. That was the primary reason to embed detects and the system symbol inside this group. And what do you think about it? We can still find more way to improve its overall design. For example, navigate to the spacer and modify it as I show you spacer. I mean Lang 25. This will make sure that the labors and their nutritional values won't be so close to each other, especially on smaller affluence. Let's tested. Okay, it's slightly better now. Now we are going toe had a very important modifier toe the values and, uh, multi line text alignment trailing. Let's try it out. The result is a views in the life review. We are almost done, but one thing is still missing. In my opinion, the rose inside the content area are too close to each other. Having said that, I think a teen align with some padding between each row could be beneficial to this design . Okay, navigate to the for each loop and in there the coarser outside the horizontal stack container. As I show you then entered the following court divider. Bad thing, Vertical to and let's check it out. Last time in the Life Review, Shelvey unfold the disclosure grew by clicking on its Chevron indicator. And what do you think about it? I think it's perfect. All right. Now it's time to insert this well designed custom disclosure group into the detail view, open the through it detail, view, file and navigate to the section off Nutrients values. I'm sure that inserting the recently created component is in that heart to you just entered this one line off court through it. New trance view through it prudes the always need to wear the necessary perimeter. For it seems we are fetching information from the local data file. It shouldn't be a big deal after watching or lecturer still now. Best thing. Awesome. We are done here, and, as always, we are going toe does the fruit juice application in the simulator, as we always do at the end off each class. Let's build and round the project Shortly after the simulator has launched, navigated a detailed view in the Encyclopaedia, and there's the new disclosure group You, I component, as I do as many times as you wish. Its design and indirection are quite amazing, as I see to develop this feature for December. Surprisingly easy the Swifty wife, remember, helps us to make better use that in their face elements with less scored for sure. And designing this new feature wasn't an exception from that, either. Having said that, in the last part of this tutorial, we are going to create a great settings view and get familiar with more swift ey features. Until then, happy coding and see you at the class. 9. Let’s create an outstanding Settings View - Part 1: Every application needs are valid design settings view, no matter what vile we are creating these outstanding settings view, we will focus on the following topics. First, we are going to create a settings view and learn how to present it as a sheet on top of our existing view with Swift U i. Secondly, we via learn that the difference between a goal and a great Swift UI app often comes from their little design, the tears. By the end of this lecture, we will finish up the first part of this series without further ado, let's open Xcode and start coding settings Sheet. Alright, first we need to create a new swift file for the Settings. Select their swift UI view template and give it the name settings view. Make sure that the destination folder is the ABC group and save it. Nice job. You may notice that I have already entered some comments for domain coding sectors for the file. Moreover, I chose the dark periods for their preview as well. You can follow me by making these modification on their window as valley, if you wish. Ok, first we are going to add a new navigation view to this and the following code. Navigation view. After that movie in their default placeholder text into it. New comment and off navigation. Now let's add a new scrollView inside this navigation view to enter. Scroll View. Vertical shows indicators for us. Yet again, movie in that text view into the Scroll View. New Comment, and scroll. Now make visible near context menu by command. Click on the name of that text view as I show you. Then the let's embed this text view into our new vertical stack container. Easy-peasy. Now at some parameter to this v stack, enter V stack Spacing 20, new comment and off the stack. So far, so good. It's time to add a new title or the navigation view. To do that, we need to add the following modifier to the VCE stack. Navigation bar, title, tags, settings, display mode, large padding. Do you see the large settings title on the preview window? Great job. This means their sheets. As you have already seen as Sheet View on iOS before that for, you know, for sure that he can just swipe down wards there sheet and these gesture via the space that she automatically the WT and functionality provided by the operating system. However, I am going to show you how to dismiss a sheet programmatically by adding an x mark symbol to the navigation bar. But before that, we need to create a new special property. And that they're following quote at the top of the file. Add environment. Backslash, presentation mode, var presentation mode. This ad environment probative wrapper allows us to create properties that store values provided to us externally. For example, is the user in lite mode or dark mode? What time zone are they on and so on. All this information and more are values that come from the environment of the device. In this instance, we are going to read our views presentation mode from the environment. The presentation model phi view contains only two pieces of data, but both are useful. A property storying whether they're settings view is currently presented on the screen and the method to let us dismiss the view immediately. This recently created Presentation mode property is attached to the presentation mode variable stored in the apps environment. Now navigate to the end of the stack and add the following modifier to it. Navigation bar items. Trailing button, action. Presentation mode, rapid value, dismiss, image, System name, x mark. Feed these chord. We have just created a new button on the navigation bar. As you can see on the preview window, these baton displays and x mar on the right side of the navigation bar. Moreover, these baton also has an action. So when a user taps on this button, it will dismiss these settings view from the top of their content view. How does it work? The key thing here is that this mismatch of the presentation mode property don't be confused by the rapid value. This rapid value in there is required because their presentation mode is actually abiding soil. It can be updated automatically by the system. We just need to dig inside it to retrieve the actual presentation mode to this means less settings view. Okay, enough with that 4K LED, see it in action Chevy. But before we can test this dismiss button, first, we need to create the missing sheet. To do that, first and foremost, opened their content view file and let's create a new property. Enter at State. Private. Var is showing settings. Bool equals force. This new property, we are tracked their state of whether they're sheet is showing or isn't on the screen. It's a simple true or false boolean. And VR going to hide their settings sheet by default. Now that we are able to track the actual state of their she'd, therefore, we can finally created by adding a new modifier to our button on the navigation bar. Navigate to the end of the list view and add the following modifier to it after the navigation title. Navigation bar, items. Trailing. Button. Action is showing settings equals true. Image. System name, slider, horizontal, three, new comment and off button. This will display a new button with assist them symbol on the navigation bar, as you can see on that review. And met our user taps on this button, then it will modify the value of that is showing settings property to true, meaning that the van to show up this sheet. However, the most important thing is Thiele missing in this logic. Lets clear the actual sheet by adding this chunk of code to this baton sheet is present it dollar sign is showing settings. Settings view. We these new sheet modifier, we can finally show their settings view in our sheet each time when the value of this is showing settings property changes from false to true grade. We are done here. Now. It's time to test our work in their simulator. Beard and ran the project testing. After the fructose herpes launched in their simulator. Tap on the button on the top navigation bar. Uh, let's see what's happening. See, I knew she'd window is shored up on their screen on top of their content view. How cool is that? You have just learned not only have to show a sheet you on top of another view, but hard to dismiss it programmatically using a button presses as well. Great job settings view is the half-time of these tutorial. From now DOD end of this class, we are going to develop the first section of the settings view. Having said that, that go back to their settings view file. And let's add some new comments with a marker for each main sections of their content in their body. Shelby. And New Comment. Section one. New comment, Mark, Section two, new comment, Mark, section free. Super. We start with the first section, as I told you, enter the following chord. Group box, Labor, Tax, fructose, uppercase. Then moving there placeholder text into this group box. As you can notice, unlike previously, this time v added a label for this box. Now we need to wrap this labor into a new line. As I show you, this field had asked to make our code well aligned when we start work on it further. Great job. Since v van to develop a grid designed to these settings view, therefore, reveal add more design elements to this group box. We start by embedding the tax labor into Anu horizontal snack container. As I'll show you, it shouldn't be a hard task for you, in my opinion, age stack or some. Next, add these one-liner modifier to the end of the text. You font-weight, bold. Then add a new space sir, inside the H stack space or. And finally, let's add a system symbol for this labor as well. And image System name in for circle. And as you can see in the preview window, we have just created a nice labor for this group box. How cool is that? Now we cooled, continue adding some content to this information box MAT. I would like to stop here and think about the whole design that we want to create for these settings view. Since we want to create two more group box for these settings view. Therefore, it will be nice if he cooled, optimize our development somehow. For example, by creating a reusable component for their group box could help us later on when we are going to add the second and the third section to the Settings view. Great, now let's do it. To accomplish this code optimization goal first, we need to select and copy the H staggered blog in this group box. After that, we can create a new swift file for this new labor component. Labor component, select des VFT UI view template and give it the name. Settings liberal view. As I do, make sure that the destination folder is the view group and save it by clicking on the create button. So far so good. Now let's add the following modifiers to their preview, Chevy settings, liberal view, preview layout, size that fits. Padding. As you may probably notice, I like using their size that fits modifier, especially for creating custom components. Now it's time to replace the placeholder text with their code snippets from their clipboard pays less that D h stack inside their body as I do. Then wait for a second until they're preview, updates its window super. Now, we can make the static view to become a reusable component. To do that first, we need to create a new properties at the top of their file, van for the labor text on the left side. And the second band for the system symbol on the right side. And var playable tax string, var Lieber image, string. As you can see, we didn't give these properties any default value we add. That's why it breaks the preview immediately. Don't worry, we can easily fix it. Just click on the red circle on this error message. As I do, it will propagate all of their properties and they're missing arguments with our placeholder for their labor texts and tear the smoke data fructose. And for their label image editor, this info circle and see the error message is Gan and they're preview works again as before. Our final task here is to replace less static data inside the H stack me their properties. Let's start with the labor tax and tax, labor tax super. Now let's jump to the assemble and enter this one. Image, System name, labor image. And that's it. Now preview is already outdated by the Stam using their perimeters and the mock data that we added net so long time ago, we shouldn't see any de France because we chose to use their same values, but that's enough for us for now. Now, open their settings view again. Uh, let's insert this new component into their group box. Shall we navigate to the group box and replace the aesthetic H stack with our new labor component and settings labeled you. Labor, Tax, fructose labor, image, info circle. See how easy to create annual label for the group box. In the following lectures, we will use it immensely. Now, we can finish up this class by adding some cool content to this group box. It should be a routine job or you. So let's do it right now. First, we are going to add a new divider between the label and the content and divider. Padding article. For. Nice start. Now let's embed that actually into a new horizontal stack container. As I do. H stacked alignment, center, spacing ten. So far, so good. After that, let's add the logo image inside this container. Ntds CT image, logo. As you can see on the preview window, this logo is huge, yet it's shapes are Chris has sharp. We are using a vector SVG file format to make it look better. Okay, now at the following modifiers through it. Resizable. Scared to fit. Frame. Bid 80, height, 80, coordinate radius, nine. Super-duper. The fructose logo is already placed in this group box. Our final task is to add some text based content beside it, Chevy. And most fluids are naturally low in fat, sodium, and calories. None have cholesterol. Fluids are sources of money as censured nutrients, including potassium, dietary fiber, vitamins, and much more. Now, let's make is one size smaller. By adding this modifier to that X3 you formed footnote. Just take a look at that review and check out the first section of the settings view is in that impressive, is it? And guess what? We can call that day because we completed all of their tasks for this lecture that we planned before. And as usual, we are going to wrap up this class by testing their fructose application in their simulator or on your test device. Let's read around the project for the last time. Testing. Nice, the fructose app is already blanched. Now in their second screen, that wonder setting symbol on the navigation bar. Uh, let's have a look at the settings view that we have just developed. Its design is so cool, is indeed. We can even switch from light to dark mode to test it as well. As you can notice, the new group box user-interface element is vth UI provides us an easy and convenient way to design these containers for different kinds of information. I just loved Swift UI and hold you to because in the next lecture, we are going to work on these settings view per the until then happy coding and see where the class. 10. Sui2 app 01 chapter 11: In the second part of creating a Settings view series, we are going to develop a new section with some information. As you can see, this information box contains several rows. While on one hand, there is a tax on the left side of the box. On the other hand, that is another vertex on the right side. At first, it seems to be pretty easy to create such ileal with Swift Dui. However, as you may notice, some rows contains executable links. For example, if we tap on their website link on one of the rows in this example, then it will open iPhones Safari browser and go to their website address. To give this reusable component more functionality, they are going to develop a useful logic 40 with a conditional statement. By the end of this lecture, we via create not only a new section for the Settings screen with some additional information might reveal, add new functionality to eat as well. All right, without further ado, let's open the settings view in Xcode and navigate to their Section three. Now let's add a new group box container there and group box label Settings, labor view, labor Tech's application, labor image Apps, iPhone. As for the content, we start with adding a new divider. And they're, they're following code. Divider padding, vertical for so far, so-called. Now let's create the first row for its content. And H snack tags. Developer, foreground, color, color, gray, space, sir. Tax. John. Jane. Super. The preview window is already updated with this new section. As you may notice, we have just reuse the previously created Lieber component of their group walks. How cool is that? Now the bed at all? But more to come. Just followed me. Settings row. As I told you at the beginning, they are going to create a new reusable component with some conditional logic inside the for the settings row. Let's do it. First select the whole block of H stack, then copy to the Clipboard as I do. Secondly, let's create a new swift file there. Select their swift UI template in their popup window. After that, give me their name, settings, row View, then make sure that it's destination is their view folder. As I show you. Finally CBD by clicking on the create button. Okay, as you can see, I have already added a couple of new comments for their main code sections in this file. Now, we are going to add some new modifiers to that review before we start working on the layout, enter preview layout. Peaks with 375, height. The padding, this fixed sized window did some additional padding via represents a row in that group box. If you wish, you can zoom in on that canvas as well as I do. Nice job. Now, we only need to do is to pace the age stack inside their body, replacing the default lease holder tax. And curated goes after all of this preparation. Finally, we can start working on this row. First, we need to create two new properties. Enter the following code. Var, name, string, var, content, string. None of these new variables have values. So it doesn't surprise us when they're preview window stops working as many times before. Click on the red circle on the error message and let Xcode help us. Great. Now for the name property and their, their following, more quieter you name developer. Then for their content added this one, John, Jane, super. The error message has gone and the preview works again. Now let's replace the aesthetic string values of the text views inside each stack. Enter tags, name, then continue with the second TextView, tax content or some jab. Until this point, we haven't learned anything new. We have just practice that we have already know by now. Conditionally out. Things are getting exciting when we create a new conditional logic for this layout, our goal is to create 2D frequently outs with different content inside them. To do that, first, we need to modify this content and make it optional. Let's do that. Navigate to their contents property and enter var content string question mark equals nil. With this code, we created an optional property called content. And this optional variable is a type of string initialized with a default Neil value. This neil means empty in this case. This nearly is very important for us because we can use it in our conditional statement later on. Now, let's create two new properties for the link view Chevy. The process is the same. Painter. Var blinks, labor. String, question mark equals nil. Var, link, destination, string, question mark equals neil. Both of them are types of string and both of them are initialized by Daniel Okey-dokey. As you can notice, our code is broken and the Xcode compiler is warning us to unwrap the optional property in their body. And that's what we are going to do exactly shortly after we created the first part of the conditional statement. And just follow me step by step. First command plus click on the name of the text view and select the make conditional option from the contextual menu as I do, as I showed to you, this row will have two differently outs. A layout, we test static text inside it and another layout, Bhutan executable link view inside it. Now we are going to check whether the first condition is true. To do that modified the if else statement, as I showed you, if content is not equal, Neil tags content. Now click on this red circle in the error message and select their force, unwrap option. Ls. Then make sure that we display an empty view in the statement for the safety of this chord. Empty view. Just a side note. You may have heard before that force and wrapping an optional value using an explanation mark is a bad, bad coding practice, but not always. And there are some exceptions to that too. In this case, if they are content property, got any string value, then we can safely unwrap it and displayed in the age stack. If this first condition is true, then are called veal exit this if else, statement and VV, you get a row displaying the simplest static content no matter what. Okay? Our code works again, but nothing changed. And you are right, we have just finished developing the first part of the logic. It's time to insert another conditional segment to it. In this section, we will check whether the link label and link destination properties have any values. Enter the following code as if blink label not equals nil. And blink destination not equals nil. Link, link label, exclamation mark, destination, URL, string, HTTPS colon, forward slash, forward slash backslash, open parenthesis, blink, destination, explanation mark, closing parenthesis. Explanation mark. Image. Sees them name. Arrow up, right, square, foreground, color, pink. Lots of things are going in this code. Let's analyze it line-by-line briefly. First, in the as if line, we check whether both the link label and the link destination have any values. If the answer is yes, then all caught in this block will be executed. In our case, VEVO display a link view that is new industry F2y version two and assist them image on the right side of the row. We needed to force unwrapped both properties in the link view and the URL. Besides that, we use string interpolation in the URL as well. Bulky enough, we dare talk. As you can see, the compiler is happy, Soviet are happy to. Multipled. Previews are called, seems to be working. But how can we be sure that the conditionally at is working to one very useful feature of the new canvas and review system in Xcode that we can create multiple preview windows and test our layout design with them. Let's see it in action. Shelby, first Nestle conduct plus button on the toolbar of their preview window that we're duplicate it. Nice. Now, for the fun, let's make is a periods from light to dark. Click on the Settings button. As I show you, then change their color shim to dark from the drop-down menu. You can. This means these contacts menu by clicking on their canvas. Wait for a sec and hurried goes after all of this, navigate to the bottom of the file. As you can see, there are two reviews have been put in a new group view since the first review is fine. Therefore, we are going to work on the second 1. First, select the whole content of the row and daily at it. Then my starting typing the open parenthesis, the autocompletion will show us new recommendations. The first one only contains the name parameters. This is a mandatory one. Hence, we didn't change D to be optional because we always want a name in the row. Okay, the second recommendation is then you want with all of the available parameters now, and they're, they're following mock data to test the second condition for the layout name, website, link label, Swift UI Master Class. Link destination. Swift UI MasterCard's dot com super-duper. As you can see, not only their compiler is happy with our code by the previews are two. Now it's time to implement this component in the settings view. First opened their settings view file again and simply replace this that th slag me. They are new component Chevy. And there the following code, settings, row view, name, developer, content. John, Jane. Nice job. The first row is already added to this box. Now let's continue with two more rows until the first row that contains a link view and settings row view, name, designer, content, probate, Petrus. Settings row view name, compatibility. Content. Ios 14. Fantastic. It's time to enter their first through the downlink view inside it. And settings row view, name, Website, link label, Swift UI masterclass, link destination, Swift UI masterclass.com. As you may notice, I have just simply deleted the optional content parameter and field at the link labor and the link destination parameters. Let's repeat it once again. Settings row view, name, Twitter. Link labor at Robert, I trust. Link destination, twitter.com slash Robert buttress. Awesome job. Now finish up this section with the last two rows. As I show you the settings row view name, swift UI, content Two-point 0, settings row view name, version content 1.1. And then it goes then new info box with the whole nine yards. Do you like it? Is good but inadequate? To be honest, I don't like there is no space between the rows at all. It's quite gravity in my opinion. But how can we fix it? Should be added manually. Some padding to this rose. Not at all. We can do it better by modifying the accompaniment itself. And let me do the hard work or s, Since I would like to use a divider, therefore, I would recommend you select a divider inside this group walks. And Kathy that to the clipboard, as I'll show you shortly, we are going to add it to their component. Now, open the settings row view file last time in this class and navigate to the body of the component refinement. To reach our goal, we need to embed the H stack into a new vertical stack container. Let's do it right now. My command, click on the name of the H stack, then select the embed in the stack option from their context menu. These stack Super, The last thing to do now is to pace their code of the divider from the clipboard at the beginning of their VCE back, as I do, wait for asset until they're preview is updated and see it. We'll make our design much better for sure. Let's jump back to the settings view and take a look at the preview. So what do you think about it? Do you like it? I hope so. As always, it's time to test their fructose application in their Simulator. Build and Randy Project testing. After the app is launched upon their settings button. Then let's have a look at the second information box of the Settings screen. Today, we have learned how to create a slightly complex conditionally at design with many optional parameters inside it. Besides that, we practice have to use the latest Lync view in Swift UI version two. With all of this work, the added some new functionality to the fructose application and make their settings screen more impressive in my opinion. I hope that you enjoyed this lecture so far. I can tell you that more is coming in the last class. Then we are going to develop the reset function relative or this mobile app. I can't wait to share with you how easy to create these awesome feature. Having said that, see you at the glass. 11. Sui2 app 01 chapter 12: In this last Swift UI tutorial, in this section, we are going to develop another great feature that will add additional value to their fructose app. This new feature in their settings will allow users to recite the entire application and start the onboarding process with their their KM cards and fluids. As you can see, this rosette feature is attached to our toggle interface. However, you can also notice that we are going to add some love for you to design and make it better with conditional logic. See what I mean by that. Shortly after you add holding this app, by the end of this class, you will get a fully functional iOS 14 app development, their latest Swift UI to enact scored 12. It sounds great, doesn't it? All right, without further ado, let's open Xcode and start coding. First slope under Settings view file and navigate to section two. Vevo start by adding a new group box for this section, as you may figure out. So let's do it. Group, box, playable, settings, label, view, label, text, customization, labor, image, paintbrush. As you can see, they use their settings, labor view component or the label of this group box. How convenient Was it? Now, let's add a new divider to it. As I show you. Divider padding vertical. For easy-peasy, you can always watch the preview window for the updates. Super. Now we are going to enter a short guide for the users about what will happening after switching that auger penta, the following code. Text. If you wish, you can restart the application by toggle switch in this box that we, it starts the onboarding process and you will see the welcome screen again. Now is the job. However, I think that it would look better with some styling. Lets add the following modifiers to this text to you. Padding, vertical, eight, frame, mean high, 60. Play at priority. One. Font, footnote, multiline text alignment, pleading. First the added some dirty cap adding to get some empty space. Then we added a minimum height and layout priority to this text view. Our goal, VB is modifiers to display the whole tax because sometimes, especially the long text content is truncated by the rendering system. Since every view got initial 0 layout priority, therefore, the rendering system must figure out their sizes and these could be confused in some cases, basically vigorously at priority. We have just told explicitly that it is TextView with these content is our highest priority and we don't want to truncate the tags, so give it as much space as it needs. Finally, we ended up adding a font modifier to this content and make it smaller a little bit. Do you like it's new look? I hope so. Reset feature, Okey-dokey. It's time to develop the reset feature. You will be surprised how easy is that. First we need to create a new property and that they're following code. As I show you. Add Apps, storage is onboarding. Var is onboarding. Bool equals false. Read this property. If you get access to the app storage and modified it, saved value using there is onboarding key. I'm pretty sure this sounds familiar to you since we used it many times before at the beginning of this section. Alright, now we jump back to Section two. They can do it by scrolling down or we can use a shortcut as well. Let me show you how this handy shortcut works. Presley command and the letter L at the same time as I do. And as you can see, a new Papa bar shows up on the screen. Now enter 41 order line number, and the editor has already jumped as to our desired destination. Just remember these shortcut if you consider yourself as our Mac user command plus L. All right, now let's add a new toggle user interface inside this information box shall enter the following code after the attacks to you. Toggle is on. Dollar sign is onboarding tax. Please start uppercase. This code. We create a new toggle with a label. And that's it. We have not only added a new user interface element to this layout, but using the dollar sign is onboarding binding property. We have just finished developing the reset feature as well. It's mind-blowing. How effective is little property binding is readily test app storage together. Are you still confused about how is it was cerebral with solid recording? First, you need to understand that we tied together ness switch on and off cases today is onboarding property. That's why we added a false value when the initialized this property, not so long ago. So the initial state of this toggle is off Batman v tab on their toggle, then its value via switch to true. And the app storage via do their heavy work for us. When the App Storage detects the value change in this property, then it will invalidate their screen immediately. Vds literally caught. We are able to reset the application and start the onboarding with their cards or fruits. But enough with that, OK, let's see it in action. That's weird and ran their fructose app and test it in the simulator. Shelby. Best thing. And he did goes there, fluke to SAP has already launched. We can see a full list of roots on the screen. Now, lets step on their settings button on the navigation bar c, There is the recently created certain information box on their settings sheet. How cool is that? Now let's, there's the restart feature by switching that auger Chevy. And we cannot see anything happening this screen. So we need to pull down. And this means that she, as I do, Wo fantastic. It works like a charm. Do you like it? I hope so. Let's play with the application a little bit and try it out again. First, this means that beautiful onboarding screen then go to their settings. After that, you can see that the toggle interface with the office status. Now switch this toggle and see once again, have the reset feature works. It's amazing, isn't it? We have just finished developing the reset feature on their settings view. We called cold that day, but you know me better by now. Yes, we can do it better. And I am talking only partially about the design, but what about the user experience? Did you notice that we didn't get any feedback from the application when we switched the toggle interface, I think that we always should give some feedback to users if we can do it with a smooth solution. Let me show you what I mean by this user experience. Okay? First we are going to add some love to this design. Chevy. Jump back to their settings view and add these new modifiers to their toggle in their face. Padding. My grand color, UIColor, tertiary system, background. Clip shape, rounded rectangle, coordinate radius. Eight, style, continuous. Nice. Now look at the preview window for assets. As you can see, we have just the boy wrote a nice system background color from the UIKit framework. This adaptive background color DO display and nice rounded shape around that token user-interface and highlighted to the user. Alright, now let's improve their user interface by adding noticeable visual feedback to their users. First select the labor text view of this toggle interface, then press Command. Click on its name. As I show you, a new context menu appeared above the editor. Select D may conditional option from this menu. Xcode will wrap the text to you inside this if S statement. Now replace that true statement with this code. If is onboarding. As by doing that, we must modify the text inside this block because when there is onboarding property is true, then we want to give a nice visual feedback to the user. Modify the string of these tags. Tags. Restarted, Great job. Now add the following modifiers to it as well. Font-weight, bold, foreground color, color, green. This we'll display a bold green text message with a different content. Now we need to recreate their default TextView with some modifiers to enter. Tax. Restart. Uppercase, font-weight, bold, foreground color, color. Secondary. Super. As you can see on the preview window, the adults are gray color for the stacks and midi by slightly dimmer. By doing that, these little details are part of the creation of great user experience. So when I use switches that token, then a new message, red-green color will appear and give some handy feedback about what's happening with the application. Isn't that cool? Is it? Testing? Let's test the application in their simulator. Once again, beard and Randy project. Then straight go to their settings view as I do. Now, look at the new design of this toggle. And here it goes swimmingly at Ogilvy for a couple of times. Do you see the improved user experience and the new design? Of course, it works like a charm. The second mission is accomplished to we can switch to dark periods as well and test the new and completed the rosette feature. Again. This improved UX with our new design is quite impressive and I hope that you agree with me. Ipad. Now, before we open a bottle of champagne nets, there's their fructose syrup in a new iPad simulator. Having said that, John back to Xcode and select a new test device from the toolbar, as I showed you, it's always a good practice to see how it works for now. Vaguely different screens guys like on an iPad Pro. After that, let's build and run the project. And Wall. If you are new in iOS development, then I am pretty sure that what you see on the iPad simulator is not exactly what you expected before. You know, I can talk about why it's happening many hours long. And just to be sure, I will cover it later on in a different class in this masterclass. But for now, long story short, you only need to know that their swift UIs Navigation View works differently on iPad devices. Not only that, we have some new cool features added to Swift UI version two as well. Do you see this sidebar button at the top right corner, VD, we can hide and display the sidebar. Pretty cool, isn't it? Now let's select one of their fluid from delis Chevy. Okay. That's weird. Please don't pay attention to the black, black round. It's a bug and Apple will fix it soon. But what about the detail view? That's not right either. Tap on that back button. Let's see what's happening. Whoa, again. Did you see the sliding panel? That's not what we want at all. Starting from our previews, WW DC, ky naught, when Apple officially announced the iPad operating system, a sibling to the iOS, more and more new features were added to it. One of them is the navigation system, which is vitally different than on the iPhone. Since then, have developers need to work more and more to support iPad devices. Having said that, this masterclass, we'll show you how to do that incrementally through the different projects. But for now, I will show you a simple query and totally valid way to support the big screen devices. We can achieve this goal by modifying the style of the navigation view here and there. Okay, without further ado, let's jump back to Xcode and open their content view file using their quick opened bar, Chevy. Press Command, Shift plus o and enter content inside a search bar. As I show you, super. Now navigate down to the end of the navigation bar and add this modifier to it. Navigation View style, stack, navigation views style. This will make sure that the navigation will be stack and there will be no sidebars and sliding panels on device screen. It's pretty easy. But there is one more view in this very, we need to do the same. This is the detail view. Open it and navigate down to the end of the navigation bar. Once again, now added this modifier to it as well. Navigation views style, stack navigation views style. And we are done. Let's test how this stack navigation system works on the iPad simulator. Build and run the project. Testing. And here it goes. As you can see, we got a nice list of fluids spreading out the whole screen. I wouldn't call it perfect mat it much better than previously. Just select one of the fluids and check out the detailed view he's in better now. Definitely. Just that quick side note. They can see how the maximum width size is working on their content area. And you can understand now by V separated the header from it to this layout is clean and neat. Users can browse and consume content, which is but what about the settings view? We need to test it as well. Whoa, it's not the same as what we can see on the iPhone. And other differences between the two operating systems is how the sheets were upon them as sheet when an iPad doesn't fill out the whole screen because it would provide a quite awkward experience, is the though it is a window in their center above the apparent view that has been deemed slightly as well. Next, when you switch from light to dark appearance, then you can see how the whole environment is changed by using the adaptive colors. Pretty nice in my opinion. We have reached a point when I would like to say, thank you. You have just developed a fully functional iOS 14 application with Thrift UI 2 using the Xcode coordinator. I hope that you enjoyed the journey so far and you learn a ton of new important things and some tips and tricks as well. Developing this encyclopedia of fluids would give you enough confidence to start your Iowa's high Bedouins and Mac OS app development carrier, you need to believe that venule start learning CAFO program. You are a programmer. You might not be a very confident, proficient programmer, but you are a programmer. Most importantly, enjoy the journey and don't start exploring new things. You know, app development is a huge area. And there are lots of topics that we need to cover in this master class, but I can confidently tell you that more exciting projects are coming. Just one more thing. I would appreciate it so much if you could take that time to give this course a five star rating, or even better if you could share your learning experience with other students by writing a half-full Review about this course. This way, you not only encourage me to publish more outstanding projects to discourse, but at the same time, you had other students to be informed about this excellent learning material as well. Moreover, I will be glad to read your success stories as well. Thank you.