Let's create an iPhone, an iPad, and a Macintosh application with SwiftUI in Xcode – 2021 | Robert Petras | Skillshare

Playback Speed


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

Let's create an iPhone, an iPad, and a Macintosh application with SwiftUI in Xcode – 2021

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

15 Lessons (4h 33m)
    • 1. Project Preview - Learn all about this SwiftUI app development project

      0:58
    • 2. Let’s set up the iOS project in Xcode

      25:47
    • 3. Learn how to decode a JSON file and fetch data with SwiftUI

      27:21
    • 4. Let’s create a dynamic SwiftUI List using Swift Generics and JSON data

      15:13
    • 5. Let’s develop the detail view for each animal with dynamic data - Part 1

      18:50
    • 6. Let’s develop the detail view for each animal with dynamic data - Part 2

      26:39
    • 7. Let’s create a Video Player with SwiftUI framework - Part 1

      24:01
    • 8. Let’s create a Video Player with SwiftUI framework - Part 2

      17:21
    • 9. Let’s develop a complex Map with custom Annotations in SwiftUI - Part 1

      13:35
    • 10. Let’s develop a complex Map with custom Annotations in SwiftUI - Part 2

      13:41
    • 11. Learn how to create a motion animation programmatically with SwiftUI

      16:38
    • 12. Let’s create a photo gallery with Grid Layout using SwiftUI

      18:51
    • 13. Let’s develop a complex Grid Layout system with four Toolbar Buttons

      28:29
    • 14. Let’s create a new iMessage Extension (iOS Sticker Pack)

      7:53
    • 15. Let’s transfer the iPad app to desktop Mac app with Mac Catalyst technology

      17:40
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

41

Students

1

Project

About This Class

fa4063f1.jpg

What is the main project of this class?

In this SwiftUI class, we’re going to discover not only Africa but further exciting new features of iOS and the SwiftUI framework. This advanced guide will help you to get familiar with how to build not only an iPhone app but a full-fledged iPad and even a Mac desktop application.

Learn how to develop a complex iOS app layout with SwiftUI's grid system in Xcode using Swift programming language.

ff3fc38f.jpg

Who is this class for?

This SwiftUI class is suitable for anyone with either no or some prior development knowledge.

What is the difficulty level of this class?

The difficulty level of this SwiftUI class: BEGINNER LEVEL.

d41d776c.jpg

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.

6ac76c0c.jpg

Technical requirements

There are only two technical requirements for this SwiftUI class:

  1. macOS Big Sur operating system from Apple (free)
    https://www.apple.com/macos/big-sur/

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

52805efc.jpg

Learning Objectives

The main learning objectives of this iOS app development tutorial are the following:

  1. First of all, we will learn how to set up a new iOS app using exclusively the Dark appearance.
  2. Then how to create a launch screen using the settings which is the new official approach to do.
  3. After that, we will learn how to parse and decode data from multiple JSON files with the Swift programming language.
  4. Next, we’re going to learn how to create Grid Layouts in SwiftUI.
  5. We will not only cover the basics of Grids but we will develop an advanced Grid Layout system and let users allow to switch from 1 list view to 3 different grid layouts on the new toolbar as well.
  6. Also, we will learn how to use SwiftUI’s new MapKit and create a basic, then a more complex map with multiple animating annotations at the same time.
  7. In addition to that, we’re going to create a content-rich video list and learn how to play videos with the new SwiftUI’s audio-video kit too.
  8. On top of that, we’re going to cover two important Swift programming topics, such as Swift extension, and Swift generics.
  9. What’s more, is at the end of the class we will transfer the complete iPad application to a desktop using Apple’s Mac Catalyst.
  10. And finally, you will learn how to set up a new iMessage extension and create a cool Sticker Pack without writing a single line of code.
  11. By building this eye-catchy application you will get familiar with more exciting and new SwiftUI features and much more.

eb4e6b9a.jpg

These Topics Will Be Covered in this SwiftUI Tutorial:

  • JSON with Swift (basic and advanced approach),
  • Grid Layouts (basic and advanced approach with a cool feature),
  • MapKit Integration (basic and advanced approach with another cool feature),
  • Video Player (new),
  • Launch Screen (new way),
  • Swift programming concept: Extension,
  • Swift programming concept:  Generics,
  • Prototype the application with SwiftUI framework,
  • Design and improve the User Experience,
  • iMessage Sticker Pack, etc.

 Designer and Developer: Robert Petras

Meet Your Teacher

Teacher Profile Image

Robert Petras

UI Design & App Development with SwiftUI

Teacher

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

In my opinion, the best way to learn native mobile and desktop development are 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 iOS, macOS, watchOS, and even iPadOS mobile app development with SwiftUI which is a native User Interface framework invented by Apple.See full profile

Class Ratings

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

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

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.

Transcripts

1. Project Preview - Learn all about this SwiftUI app development project: In this section, we are going to discover not only Africa, but some exciting features of iOS 14 and their swift UI framework. This advanced the guy would help you to get familiar with how to build not only an iPhone app, but a full fledged iPad and even a Macintosh desktop app using approves Mac Catalysts Technology. Reveal also learn how to decode data from multiple JSON files with Esref programming language. Next, we are going to learn how to create a complete grid layout system with Swift UI. Finally, we will learn how to use Swift UIs new MapKit integration and create a complex map with multiple animating annotations as well. If this is something you want to learn, then keep watching. 2. Let’s set up the iOS project in Xcode: In this class we are going to discover not only Africa, but further exciting new features of iOS 14 and the Swift UI framework. These advanced the guy will help you to get familiar with how to build not only an iPhone app, but a full fledged iPad and even a Mac desktop application. Objectives. The main learning objectives of this tutorial are the following. First of all, if you learn how to set up a new iOS 14 app using exclusively the dark appearance. Then how to create a launch screen using the settings, which is the new official approach to do. After that, we will learn how to parse and decode the data from multiple JSON files with the Swift programming language. Next, we are going to learn how to create grid layouts in Swift UI. Reveal not only covered the basics of grids, but reveal, develop and advanced degree the layout system and lead users are allowed to switch from one list view to free different agreed layouts on Daniel toolbar as well. Also, we will learn how to use Swift UIs new MapKit and create a basic, then a more complex map with multiple animating and notations at the same time. In addition to that, we are going to create a content rich video release and learn how to play videos with their new Swift UIs will DO video kit to. On top of that, we are going to cover two important swift programming topics, such as sweet extensions and swift generics. But more is at the end of the class, we will transfer the complete iPad application to our deck snap app using Apple's Mac catalyst. And finally, you will learn how to set up a new message extension and create a cool sticker pack without writing a single line of code. By building these eye-catching application, you will get familiar, more exciting and new Swift UI features and much more setup. Since this tutorial is quite long, therefore, without further ado, let's create, then setup our new iOS project right now. First download the resource files from this section. Then place this compressed package wherever you want on your computer and unzip it by double-clicking on its icon. The provided main folder contains three additional folders inside it with SV if the logo mark on them. Moreover, there is a supplementary workbook file with the learning objectives as well. First, let's take a short look at the folders. Chevy, you will find the finished project in their green folder. This completed project, we don't necessarily source code may help you, then you are stuck and need some quick hub. The next folder is the red one. This contains all of the resource materials that you will need to build the Africa application. Finally, w1 is created for you. We are going to create and save the new project into this folder. That's why it's empty for now. Now, let's open the workbook file and take a short look at the learning objectives. As you can notice, that is a very detailed list of the topics that we are going to cover in this tutorial. X squared. All right, our very first step is to launch the Xcode 12 that you have already installed onto your computer. Then let's create a new iOS 14 project, as usual. To do that, let's click on the Create a new Xcode project option on the welcome window. Then make sure that the iOS tab menu is selected at the top and choose the app from the available application templates. Finally, click on the Next button to create the project configuration. Now, we need to configure these new iOS 14 project for the product name, enter Africa for the team. If you already have an Apple developer account, login in here allows you to build your app on a real device. If you don't have an Apple developer account, you can skip this part and test your app in the iOS simulator on your Mac organization identifier, usually and our website address in the reverse order. In my case, this is the com dot swift UI masterclass. As you already may know, the bundle identifier is automatically combined from the project name and the organization identifier. Next makes sure that Swift UI is selected or the interface, then the project's life circle must be swift UI app. After that, makes sure that Swift is the selected language as well. Finally, leave the core data and include desk options unselected. After all of these unnecessary settings, click on the Next button. And now we need to tell Xcode where we want to save the Africa project on their computer. Navigate to their deck, stop and choose the students app folder as the destination. Just one more thing. If you are not familiar with using source control yet, then you can leave the Git repository option and selected. Now, click on the Create button and Xcode 12 creates all files and folders for the project that you need to start developing the app. Icons, Super Video, start the project by adding the high-quality pre-made resource files with Chevy. Navigate to the Resources folder and open it. As I show you in this folder, there are a bunch of other folders. To now open the app icon iOS folder, you will find all of their previously made professional icons in different sizes. First, you need to select All files in this folder, as I do. Now, copy them to the clipboard. So far, so good. Next, we are going to add these icons to their project. Jump back to Xcode and click on the assets catalog in their project navigator panel. After that, select the app icon. In the middle panel, we can see an empty set of icons on the right part of the editor. As you can notice, there are so many app icon sizes that we need to support. Now, right-click or control-click on the app icon group, as I showed you. By doing this, a new contextual menu of your show up. Select the Show in Finder option from this menu. And Xcode will bring us to their project Icons folder in a new finder window. Next, select the app icon set folder and open it. That is only a content JSON file in it. Now based everything from directly bought into this place, you will be asked to replace the existing file. Obviously, we need to click on the replace button. Finally, activate the Xcode and scroll down from the top smallest icons to the bottom largest icons. If you follow my instructions, then you VOC or icons with the lion logo correctly placed into the assets folder. Just have a look at how many icons movie need to have to create a real iOS application. It's quite amazing, isn't it? Cover? Okay, it's time to add the rest of the images to the project. We will continue with the cover images. At the bottom of the assets catalog. Click on their beak plus button and create a new folder. Give it the name cover. Now open the resources folder on the deck slab. Then open the folder called cavern. Inside it, select all of their cover images and drag and drop them into their folder in the assets catalog as I show you. Great job. Cheetah, buffalo, elephant, giraffe, Korea law, zebra, and lion. We got all of them. Gallery. Now we are going to add the animal photos to their project. At the bottom of the assets catalog, click on the big plus button and create a new folder. Give it the name gallery. Now, jump back to the Resources folder and open the folder called gallery inside it. Here, we need to select all of that photos and drag and drop them into it's empty folder in the assets catalog. So far, so good. Graphic. Now let's create another empty folder, pornographic files. Give it the name graphic. Now open the resources folder once again, then the graphic folder inside it. After that, select the compass image and the logo, then drag and drop them into its folder. Similarly, as we did with the other resources before. C, Awesome hero, after the logo and the compass, the graphics, we are going to continue with their hero images of each African anomers. Let's create a new empty for their than giving it the name hero. Now, jump back the resources folder, then open and the hero for the inside it, select these huge beautiful photos, then drag and drop them into his folder respectively. Now, just take a short look at them. Splendid. Launch screen. We can create a new folder by right-clicking on the empty area of the panel as well. Let's do it and rename it to launch screen. Now, open the resources folder than the large screen folder inside it. There is only one graphic file there meet three different dimensions. One x, then the retina to x and a3x. Select all of them and drag and drop them into their anti folder. Nice. We are almost finished with their resources map. Now it's time to add the resource files for the maps and notations. Create a new empty folder, then rename it to map, as I do. After that, opened the resources folder and the map folder inside it, select the ready to use photos and drag and drop them into. Therefore, the, they look great. This square photos via be their custom annotations on the map. Video covers. The last folder that we are going to create in the assets catalog is for the cover images of the videos to be consistent. We will give you the name without cover. After that opened the resources folder and the video will cover folder inside it. Select these images, then drag and drop them into their folder as I do super videos. Now it's time to add the actual video files to their project. To do that, we need to add them to their project. The boundary will directly and NADH two datasets catalog. First, select domain project on the navigator panel. Then my right-click on its name, select the new group option from there, contextual menu, as I do, name it to video. After that, jump back to the Resources folder and open the video folder inside it. Here, select all of that 10 MP4 files and drag and drop them into the video folder on their project navigator. Now, we will be asked by x called for further information about these videos when I knew pop-up window. So please pay attention to me. Before the click on the Finish button, make sure that the destination, the Create Folder, Francis, and the ad to target options are all selected. Awesome. All animal videos are successfully added to the Africa project. Now, let's have some fun and play one of them. Shall we select a video and hover over it in order to see the video player at the bottom of the window. See, we can even play a multimedia file directly in Xcode. It's such a power for development tool. G isn't. But hey, enough VD chit chat. We got some other important jobs to finish here. First, let's create another group lag before giving it the name that. After that, John back to the Resources folder for the last time in this lecture. Here, we need to find and open the data folder. No surprise here, I am pretty sure that you know the drill by now. Select all of the JSON files and drag and drop them into his group folder at the project navigator, as I showed you before, you click on the Finish button, makes sure that the destination that create folder references and the ads to target options are all selected as well. Now, to get an idea of how the biggest JSON file looks like, select the animals JSON file and scroll down for a bit at the editor pane. Yep, this is the longest that our file in the whole Africa project did many different kinds of information about each animal. Accent color. Before we start coding and learn how to parse data with decoding edges and file, we need to finish up with more initial settings. First, select the empty accent colors set in the assets catalog folder. Then show the inspector spawn L if it's hidden like I do by clicking on this button on the toolbar in this panel, change the appearances from none to any and dark. Now select the empty any API areas color on the editor window. Okay, after that, for its color content, select the sRGB color system. Next for its input method, choose the 8-bit hexadecimal option from the drop-down menu. Then enter the following value in the text field. Hashtag F, F, a, F 0 to VDD that we have just created a new orange color set that we are going to use as an accent color globally, fruit this project. Now select this color set and by pressing the Command plus C shortcut key copy to the clipboard. Then select the empty dark colors set slat, and by pressing the Command plus V shortcut key based it. Nicer job. Background color. Now select the launch screen folder because we are going to create a new color set for his background. Right-click on the folder name and select a new color set option from the context menu gives me the following name. Launch screen color, and select both the knee and the dark empty slots. After that, we need to change the red, the green, and the blue color sliders values from one to 0. As I show you. With this, we have created a peach back calorie for the launch screen. Launch screen. Alright, we have made great progress so far and it's time to learn something new. Select them in project folder at the navigator. Then click on the Info menu at the top bar. As I do in this window, there are new settings that are available for us from iOS 14. This is the launch screen settings that don't contain any values by default, but it's still a quite important because with some additional values, we can use it to create a new launch screen without touching the old storyboards technology. How cool is that? Let's learn how to do it right now. First, hover over the role of the launch screen property, then click on the plus button. This will add a new property to the launch screen settings. Now select the image name option and navigate their cursor to the empty cell at the value column in the same row as I show you, the need to click on this empty cell and add a new value to it. Launch screen image. After that, Let's add another property to the launch screen by clicking on the plus button. Now, select the background color property from the drop-down menu. Then enter the following value. Launch screen color. Yes, you are right. This is their color that we have just created recently in the assets catalog. And you have just learned a new way to create a launch screen. Hooray. No more storyboard, dark mode. But you know what? There is one more thing that I keen to show you. Do you know that there is a handful official Apple iOS application that works only in dark mode. Do you know which ones? They'll let me tell you that one of them is that stack up. And another one is the Apple Watch app and the Measure app and the compass app as well. But what about the most popular app, the camera app? Yes, it works on the dark mode. To how fascinating is that. Now I am going to show you how to globally change the preferred at periods. First, click on the plus button at the last row and add a new property to the settings. This time we need to find and select the appearance property from the drop-down menu, as I showed you for its value, enter dark with their capital D letter. And wallah. By adding this one property, we can use the dark mode even if we switch the apps appearance from dark to light. I hope that you like these two new features that you have just learned. Preparation. Okay, We have just finished adding or resource fast to their project and setting up the application as well. It's time to code a little bit and prepared the project or the upcoming lectures. But first let's do some quick housekeeping. Select both the Africa app and the content view files. Then by right-clicking on them, select the New Group From Selection option from the context menu, as I do, give it the name app matter, Robert, Why didn't you give it the name view folder. You may ask, you know, in this folder dv or collect only their main views. And we will collect all other reusable or smaller views in our dedicated view folder. Later on, you will see the reasoning of that because we will create a ton of use for these Africa Project. Tab views. Without further ado, select the content view file. Now, change the content of the default placeholder text view from hello word to content. Nice. It's time to create all of them in views and save them into the epic group. Let's create a new swift file and give it the name. Video ListView. Once again, let's change their default placeholder content of the text view. And that the following video grid. Let's continue. Create another swift file and give it the name MapView. Enter the following string for the TextView map. Next. Create a new swift file and give it the name gallery view. Now and that they're following string or the tax through gallery. And let's create the last few named this week. Do I file two main view? This main view videotape quite an important role because it will be a tab view containing the other full-screen views. Now let's prepare for it. First replace the placeholder text view with this new W and tableview. New comment and off tab. Then add the first view to it. Content View. Tab, item, image, system name, square, grid, 2x2. Tax grows. After that. Let's add the second view. Video, a list view, that item, image, system name, play, rectangle, text. But we can see on the preview how we are going to be adapt this tab navigation. Now add the third view to it. Map view, that item. Image, system name, map the x locations. And finally, let's add their gallery view to it. Gallery View, tab, item, image, system name, photo, tax, gallery. We are almost done with this lecture. The only thing that we need to do now is to modify the Africa app file. Let's open it and replace their content view with the main view. As I show you, mainly view testing. And that's all for this lecture. For some jab Bolivia need to do now is to build a randy project and test the app in the simulator. On the Xcode's new toolbar, click on their beard and RAM button to launch the simulator. Since it's a fresh new lunch. Then it via take a vial vendor simulator, boots up and start the Africa app. For a short time period. Vv are able to see the launch screen that we made with the new official way. And here it goes. On our back ground, there is a gray compass graphic. See, it's perfect. After the launch screen, we can see the new tab navigation. Now, let's test it. Chevy. Click on that tab items one by one and see their content in the middle of the screen. Everything works without any glitches as should do. But do you think about it? I think that it's a great start. We not only set up a new iOS 14 project in Xcode valve, but we have already added all the necessary resource materials to it as well. My ultimate goal with adding these resource folders to their project one by one, is to get you familiar with them. So then that Time Goes to use them. You will know what kind of asset file I refer to in their particular part of this project. Besides all of that, we learned how to create a launch screen and how to set the upper regions globally for the app. Awesome job so far. Having said that, see you at the next class. 3. Learn how to decode a JSON file and fetch data with SwiftUI: In this class review learn and essential programming concept or have developers more precisely how to decode JSON data using Swift code table. We are going to parse JSON data and populate this information about each African animal into a page that view, as you can see in this preview video, if you make great progress in developing this application by the end of this lecture. But before we start, I would like to ask you to bear with me from DOD end of this class today, we will cover a pretty important topic and that's why this lecture is a bit longer. Nevertheless, it's still a practical tutorial, but this time we will pose once or twice while I am going to provide you more explanation about some programming concepts, then usually we have a lot to do. So without further ado, let's launch Xcode and start coding Chevy cover image. First, we are going to prototype the holy Liao. Then we will cover that JSON parsing. As I said before in the previous tutorial, we call lag or they're smaller or reusable of use in their dedicated. For. Having said that, let's create a new group on their project navigator panel. Give it the name view. After that, as usual, let's create a new swift UI view for the cover images. Name it to cover image view. Now, save it into the view folder as I do. Nice. After that, I am going to create a new comment mark with a horizontal divider for each main code block in this fly, follow me and enter Mark. Properties. Bark, buddy, Mark, preview. This special comments type is used to divide functionality into meaningful and easy to navigate sections. You can reach these code sections on the toolbar, orient the minimap with ease. In the later videos, IV or not waste any time to mention it once again, but I've, you use this comment marks regularly. Now, let's add allele at modifier to the preview window shall be enter, preview, Lee out, fix with 400, height, 300, super. Because zoom up this window in their Canvas if you need to. After that, replace the placeholder text view with a new static image for prototyping purposes and image cover lie on resizable. Scared to feel. All right, So far, so good. Now let's embed this image into a new tab. Enter, tab view, new comment. And tabs. Now move up the image inside this view. Then wait for a sec and see the result in that review. Of course, this is not exactly what we want to fix it. Let's add this modifier to that tab view, that view style page views. It's much better now. Now we need to repeat this image. The easiest way to do that is to command, click on the image name and select the repeat option from there, contextual menu as I do, then enter for each new comment and off Loop. Great job. As you can notice, little dots showed up as an indicator of their page, that view on the bottom part of the image. The beauty of developing in Swift UI that we can instantly see what's happening using the live preview. Now, let's start this life review by clicking on its button on the toolbar of this preview window. Then we start it. You can notice that it launches are building simulator and the pH indicators are already image boundaries. But it's not a big deal, in my opinion. Just swipe to the right to use the functionality of these new UI element C. It works without any glitches. Of course, this is only the same lion repeated five times in this page view. Json basics. And we'd finished a gap there, a AB design. We can finally talk about JSON and learn how to parse them, populate its data into this view programatically, which sweeps quotable protocol. Does it sound interesting? I hope so. So what is JSON? Then? Json stands for JavaScript Object Notation. It's our compact, easily readable file format for data structuring. In general, it's primarily are used to transmit data between a server and then application using some kind of application user interface has known as API. Not only that, but we can also use it to store and parse JSON data directly inside the local APA bundle. You know, it's a text-based format representing different kinds of information. But you should also know about it that our JSON file consists of key value pairs and it uses brackets, parentheses, and columns for separating the elements from each other. Adjacent data structure can represent different types, such as string, number, including integer and double, then Boolean, array, dictionary, and even optional Apple Developers, what's fortunate for us is that each of these JSON types can map law corresponding serif type. The only exception is that datatype, but we can always convert dates in numeric or string representation of this data. All right, before we start learning how to parse a JSON file, firstly, via take a quick look at this simple JSON structure. This one contains some key value pairs where the values are basic types like a string or a number. There is also a value representing an array of strings. In this simple example, to use any JSON file, first, we need to create a corresponding data model in Swift v, this data model we can easily decode any data using sweeps, be at in decoding and encoding functionality. For that, we can run a JSON decoder alongside the code table API. It's worth to mention that it is called Table API via do the hard part of the verb to generate the output at reveal need to use in Swift UI later on. By the way, this called the bull is a type alias which consist of the encoding bubble and D, D called Ebola protocols. I am pretty confident that by finishing this Africa project, uvea get familiar with all the basics of how to use JSON in Swift UI. Dealing with JSON data is such a fundamental part of app development. Therefore, we view a deep dive into this topic in the upcoming sections of the course. Now it's time to decode the first GZ and file in this Africa Project Data Model. Now navigate to the project navigator and unfold a data group to see oil JSON files. Add that to this project. For our practical standpoint, select the covers dot JSON file. And let's have a short look at the data structure of these JSON. As you can notice, it's RBC and easily digestible data file. Each object has only two elements. The first one is the ID key, which is a type of number. The second one is the name key, which is a string type. Now we need to create a new swift model file that is matching with this data structure. I would highly recommend you to click on the Add Editor to right button at the top right coordinate of the toolbar. As I showed you this, we can see that JSON file on the left side of the editor while working on the data model on the right side of it. I tend to use this functionality quite frequently for this situation because I find the quite practical even on my tiny, tiny screen. Now, of course, we need to create a new swift file for this model. To do that first select the Africa project folder. Then let's create a new group for all modifies, name it, do model. Then let's create the actual Suite file. As I show, you, select the empty swift file template on this pop-up window and give it the name cover image, model. Then click on the Create button. Awesome. Let's get down to business. First. Let's create a new struct, enter, extract, cover image. Let Id, INT, that name string. Great, the ID and the name properties inside the structure are marching to their keys of the JSON files. And that's exactly our main goal. Now to successfully parsed and populate that data, we need to add for this Raghu important protocols to it, namely called the Hubble and identifiable protocols. So let's do it. Enter Cordoba. Identifiable. See discovery image model is ready to use to decode a JSON data. All right, I think it's pretty easy to remember these ID and a name properties. So we don't need to keep open either this model file or the JSON data file. Just close them as I do decoding. There are many ways to decode adjacent file. And easy, lazy VA were a proper but much longer solution. I am going to show you the better one. But before we start coding is always a good practice to go through the logical steps that we need to make to solve a programming goal. And we can do it right now thanks to pseudo-code. What is pseudocode? You might ask? Basically, in computer science of pseudocode is up in language description of the steps in an algorithm or other system. That's it. Now, let me define these necessary steps that we need to make to the code a local Judaism file or write. But before to do that, let me clarify their main goal that we want to achieve. Goals. The van to their code, a loci JSON data, then use these data to populate a swift UI view. Also given to create an algorithm that we can reuse not only one time, but many times, over and over again within our project. Moreover, our main objective is to decode not only one specific JSON file, but multiple JSON files with the different data structures. To simplify this complex goal. First, we are going to accomplish the first and the second course in this particular lecture. But don't worry, in the next class, we will recover the third goal as well. Steps. Alright, here goes my pseudocode in plain English. The algorithm must safely do these following tasks. First, located a JSON file in the app. Abandon. Second, create a property for the data. First, create a JSON decoder for the code, the data, and collect the information with their new property. Fifth, return the ready to use data. And this is how I can break down this complex goal into many logical baby steps. We can use this method to create a new function somewhere in this week. Do I file that? We can call it, then we need to, however, they can do this in a much efficient way if you use this function as an extension. And that's exactly what we are going to do. Okay. But what kind of exception we are talking about? Do you see there first step on this list. To locate a file in iOS app development, we need to use the bundle. You know, Apple uses bundles in iOS and Mac OS to present apps, frameworks, logins, executable codes are related. Resources such as images, sounds, videos were other files. In our case, these are the local JSON files. That's said we are going to extend the demand dual functionality with our custom JSON decoder extension. Are you interested to learn how to do it? I know you are. So let's do it. Bundle extension. First thing first, Let's adjourn back to Xcode and create a new group for de-excitation. Give it the name extension. After that, Let's create a new swift file as usual. Name it to quotable bundle extension and save it to the new group. All right, now let's create a new bands UW Extension and add the following code with a new decoder function inside it. Extension bundle. Funk, decode, underscore file, string, return, array of cover image. As you may notice, this decoder function has only one parameter. We decided to call it simple file, which is a string type. My-delay. With the use of this underscore, didn't have to enter the name of the parameter each time, then we call the function. We must only enter the actual JSON file name without the parameters name, might you VOC have this works later on anyway. So we use these five parameter to tell the decoder which JSON file to parse and decode. In this case, this is an array of cover images. I hope that everything is clear so far. Now, before continue coding in an ad hoc way, we can utilize the upsell pseudocode. Yet you are already familiar. We did. Let's write down the main steps of this algorithm as new comments. The first step, New Comment, number one, locate the JSON file. The second step, New Comment number two, create a property for the data differed step. New comment number 3, create a decoder. Before step. New comment number four, create a property for the decoded data. The fifth step, New Comment, number 5, return the ready-to-use data. See, this is the blueprint, our decoders algorithm. Now let's implement these instructions written down in plain English to real code Chevy. And they're, they're following code. Guard. Let URL equals self, URL for resource file with extension. Neil else. Fatal error, failed to locate file in Bandar. As you can see, we are using SIFS guard statement. Then we create the worrier constant to handle the possible errors. So if we misspell the JSON file name or it doesn't exist in the upper bundle, then are running project via crash with a warning fatale error message for us. In that case, we will always know that we screwed up in our code. Of course, we shouldn't force our app to crash in our production ready app. And there are many ways to handle each scenarios. Oh boy, you know, proper error handling is a kala-azar topic in app development. But for the sake of completeness, I will introduce it incrementally over the upcoming projects. All right, Now back to the algorithm coding. Now enter the following code. Guard. Let data equals try question mark data contents of URL. As fatal error. Failed to load file from mantle. For this computed property, we tried to put the JSON data as a data type itself into this new constant. The reason behind that, we couldn't know whether the JSON file is covering up or not. If it's broken and we can't use it as data, then our ad will crash again, but this time with a different error message. So VEVO be informed about what went wrong. Okay, let's continue with the third step. Chevy. Enter that decoder. The coils. Json decoder. It's quite self-explanatory in my opinion. We have just created a new constant with a JSON decoder method that we are going to run in the next step. Next, enter guard. Let loaded equals try question mark. Decoder. The code array of cover image itself from data as fatal error failed to decode file from vendor. Now, I can tell you that this is the main section of this algorithm and work to analyze it a little. First, we created a constant that will hold the decoded JSON data. But to do that safely, the JSON decoder method first needs to try this decoding operation. That JSON decoder needs to know two important pieces of information to do that. Firstly, decoder requests information about the type that we need to decode. In this specific case, it is an array of cover images. Pay attention to the fact that this type must conform to that decodable protocol, otherwise, it will not work at all. The next information is the source data. You can see this is our JSON file in our app bundle referred by its URL. In case both the datatype, AKA Data Model and the data source are valid. Then this decoder method using their Swift called Table API via the code, the roaches and data and put the result into this new property. For us. We have only one last step to finish up the JSON decoder extension. What the compiler was upset about during this whole time is a missing return value in their function. Let's fix it shall be enter Return law did fantastic. The error is gone and the finish that VDS well-designed JSON decoder extension as well, define a result of this function will be a serialized array of cover images that we can use in Swift file anywhere and anytime. But do you think about it by the end of this whole section, UVA see how valuable was to create this handy extension implementation. Now, without further ado, let's use this extension to populate the page tab view with real data. First opened the cover image view file as I do. Then let's create a new property for the actual cover images. And that the following code, let cover images. Array of cover image equals bundle, mean. The code covers dot JSON. As you can see, it's pretty easy to use our bundle expression and decode a given JSON file. All we need to do is to call the decode function inside the bundle extension. This we'll decode the covers lot JSON file and store the decoded array of cavalry images into this new property for further use. Now, navigate to their foreach loop and replace the placeholder with this property. As I show, you, enter for each cover images. And finally replace the hard-coded image name. It are dynamic property. Enter image, item name. The best way to check our code whether it works or desert, is to start the live preview and test the page tab user interface. So let's do it. And here it goes. You can swipe to right, then back to left and see how the cover images are populated into their page tab view. Bandar for final touches. Now it's time to embed this cover image view into their content view. Open their content your file and delete the placeholder text. After that, enter the following code. Navigation View, new comment, and off navigation. Now let's create a new list inside this navigation view. Please. New comment and off list. And finally, embedded the cover image view inside this list. Enter cover image view. Hopes the page view is so, so tiny. Let's fix it with a new frame modifier, Shelby, frame, height 300. It's much better now, but far away from perfect. As you can see, there is a default padding around the top view. But hey, they can easily override the default behavior of the list view by adding a modifier to the specific list, the row enter least row insets, edge insets, top 0, leading 0, bottom 0, trailing 0 as well. This modifier gets rid of that padding and the cover images expands its size horizontally to the left and right edges of the screen. Finally, add a new navbar title modifier to the ListView. Navigation bar title, Africa, display mode, large. Splendid. Just one more thing before we call that day and the final test, it turned out that I told you something wrong. Then we created a cover image view and now he need to fix my mistake. Please open the cover image view and navigate to the modifiers of the image. There we need to exchange. They're scared to feed modifier, too scared to feel modifier, as I showed you. By the way, this is the right method to make the image to touch the horizontal edges. Then we are using a fixed height frame testing. Now we are going to finish up this long lecture, the testing, the application. Are you ready for it? Then let's build and run the Africa have in the Xcode simulator after the initial lunch period, because 52 right and left the cover images in their page tab. How cool is that? I really hope that you have a better idea of have to parse the code and populate a data from a JSON file. In the next lesson, reveal, expand the functionality of these JSON decoder and make it copyable to the code, not only one type of file, but other JSON files as well. From that, nothing can stop you to decode any GZ file as an app developer. Having said that, see you at the next class. 4. Let’s create a dynamic SwiftUI List using Swift Generics and JSON data: In this class we are going to create a list item view and populate it with basic information about each African animals. Besides that VV or modify our JSON decoder extension and make it generics. So we can use it to parse any type of data file in the future. So without further ado, let's open Xcode and start coding animal list item. You can recognize grid developers by noticing how they think ahead to solve a particular programming goal. So v du, since our goal with this tutorial to create a list row, therefore, it's not hard to figure out what VV or need to prototype inside this new view. Having said that, select the view group on their project navigator and create a new swift do I file as usual, give you the name, animal, list, item, view, then the CV it into its destination for the now, we will prepare the preview window by adding some modifiers to it and review layout, size that fits. Padding. Grade. After that, embed that placeholder text into a new horizontal stack, as I showed you. Then add these parameters to the H Stack, HCI Stack alignment, center, spacing, 16, new comment and off each stack. Finally, we can add a new image with a hard-coded value inside this container. So let's do it right now. Image lion. Yep, it's a huge image, indeed. Therefore, we need to add some additional modifiers to it. And that they're following modifiers. Resizable. Scared to feel. Frame that. 90, hide 90. It's almost there, but now we need to clip. It's shaped to a rounded rectangle. Add these to it. Clipped shape, rounded rectangle, co-ordinate, radius, valve. It's much better now. This is exactly how we want to display on the arrow. Now, it's time to finish out this layout with some additional text-based information about their particular animal. To do that, first, we need to embed the text view into our new vertical stack container. As I show you, these stack alignment, bleeding, spacing eight. New comment and off the stack. So far, so good. Now let's modify this placeholder text and make it to stop Title VII does modifiers and tax the ion. Formed. Title to. Font-weight. Heavy. Foreground color, accent, color. See by adding their global accent color to its foreground color, we got a warm color somewhere between the orange and yellow. Awesome. The last UI element that we need to create below this title is the headline with only two lines of text. Let's do it. First entered this long central tax. Tax. The birds, most social salience, Leon's around this savannas and grasslands of the African continent, hunting cooperatively and rising caps in brides. As you can notice this text quite long, but don't worry, because we can easily truncate it with a handling modifier attached to it. And formed footnote, multi-line text alignment, pleading, liner, limit to padding, trailing eight. See it looks much better. Vds tiny adjustments. And we are done with this design. I hope that you enjoy prototyping layout designs on the Xcode's can thus, it's such a cool feature. Data model. After finishing up designing the layout bit some hard-coded content, it's time to get rid of the static content and populate it with dynamic data from my JSON file. To do that, first, we need to create a new model that we'll map the data structure of these JSON data. Having said that, open the animals dot JSON file from the project navigator. As I do, next, click the Add Editor to right button at the top right corner of the toolbar. Awesome. Our editor is Eddie to create a new swift file and VR VDS files simultaneously. Now, select the modeller group on the project navigator as our fire destination and create a new swift file. Give it the name animal model, and save it. Great. We can replace their foundation framework if we wish as well. After that, Let's create a new structure for the data model of the African animals. And they're, they're following code. Extract animal called the Hubble identifiable. Let id, string, lat, name, string, let headline, string, let description, string, as well. As you can see, we need to scroll down the left editor to see the rest of this lecture. So let's do it. Now continue mapping the data that blink string. Let image, string, lead gallery array of string. That fact array of string. And we are done. What's worth mentioning about this data structure is there gallery and the fact properties. Both of them are arrays that are collecting string values such as image names and short facts about the animals. Great. We can close these windows for now and continue working on their own. Jam back to the animal list items you shall be, as I told you before, our main objective is to make this row item view to display dynamic content from the JSON file. To do that, we need to modify our JSON decoder bundle extension and Medicaid copyable to decode any type of data and not only the cover images. That's why open decodable bundle extension file as I do Swift generics. So what is swift generics system? Generics allow us to write code that is capable of working with our variability of different types. To make our decode method generics, we need to give it a placeholder for a certain type. This is In, in angle brackets after the method name, but before its parameters. And that they're following code after its name directly. The code opening angular bracket, letter T, colon, quotable, closing angle bracket. Don't be scared about these strange syntax. This letter D is a shorthand for the type of math we can use any name for displays order. However, it's quite common in our industry to use these, the latter. So it's a good practice to do that. Next, since we want to use this metal to the code any data, therefore, whatever JSON file Divan to work with, it must conform to their quotable protocol. This is why we added this code table constraint to their place holder. With all of that inside this function, we can use this placeholder T-type everywhere devolved, use the cover image array. See this letter T is literally a placeholder for the type that we want to work with. So rather than returning the array of cover image, we should use this return T. Nice. The compilers error message is gone. Towards the end of the decode method, there is another place where the cover image is used. Let's change that to place holder, the time, as I show you, t dot itself, and we are done. The next step is to leverage this swift generics and use it all over the place in this project. To do that, Let's start with. There is sent an e-mail list item view file in the editor. Implementation. First, let's create a new property for the individual animal. Enter, lead animal typeof animal. As you can notice, this time we didn't initialize this property with any value since this list row via be populated with that data by aspirants view. This parent view is our existing list view in their content you'll file that we are going to populate with the rows after we have finished here. Nevertheless, how this is a great idea that previewed still needs to know that to display in the window. To fix its error, we have to create a new property for the preview. Of course, it could be any mock data holding whatever the information that we can use, our actual animals, JSON data with ease. And the they're following code. Static, lead animals, array of animal equals bundle, main, decode animals dot JSON. Then added these missing parameter to the Preview. Please item do animal, animals, one, Super, the error is gone. I chose not their first NMR, but the second one in purpose did that. We can see that the content is changing on the preview window. Now it's time to replace the hard-coded content with the dynamic one in this row. First we start with the image view, navigate to it, and replace the assembler content with this one. Image, animal dot image. See there are zebras on their photo and not a lie on. Next, let's continue with the title, enter tax, animal, dot name. Easy-peasy. Lastly, let's modify the headlines content as well. Techs, animal, dot, headline. Great job. So far. As you can see on the preview window, our list row is then, now it's time to create a new loop inside the list view that we create these rows and populate them with real data. List of animals. First opened their content view file. Second, Let's create the actual property for the data from the JSON file and that they're following caught. That animals array of animal equals bundle dot, domain dot decode. Any moz dot g isn't. Vevo use this data not only to populate the list view, but the GridLayout as well. Later on in this project. It sounds great, doesn't it? Now, let's create a new for each loop under the cover images, Chevy, navigate to the police and enter for each animals. Animal in animal list item you animal, animal. And here it goes. Under the pH that view that are the new rows with that different animal in each of them. How fascinating is that? The only thing to do is to test it using the live preview, the simulator, or a real iOS device Chevy. What is your choice? Testing. This time, I choose the live preview to test the project. After starting it, we can see all of their rows inside the list view by scrolling down. It's quite impressive, isn't it? I really hope that you enjoy these shorter lecture and learned something new, watching it as well. In the next tutorial, we are going to create a well-designed detail view for the African animals. Until then, happy coding. 5. Let’s develop the detail view for each animal with dynamic data - Part 1: In this class we are going to start developing a detail view of the African animals. So when a user taps one of their list items, then a new detail view will appear on the screen using a navigation link. For this specific Swift UI view, they are going to create many self containing smaller views such as a hero image, I trend it title design, a headline are reusable subtitle, and finally, a gallery with a horizontal scroll. By the end of this tutorial, we will put together all these separate views and finish up the upper part of this detail to you. Since we have a lot to do. Therefore, without further ado, let's open Xcode and start coding detail view. Our first task is to create a new swift file for this detail view. That's sad, select the view group in their project navigator and create a new swift UI file. As usual. For that file, give it the name animal detail view, and save it. Now, let's create a new property for each individual animal. Enter the following code. Let anymore, anymore. As you can notice, he didn't initialize this property, it any value. That's why we need to fix the broken preview by adding the missing parameter to it. Navigate to the preview. And let's create a new property that contains only decoded JSON data and static. Let animals array of animal equals bundle, main dot D, chord and immerse dot g isn't great. Now modify the animal detail view the discord. Maldi-tof view. Animal Animals. 0 index. 0 index represents the first animal in that JSON file, which is the Lyon Hall. Right after this necessary prep work, we can start developing the user interface. First, we need to create a new vertical scroll view. Enter. Scroll view. Vertical shows indicators. Force, new comment and off Scroll. Then Command Plus click on that text views name. Now select DM bed in VCE, that option from there contextual menu as I do after that at these parameters for this Vertica container, V, stack alignment, center, spacing 20. New comment and off the stack. Nice. Now add these new modifier to it as well. Navigation bar title. Learn about animal dot name, display mode. In line. This inline title looks very well with the back button on the navigation bar. But in order to see the navigation bar in that review, first we need to add it. Go down to that review and embed the animal detail view into a new navigation view and navigation view. Preview device, iPhone 12 Pro. And do you see the inline title with a new navigation bar in the updated preview window. Awesome. Now it's time to define all sections that we need to develop for this detail view. To do that, we are going to create new comments for each part. Follow me and start typing. New comment, hero image, New Comment, title, New Comment, headline. New command, gallery. New comment facts, new comment, description, new comment, map, New Comment, link. As you can see, there are eight main sections that we will be separated from each other with our usable subtitle. Hero image. Okay, now we start developing from top to bottom and build up this detailed view incrementally. In the design industry, we use the hero image expression interchangeably with their cover image. We start with this view and add the following code. Image, animal dot, image. Resizable, scared to fit. Easy-peasy title. Now let's create a title with some modifiers for the detail view. Chevy. Enter, text, animal, dot name, dot, uppercase, font, large title. Font weight. Heavy. Multi-line text, alignment. Center, padding, vertical, eight, foreground color. Primary. After that added this specific modifier to it as well. But Grant color dot x and color. Frame. Height 6 offset. Why 24? As you can see in the preview window, this title has a unique style fitted that bold font and it's yellow underline. Just a quick reminder. In Swift UI, a color is a view so we can add different modifiers to it similarly to other UI components. Headline. The next section is the headline. Enter the following code. Texts. Animal, dot, headline, font, headline, multiline text, alignment, bleeding, foreground color, accent color. By adding horizontal. It's a nice, clean design. But since there is nothing special about its look, therefore, we can start developing the gallery feature heading. As I told you before, we are going to separate the different sections with our usable subtitle bit modifiable content. To make this happen, first, we need to create a dedicated Swift UI for the heading. Select the view folder as its destination and create this new Swift do I file as usual, name it to heading view, then save it. Super. Now added these modifiers to this view in the preview. Preview layout size that fits. Padding. You can zoom in the Canvas if you need to, as I do. All right, The next task is to create some new properties for the content of this heading and var heading image. String, var heading, text, string. Now we need to fix the error in the preview as usual at these mock data for its parameters, heading, view, heading, image, photo, dot on dot rectangle, dot angled, heading tags. The otherness in pictures. This sample content will help us to design the heading. Now, it's time to create the layout of this reusable subtitle. First, embed the placeholder text view into a new horizontal snack container. As I show you, age stack padding vertical. After that, let's add a new image to it as well. Enter image. Since their name, heading, image, foreground, color, accent, color. The image, scale, large. Just look up the updated preview window to see that change. And finally, modify the text. You need this code. Tax, heading tags, font, title, free, font-weight, bold. And guess what? We are done with developing this heading. Now we need to implement it for the first time. To do that, let's open the animal detail view file and jump to the gallery section and enter the following code. Group. Padding, horizontal, heading, view, heading, image, photo, dot on both rectangle, not angled. Heading tags. The otherness in pictures. As you can notice, we put this new heading view inside a new group. The reasoning behind it is that there is a limitation of how many views we can use to gather in our Swift UI file. We can avoid this limitation using groups. Alright, the heading for the gallery section is then our last task in this tutorial is to develop the gallery feature. Gallery. I am pretty sure that you know by now that we are going to create another swift UI file. So let's do that exactly. Create a new sleeves to AI file and name it to Insert gallery view, then save it into the view folder as we sure do after that quickly at these modifiers to their view in the preview, preview Lee size, that fits padding. Alright, now we need to create a new property for the individual enema. Enter that animal anymore, since there is no initial value added to it. Therefore, we need to tell the preview what kind of data it can use. For that, we are going to create a static property inside the preview. Enter the following code. Static, lat, animals, array of animal. Because bundle dot domain dot decode animals dot JSON. Now let's fix this error of missing argument for parameter inside gallery view. Anymore. Animals 0 index. As you will see later on, we are going to load the pictures of the lion into this gallery. Great job so far. It's time to work on the actual layout. First, replace the placeholder text data, new image view and image animal. But gallery 0, index, resizable. Scared to fit. Frame. Height 200, corner radius 12. As you might notice, this NMR Gary is an array and we explicitly chose to display only the first photo using the 0 index. This is only a temporary solution until we finish up the whole layout design. Next, now, we need to end at this image into a new horizontal stack container. As I show you, age stack alignment, center, spacing, 15. New comment and off each stack. So far, so good. The finance there before to load all photos is to grab this horizontal stack into our new Scroll View. Let's do it right now. Scroll view. Horizontal shows indicators for us. New comment. And scroll. Nice work. Now it's time to repeat the image view and populated with dynamic data. To do that, we need to use a for-each loop command glass click on the image name and select the repeat option from their context menu as I do for each new comment and off loop. After that, let's modify this loop by entering their following code. For each animal, dot gallery, id, dot self. The first part of this code v8, tell this loop to pull data from the array of the animal gallery. Since the photos don't have IDs, therefore, we must use their names as a unique identifier in order to work in there for each. And the lastly, we need to replace the explicit value of the image. It a dynamic one, enter image item. And we are done with developing the gallery feature. The best way to test our code is to start the live preview. So let's do it. Click on the Start button and scroll depth lectures horizontally. See, it's working without any glitches. The only two things that we still need to do to finish up this lecture is to add this gallery to the Detail View and create a navigational link for it. Let's jump back to the animal Detail View File and navigate to the gallery section. Now added this code after the heading, as I do, Insert gallery view anymore. Anymore. It was easy, isn't it? To see whether it works properly, we need to test it in the live preview. Let's start it and see if everything is fine. Yes, it's so cool using the BOD and live preview feature of xcode, isn't it? But back to work. The first task has been already accomplished. Navigation link. Now it's time to create a navigational link for this detail view. To do that first, we need to switch to their content view file. Then enter the following code. Navigation link, destination, animal, detail view, animal, anymore. New comment and off link. Finally, move the animal list item view inside these navigational link, as I show you splendid testing. For the first time in this class, let's build and run the Africa projecting their simulator or on a real device shall be. After the launch of the application. We can test how the new navigation link works on the list. Let's select one of the African and images from this list. The design is pretty good, isn't it? Now let's scroll their photos in their gallery. As you can see, creating an interesting layout and mix up the default vertical scrolling view with a horizontal scrolling view is such fun. You can check out the other African animals that are a ton of beautiful photos representing each anymore. I hope that you enjoyed developing the first part of the detailed view. In the next tutorial, we are going to finish up this view with other interesting design, including the new map view in Swift divide to having said that, see you in the class. 6. Let’s develop the detail view for each animal with dynamic data - Part 2: In this class we are going to continue developing the bottom part of the detailed view. This field include the following sections. Facts about the African animal than a long description, then a mini-map with a link to the map view. And finally, in extraordinarily link pointing to a pH of each individual animal on Wikipedia. By the end of this tutorial, if you get a complex Swift UI view containing many different kinds of content. Not to forget to mention the various types of user interface elements as well. Does it sounds great. Then without further ado, let's open Xcode and start coding facts. First, we are going to develop their section for the animal facts. Chevy, open the animal detail view file and navigate down to the Effects section grid. Now let's create a new group for this component. Enter the following code, group, padding, horizontal. After that, we need to create a new heading inside this content container. And heading view. Heading, image, Question mark, dot, circle, heading tags. Did you know? Nice. With all these set, we are ready to create a separate UI component for the animal facts. As many times before, we need to create a new swift UI file for it. So let's do it. Select the view folder in the project navigator as its destination, then give it the name inset fact for you. After that, save it. Now, let's add the following modifiers to the view inside the preview. Preview really size that fits padding. Now I am zooming in their Canvas so you can see better that changes on the preview window. Great. As in the previous lecture, we need to create a new property for the individual animal and animal typeof anymore. Then we need to feed the damaging parameter with some data in there preview. To do that, first, navigate to the bottom of the file. And let's create a new aesthetic property. Static. Let animals typeof array of animal equals bundle dot domain dot decode animals dot JSON. Now added the missing parameter with this data to the view. In a set fact view, Animal, Animals index 0. As you can see, we decided to load the first animal from the JSON file. No surprise here. This is the king of animals. All right, Now it's time to develop the actual UI layout for this component. First, embed that placeholder text view into a new group, as I show you by Command Plus click on its name. Then make these group to a new group box with ease. Group box, comment box. This group box, we will provide this component a nice design around its content. After that, we need to create a new pH, w and w new comment. And off the apps. Now move the text inside the stack view. As I do. Then add these modifiers to it as well. Tab view style, pH, WWE style, frame, mean height, 148, ideal height, 168, max height 180. This makes a nice looking page view with the flexible height. So you can see in the preview window. So far, so good. As for the TextView, we need to repeat it as many times, as many facts we have in that JSON file. To do that Command Plus click on its name and select the repeat option from there contextual menu. Then we need to populate this foreach loop with their data. And for each animal dot fact ID. Dot itself because of the effects, don't have IDs. Therefore, we must use its names as unique identifiers. This is why we put the dot itself there. Next, there is only one thing that we need to do to finish up creating defects component, modify the text with this code tax item. It's as simple as that. This, we can populate these texts with content from the JSON file. Now, jump back to the animal detail view file and let's insert this new facts component inside it. First, navigate to its section, then enter inset factor you. Animal. Animal. Since we are done with it, therefore, be sure to definitely tested. That's start the live preview and checkout how the facts component works. And what do you think about it? It works properly without any problem. Description. Okey-dokey feed, no break. We are going to continue the development of the remaining section in this view, you know what? I can tell you that the description of the African animals will be done in no time. Navigate to the next section and create a new group for its content, Shelby. And group. Adding horizontal. After that, we add a new heading to eat with the help of our reusable component. Heading view. Heading, image, info, dot, circle, heading, texts, all about animal dot name. After that, Let's check it out in the live preview that it goes, nice job. Now, back to work. Let's create a new TextView for the long content. Enter the following quote. Techs, animal, dot description, multi-line text alignment, leading, layout priority one, VDS, the description section for each African animal is done. Let us test the long content in the live preview Chevy. See, I told you it's routine work and I hope that you are enjoying the rapid development with Swift UI. Now, we need to develop only two components for this detailed view map. In the following minutes, we are going to integrate the map kit framework with Swift UI. First, let's create a new group and then new header for the Map component. Navigate to the map section and enter group. Padding, horizontal, heading, view, heading, image, map, heading, tags, National Parks. After that, quickly check out how this works in the live preview. Before we continue. There it is. Awesome. Mapkit. Now, let's talk about maps in Apple's ecosystem. You know, AdWords, MapKit framework allows us to draw pins, plan, routes, and zoom around the world. We just a few gestures. Since working with MapKit requires as to learn quite a few new classes. Therefore, in this section, we are going to focus only on the fundamentals. But don't worry, in the upcoming lectures, we will discover more complex features that we can use In-App development. You will see also that there are basics are so easy with the latest map. Keep integration in Swift UI to having said all that, we can start implementing the map kit framework into our project. First of all, we need to create a new swift do I file like many times we did before. Give you their name, Set map view, and save it into their views for there. All right, now at some new modifiers to the view inside the preview and review layout size that fits padding. If you need it, then you can zoom in their Canvas as I do. Next. To integrate a map into this file, we must first import its framework. So let's do it right now. After the swift UI import, Enter. Import MapKit. Great. Now we need to create a new region for the map. And they're, they're following code at state, private, var region equals m a k coordinate, region. Center, CL location coordinate 2D latitude 6 dot c x w 0286, longitude. 16 dot for free divers, 75 W9. Span. Mk coordinate span. Latitude data 60 dot 0. Longitude data 60 dot 0. Since a lot of things happening in this code, therefore, it's word to analyze it a bit. As you may notice, we have added the state property wrapper to this region, viable. It's a mandatory requirement if we want to create a map view with Swift UI. The reasoning behind it is that maps are using bindings to keep track of any changes that may occur in the maps region, such as rude tracking, banning, spinning, or zooming in or out. Next Wednesday, declare a region, then v must provide at least two additional pieces of information about how the map should work. The first information is a map coordinate that contains the data of the latitude and longitude. In our case, is precise, location is the center of the African continent. Then the second information that this map must know is there zoom level, then smaller is the value of span, then higher is the zoom level. In our case, the span values are quite big, therefore, the map is zoomed out up to that point where we can see the whole African continent. But enough V.org, let's see it in action. Chevy. Replace the placeholder text with Discord. Map, coordinate, region, dollar sign, region, frame, height, 256, coordinate radius 12. To see what's happening, we need to start the live preview. So let's do it. And period goes. It's quite fascinating that we cooled create a map with only one line of code with CQI. We just need to remember that we need to create a region for a map that contains the 2D coordinates, which are by the way, the center of the map by default. Then we need to set the zoom level. Keep attention to their dollar sign before the parameters name. Since the maps region could be changed anytime, therefore, we must use bindings to keep track of any changes using the add state protective rapper. As you can see, we can move the map region in the preview. Moreover, we can zoom in and out as we wish. However, it's a little bit cumbersome to do that with our mouse pointer in my experience. And this is the very basics of creating a map with Swift UI. But before we insert this component into the Detail View Reveal, add a custom navigation link to its top right corner. Navigate to their map and add these modifier to it as our first one. Overly navigation link, destination, map, view, new comment, and off navigation. Then let's create a new horizontal stack inside it. As I show you each Slack, new comment, each stack. Here inside this H slack, we are going to create a new image and text view. Let's start with the image. Enter the image. System name. Map Being dot, circle. For grant color, color, white. Image, scale. Large. Now let's continue with the text view. Enter text. Locations for grant color, accent, color, font-weight, bold. Don't worry about its color is still wide in their preview. It, we are changing the simulator to its desired color. At the end. It's almost there. But now we need to add some additional modifiers to their age. Slack container, padding, vertical, ten, padding, horizontal, 14. Background, color, black. Opacity, 0.4 coordinate radius eight. It's look is much better now. And lastly, we are going to attach, discuss them navigation link to that top-right corner of this map. At this modifier to the navigation link, padding. Valve. Then finalize its position by adding these attributes to it. Alignment, top trailing. And guess what? We have just finished developing this compact minimap for the detail view. Now let's jump back to the animal detail view file and inserted Shelby. This won't take long time since the implementation is only one line of code. And that is after the maps heading. In map view. After that, we should test them up using the live preview. Let's start it and check out the new map component that we have just created. Select an animal, then scroll down to the bottom of the detail view. But do you think about it? We can move the maps region even to zoom in or out as we wish. Creating a basic map, v3, w2, a2, free Hamburg couldn't be easier, in my opinion. Do you agree with me? I think we are almost done with creating a detailed view of the African animals. The very last section is they're custom-made link component that we open the default iOS browser and navigate the user to Wikipedia. More precisely, it will navigate to their corresponding page of the actual African animal, such as the page about The Lion, the zebra, and so on. Okay, enough talking. Let's get down to the business. As you may know by now, we start with creating a group with a heading for this section. And group. Padding. Horizontal, heading, view, heading, image, books, dot vertical, heading, text. Learn more. Awesome. Now let's create a new swift file for this component. Shall we first select the view folder as its destination. Then give it the name external variable ink view, and save it to this feast UI file. After that, at these modifiers to the eye view inside the preview, preview layout, size that fits. Padding. Super. Since the extraordinary website link is not static and its value very eyes. Therefore, we need to create a new property to get access to the web address of each animal. So let's do it. Enter lead animal type of animal. Then let's create a static property in that preview. Static. Let animals array of animal equals Mandel dot domain dot decode animals dot JSON. By now, the whole process should be familiar to you. That's sad. Fix the error in that preview by adding this missing parameter to it. External babbling view, Animal, Animals index 0. With this code, review via know what data should use. Now, it's time to work on the actual user interface. First, we need to wrap that placeholder text into a new group box. As I showed you. Group box, you comment, and off box. This UI component has got a nice default Luke provided by the operating system. Follow right. Next. Let's embed the text view into a new horizontal stack container H stack, new comment, and off H stack. After that, let's modify the text with this code. The next Wikipedia. Then add a new image with a spacer before the stacks, like I do enter image. Since then name globe spacer. Feed this code. We have just finished the left part of this component. Now, we are going to continue with their content of its opposite side. First, let's create a new group inside this horizontal stack. Group, foreground, color, accent color. Then let's add a new image to it. Image system name, a row, dot app, dot, right dot square. Now, please pay attention to me because I made a small mistake. And they are the following code before the image are like as I am showing to you in this recording. Link. Animal, dot name, destination, URL, string, animal dot, link. Now there is an arrow and the compiler and ask for a default value for this link. Let's fix it using the swift coalescing with the W question mark. Enter, double question mark, URL, string, HTTPS, colon double slash wikipedia.org. With this code, we have just provided a default website address to the homepage of Wikipedia in case there is no link in the JSON file. It's still not error-prone, but we can quickly fix this new error message by force unwrapping the optional value. So let's do it by clicking on the fx button. As I do. This new exclamation mark does, do is the job Val, since their compiler is happy. So we are great job. As you can notice, not only their website address, we're very high, but the title of this link as well, That's said each African animal has its own unique external link. Just be sure that you enter this code before the image view because that looks better in my opinion. And we are just finished developing these custom link component. All we need to do now is to insert this into the detail view. Let's do it right now. Switch to the animal detail view file and enter the following called external web link view. Anymore, anymore, Super. Now let's start the live preview and see what we have accomplished in this tutorial. Shelby. Scroll down to the bottom of the detail view and see all of the new components. There is quite impressive, but nothing can beat testing either in the simulator or an aerial device. Having said that, click on their build and run button at the toolbar. Testing. After the project has been launched, select one of the African animals from the list and test their finished detail view. As you can see, the page tab view works perfectly and there are many interesting facts about each animal. Next day long description is well-formatted as well. Then the minimap insertion not only looks great, but we can move or zoom in or out in the map region to the custom navigation link at the top right corner works as it's supposed to do. And finally, we can check out the external website link by tapping on its title. As I showed you. See there are no errors in our code. If you wish, you can test all the features by selecting other animals from the list. But about the cheetah, Let's try it. That's amazing, isn't it? I hope that you can appreciate these high-quality content since I put a lot of time and therefore to provide the best resource materials for this project. And the good news is more awesomeness is coming in. They're following lectures. After finishing with a detail view, we are ready to learn how to create a video holiest and how to play videos automatically with Swift UI. I really hope that you are eager to absorb more exciting information about the swift UI framework. Until then, happy coding and see you at the class. 7. Let’s create a Video Player with SwiftUI framework - Part 1: In this tutorial, we are going to learn how to play movies in our application. You know, Swift UIs, new veto player. Let's ask Lee movies from any external URL or the locale app, abandon. This video player comes from the audio video cage-free and work. So we need to add it to their swift file before we try it out. Since our main learning objective in this project to simulate a real bird development scenario. Therefore, we will take the extra mile by creating a dedicated lists for all videos that are already prepared in their project bundle. By the end of the first part of this series, we will have a more than at least layout populated it. They're necessary data from their local JSON file. Moreover, we are going to develop a new feature as well. So when users that on the toolbar button, then there are videos in this list will be shuffled back in the Apple Music app. See, it's a handy feature that you will learn how to develop in Swift UI. Having all said, without further ado, let's open Xcode and start coding that our model. First thing, first opened their videos JSON file from the data for other than the, let's add a new editor to the right, Shelby. Great. Now let's take a quick look at the data structure of this specific JSON file. As you can see, there is an ID and name and the headline in each item. Thus, modelling it's data structure shouldn't be too difficult for us. I hope that you agree with me. That's sad. Select the modern folder as the destination, and let's create a new swift file for this model. Select the empty swift file from the Templates window that gives you the name Fidel model. After that, CBD to its destination. Okay, now it's time to create a new data structure for the videos. The left editor with their row JSON data will help us to model the data. Basically, each key element in there JSON file is a candidate to make a new property in this racked follow me and enter this block of code. Extract video codec. Identifiable. That ID, string, that name, string. Let headline string. As you can see, this new videos structure conforms to the affordable and identifiable protocols. Besides that, this rack has got three properties, namely ID, name, and headline. All of them are string value types. Great job with this new video type, we are able to decode the videos dot-dot-dot JSON file using our Extremely have full JSON decoder extension. All right, Since we are done here, we can close this and the other phi's. Our next task is to create a new list item for the videos in a separate file. To do that, first, select the view folder in the project navigator and create a new swift file. As usual, we will call it Video list item and save it to its destination. Nice. After that, we are going to add some new modifiers to the view inside the preview. Preview layout size that fits padding. As usual, I am zooming in there canvas. Now we need to create a new property for the individual video and add the following code. Let me now typeof widow. Of course, the preview stops working and ask for information about the missing parameter. Navigate to the bottom of the file. And let's create a new static property. And static LET videos array of the Tao equals bundle dot domain, dot, decode, videos dot JSON. As you can see, this property conforms to the videotape and we use it to contain all of the decoded data from the JSON file. Now we need to add the missing with our perimeter with this data and video A-list item, video with a hose, 0 index. This is 0 index means that TV a lot that first videos data from the array. All right. The prep work is done. Now we are going to take a short detour by checking out their file names of the video covers. Let's select the assets library on their project navigator, then unfold the video cover for the IT failure reveal the cover images. Pay attention to their names because they play a semi important role. Later on, when I introduce a new programming concept. As you can notice, all filenames start with divert video. In that deck word, we call it prefix. And using prefixes could be handy sometimes. Okay, now back to the video list item. We are going to develop the layout of this component. First, replace the placeholder text, be the new image view with some modifiers. Enter image, video, dash, io, dot ID, resizable. Scared to fit. Frame, height. At coordinator radius 9. Nice work. We created a thumbnail image for the video. Now Let's embedded into a new horizontal stack container. Command Plus click on the image view, then select the appropriate option from there, contextual menu. As I do. Then enter each stack, spacing ten new comment and off each stack. Now let's improve that thumbnail image by adding to it a play symbol, Chevy. If you Command Plus click on the image view, then you should see a new feature. If you are using the latest release of X code embedded in z stack, by selecting this option, it will do that desired job for us in no time. So let's do it. Disease attack, new comment and off disease stack. Now let's create a new image after the thumbnail image and image system name. Play dot, circle. Resizable. Scared to fit. Frame, height. First it to shadow. Radius 4. That's much better now is indeed a great UI design. Always clearly communicates what users should expect beforehand. They attempt to interact with the interface. Now, let's continue with the rest of the layout. First, we need to create a new vertical stack container for the title and the headline. Enter these stack alignment, pleading, spacing, then new comment. And off this FAQ. After that, let's add a new title to it. Text, video, dot name, font, title to font-weight, heavy, foreground color, excellent color. And finally, we need to add a headline after the title and tax v del dot headline, font, footnote, multi-line text alignment, leading, line limit to super. With all this code, we have just finished the layout design. But before we jump to the implementation of it, I would like to introduce a new programming concept to you. Computed property. As I told you before, there is a video prefix in all thumbnail images filenames. And as you notice, we use string interpolation to get the right filename in the image view. This code is 100% correct and it just works without any problem. However, we can do even better. For example, just imagine that we need to use this filename not one time, but 20 or 40 times in our project wouldn't be nice if we could shorthand the typing process. By the way, it would prevent us to make any typing errors as well. As you can see, there are many benefits to combining the prefix and the video ID inside a new property. And that's exactly what we are going to do now. To do that, first, select the video models swift file. Here we are going to create a new computed property inside the videos structure. Enter the following code. New comment, computed property. Var, Sunday, string, video, dash. As you can see, we are still using string interpolation might be setup only one time and VV or use the term near property as many times as we wish in this project. Let's see it in action shall be. The only thing that we need to do now is to implement this computed property. Jump back to the video or list item file and modify the text as I do. Image v del dot, thumbnail. See it's a creek and a nice solution. Indeed, I love programming is waived so much. What about you? With our list? Or some? Now it's time to create the actual video release and fill that with this video list item components. First opened the video owner list view file from the main app folder. As I show you, as you can figure it out, this is the apparent view there. We need to create the property with all of their video data. Enter the following code. Var videos, array of 0 equals bundle dot, main dot decode, videos dot JSON. Great. Now we are going to develop the whole layout with unnecessary UI elements, such as a new navigation, a new release, and of course with our recent video list item. Yeah, it's another coding drill for you, but I am pretty sure that you know, this expression practice makes perfect. First we start with creating a new Navigation View Command Plus click on that placeholder text Nim than hurdle asset, because I would like to show something new features in the latest release of Xcode. Then you look at this contextual menu. You should see some recently added options as well. One of them is the embed option with this shortcut because the RAP any views into any new view. So let's try out by selecting this new Embed feature. And as you can see, after we click on the embed menu item, then our text view go to wrap into a new place holder container that is still highlighted. Right after that. Now we need to enter the following code. Navigation view. New comment and of navigation. C is pretty cool, isn't it? Next, let's embed the text into our new list. View, Shelby. Please. New comment and off list. Nothing fancy here. So let's continue with adding a new for-each loop. We just need to select the repeat option from their contexts Menu. Now, the fun part is coming. Replace the placeholder arrange with this code for each videos. We are almost then. Finally, we need to replace the text view with this list item view as I do with our list item, video item. And here they are. But wait for a sec. Did you notice something strange about the name of this component? You know, I like to be consistent in file naming and organization in generale. Yet, from time to time, I make mistakes. Perhaps not big mistakes, but definitely annoying ones like this one. As you might notice, I forgot to add the view of word as opposed to fixed after their component's name. It's no big deal nowadays because Apple engineers have significantly improved Xcode's refactoring feature. Refactoring. Let me demonstrate to you what I mean by that. Iv right-click or control-click on their component's name. Then I hover over the Refactor menu by doing that, and new sub menu will show up on its right side. Here, we need to select their rename menu item. As I show you. Now, wait until x court finds all places in their project where we use this component. Here they are. As you can see, this refactoring feature is quite intelligent. It found out that there are a filename and multiple other files where this component is used. Now watch how I modify its name. Video list, item, view. See when I start typing their view postfix after their name, then Xcode automatically applies this change in all the relevant places. Then we finished up typing, then we need to click on Rename button to approve these changes. And in no time Xcode fixed my naming mistake. How cool is that? I would highly recommend you using this refactoring feature in your project if you needed refinements. Now, back to work. We are almost done with creating this with our list. But there are some opportunities to improve the overall look of this view. First, we are going to stylize the least through their new modifier. Add this code to their list. Least style. Denise said the group list style. Do you see the new design of this list? This INSEAD grouped list style modifier added a gray background color to the list with a nice corner radius. Plus the list is no longer expanding to the horizontal edges of the screen. There are very noticeable padding between the edges and release. Not bad at all. However, I think that the rows in delis are too close to each other. We need to add some padding to them. To do that, navigate to the end of the list item you component and enter bedding, vertical eight. C, B, this vertical padding delis stopped looking so crafted. I hope that you agree with me. The next thing is the missing title. At the top. As you can see, there is a huge empty space at the top part of the navigation view. Let's fix it. Enter the following code at the end of the list view. Navigation bar title, videos. This play mode. Inline. No doubt about that. It's much better now. Now we can add a little bit of spice and more user interaction with the help of a new feature to this view, Chevy shuffle. Our goal is to develop a new shuffle feature with a baton. So when users tap on the toolbar button, then the videos in this list will be shuffled. Lack in the Apple Music app. Does it sound great? Then let's do it right now. To do that first, we need to solve a problem. You know, this video property is a value type and they cannot modify by default. But don't worry, we can solve it by adding the ad estate property wrapper to it, so it will be immutable. Enter at state var videos. Great, with that, we can shuffle the rows in the list. To do that, we are going to add a new button to the toolbar, navigate to the end of the list view and enter. Toolbar. Toolbar, item, placement, navigation bar, trailing, button, action. You comment, shuffle, vidoes. Image, system name, a row dot to dot, square path. Well done. Now let's create a new action. You might be surprised how easy is that in Swift UI, enter the following code. Videos, dot shuffle. And that's all these building a metalloid in Swift via do the hard work for us. Mind-blowing, isn't it? Now it's time to test it in the live preview as usual. Let's start it and test the video released by scrolling down and up Chevy. The video list populated with the dynamic data from the JSON file works without any glitches. Now, let's tap on their shuffled button a couple of times and see what's happening on the screen. See the shuffle functionality works properly as well. We could call that day, but we are not done yet because we can improve even more this new feature by adding haptics to this button. That said, when user tap on it, then the API gives them a tactile feedback on the screen surface. Haptics. If you are a beginner app developer, you may ask me, what are haptics? Val, in general, haptics are designed to enhance the user experience with your iPhone by implementing a sense of touch as you interact with your phone. In other words, some of your actions on your iPhone will trigger a haptic, so-called a tactile feedback without further ado, let's see it in action. How haptics work Chevy. To do that first, we need to create a new property for that entered the following court. Let have dQ impact equals UI, impact feedback generator style medium. With this code, we have just created a haptic feedback generator with a medium style. This UI impact comes with some additional methods and VV or use one of them to start the haptic feedback when a user taps on the baton, having said that, navigate to the baton and create a new action for it. Enter haptic impact, dot impact or cured. As you can see, this impact acute method will be triggered by the button action. Just a side note, as far as I know, there is no way to test have ticks in that preview or in the simulator. So if we want to feel the tactile haptic feedback with our finger, then v must test it on a real device. Testing. All right, Enough talking. It's time to test that finished with the earliest you in the assimilator. Shelby. Let's build around the project as usual. Then after the initial launch, tap on their watch menu, wonder bottom tab bar as I do. And here it goes. Let's scroll down and up the whole list of videos. Then we should tap on that button on the toolbar to test the shuffle feature. As you can see, it works like a charm. Congratulations. You have just finished up developing this video, a ListView. And you know what the cherry on the cake will be the second part of this tutorial, then dv, or learn how to play multiple videos automatically with Swift UI. Give this is what you want to learn. Then see you at the class until then, happy coding. 8. Let’s create a Video Player with SwiftUI framework - Part 2: In this tutorial, we are finishing up their video player feature of the Africa project. You VOC, how easy to play back a movie using Swift UIs new video. Hopefully. By the end of this lecture, if we are not only create a simple video player, but VEVO develop a dedicated function, fourier to play any animus riddle automatically from the local app, abandon C. To do that, we will integrate a new framework into our project. It's called audio video Crete. And this framework comes with many useful classes, but enough with that or working without further ado, let's launch Xcode and start coding Chevy. Today are openly. First of all, we are going to create a new file for the video player view. Select the view folder from the project navigator as its destination. Then create a new swift UI file from the templates, give it the name video player view and save it as usual. Since this video player comes from the audio video or create framework, therefore, we need to add it to the S-wave to AI file before we start using it, enter the import AV kid. After that, replace the placeholder text, the discord. Video player, player, AV Player, URL, bundle dot domain, dot URL for resource, cheetah with extension MP4. And this is their foundation, how to play a single video file with Swift UI. As you can see, all we had to do is to create a new video, please review and add an audio video player to it. We also decided to enter a hardcoded video file as its source URL. It's only at temporarily solution to design the layout before we populated with the dynamic data from the videos dot JSON file. Next, because of their value of this new video player is optional. Therefore, we need to unwrap it to dismiss their compilers message. For their sake of rapid prototyping, reveal choose to force, unwrap this optional by selecting these available recommendation from the message window. Don't be mad at me because of that. Reveal. Replace this code later on. Now, we need to start the live preview to play and watch the selected movie on their Canvas. So let's do it. And here it goes, the new video player showing a still image from the video. Now, let's play this video by clicking on the play button as I showed you. Whoa, it's a slow motion. The'm about these beautiful predator achieved that is roaming in the African savanna. How impressive is that? It's worth to mention that the video player in Swift UI comes with a default multimedia tools such as a play button, opposed button ability and slider. Than even with that time tracking indicator. It couldn't be easier to create a video player with Swift. Why could it? Do you agree with me? I hope so. All right. The next step is to create a common utility function that will auto play any provided video file shall be utility function. In the iOS development community, we usually call these common functions or classes, utilities, or helpers. More often, we put them into a new extension to simplify things. Moreover, we usually gathered them together in a dedicated group folder as well. And that's what we are going to do now. To do that first, select them in Africa project on their project navigator as I do. Then let's create a new folder for this small function. Give it the name helper or utility. It's up to which one do you like more? After that, select this folder as the destination and create a new blank swift file from the Templates window. Now give you the name video player helper and c VDD to its folder. Okay? The very first thing is to import the audio video K3 and Burke, and import a kid. Great. After that, we need to create a new audio video player, var, video player, typeof, AV Player. Question mark. As you can see, this video player is an optional without any default value. Now it's time to create the actual function that will play that video automatically. And that they're following code. Funk, play video. File name, string, file format, string, return, av player. As you may notice, display video function has got two parameters. The first one is the video file name, and the second one is a file format. Moreover, this function returns an audio video player as a result. Next, and if bandit dot main dot URL for resource file name with extension file format, exclamation mark equals nil. This if conditional statement, we will check whether there is a valid video file in their main app bundle with their given file name and file extension. If yes, then it's a good executive. They're following code inside it. Video player equals a the player URL bundle dot domain dot URL for resource, file name, extension file format. Did this code. We have just created a new video player, did the necessary information from the provided file names and file extension parameters. And here it goes, the most important part and video player. Question mark, dot play. See, the simple play method is due to play back the video automatically. Then we call the function. Just one more thing. The compiler has got our message for us. It need asked to fix a potential bag that could crash the Africa application to fix it, select Air Force on wrapping option, as I show you, since we have already checked out for a valid filename and extension. Therefore, we don't need to worry about it anymore. Nice, the error message has gone. Now, there is another one with a different message. This time, we must return an AV Player as the compiler expects. Just let's do it. Enter this short code, return without Player explanation mark. Super. We are done with this new utility function implementation. It's ready to use it in our video player view. That's said, switch back to this file as I do. Now, we need to replace the AV Player with a new helper function inside a video player view. Enter the devil player, player Play video. File name, GTAC, file format, mp4. This code is much compact them before and we can digest it with ease. However, they entered their same hardcoded values for its parameters. Not a big deal since fovea modify this after we tested the new helper function. Having said that, let's start the live preview. And as you can see, the code works without any problem. Splendid. The time has arrived. Then we can replace the hard-coded values with dynamic data. To do that first, we need to create two new properties and that they're following code var v, they're all selected string, var without title. String. Great. Since these properties don't have initial values, therefore, we need to tell what kind of Fidel V12 show in their preview. Navigate to the message and click the Fix button. As I do. After that, we need to enter some sample data for its parameters. And videos selected lie on video title lion. This time event to play the lion a movie. And finally, we are going to replace the hard-coded file a limb with the selected property. Jam back to the video player and enter filename with our selected file format, mp4. This time, we keep their file format, as it seems, all movies in the abandon our MP4 videos. After that, we should test the video player in the life review. Resume it if you need it, as I do. And instead of a cheetah, we should see an extreme close-up shot of a magnificent lion. Awesome. Now before we call the day, I would like to show you something new, something surprising about the video player view in Swift UI. Add-ons. It turned out that we can put any other view inside a veto player view in Swift UI. But before we try it out first, let's embed this video player view into our new vector Kazakh container, as I show you this stack. Now, here comes the fun part. Let's add a new opening and closing curly braces to the video player. Enter, opening curly brace, then closing curly brace. So far, so good. Now let's create a new text view inside this video player, Chevy tax without title. Just wait for a sec and watch the video title above the video in there preview window. It's mind-blowing, isn't it? You know, we can use this feature to show any information about their particular video or even add a watermark image with as well. You can play and make some experience with this new feature as you wish in your spare time. But this time, I decided to create a different design to boost the cool factor of the video player. That's sad, comment out the text view as I do, then add this new view modifier directly to the video player. Enter overlay. Image. Local, resizable, scaled to fit. Frame with 32, height, 32. See, we added a logo image above their video using the overlay modifier. This modifier has got such a power. We can position our view and either we wish to, to do that at this attribute after the image view, coma, alignment, dot top leading. See the logo is spinning at that top left corner of the screen. Now, we only need to do is to add some padding to it. Enter padding, top. Padding, horizontal. 8 is done. Now it's time to add the videos titled so it Chevy. Since there is already a navigation view created in the video lists variant few, therefore, we don't need to create a new one. But to see what's going on, we must embed the view into a new navigation view in depth review. That's said, navigate to that preview and use the new embed option from the context menu after you Command Plus click on their views name as I show you, then enter navigation view. That was easy. It's time to add the title to the vertical stack. Enter the following code. New comment, and off these black accent color, accent color, navigation bar title with our title, display mode in line. And here it goes, then you would title. The very last task that we need to accomplish is to connect this video player view to its parent. Few final touches. First opened their video or list your file, then embed the video list item view into a new navigation link command Plus click on its name and select the embed option from the context menu. Then we need to replace the placeholder with this quote, navigation link, destination, video player view. With those selected item, dot ID, feed our title item.name. This new navigational link. We attach a video player, but video it should pay. This time. I think that we could densities code using the live preview Chevy testing. Having said that, let's start the live preview and test the navigation link. Select one of the African animal from the list, then checkout what's happening in that preview window. The connection is correct and the auto playing feature works properly as well. Now, let's use the Back button to navigate back to the video or list view. And let's select another animal from the list. I can't see any problem. But about you, that's just another animal video. Chevy is fantastic. I am so glad that their beauty and preview functionality is capable to play multimedia files without running our apps in the simulator or on a real device. You can't tell me that Xcode gets better and better in each year. It's such a powerful tool for any app developer course on. We have just completed all learning objectives of this lecture. The Africa Project has got more features than before it had. The progress is notice silver. And I can tell you that in the upcoming lectures we are going to cover more exciting topics with Swift UI. Until then, happy coding and see you in the next class. 9. Let’s develop a complex Map with custom Annotations in SwiftUI - Part 1: In this two part tutorial, we are going to learn how to create a complex map with dynamic data and custom annotations by the end of this lecture, when we select the Location menu, then the VSC, the African continent on the whole screen. Moreover, there will be a half a dozen annotations. Each one of them is locating in their known African National Park. As you can see, we cannot only move them up central region, but we can zoom in or out as well. This is just the beginning because in the second part of this series, we are going to improve this design since we have a lot to do. Therefore, without further ado, let's open Xcode and start developing these new map feature data model. As I told you before, this map view located the friend African National Park from our local JSON file. To do that, first, we need to model the data structure of this JSON file before we can decode it. That's said, let's open the location dot JSON file from the data group. After that, we should add a new editor to the right. As I show you. Nice. Now select the ammonia group from the project navigator and create a new swift file. As usual, give you their name, location, model dot swift, and save it into the ammonia group grade, as you can see on the left editor, that is the raw JSON data. And on the right editor, that is the recently created empty model file. The JSON data contains some basic information about each African National Park. There is an ID and name and then image file name. What is really important in there is the latitude and longitude. Latitude and longitude coordinates. We can create a new location for the map. To do that first, we need to import an SSLD framework in this swift file. Enter the following code. Import map kit. All right, from now we can access through all classes in this MapKit framework. So let's create a new type for the location with the unique data structure and subtract National Park location called Able. Identifiable. Var i, the string var, name, string, var, image, string, var latitude, dabble, var longitude, dabble. As you can see, it wasn't particularly hard to create this model that is much into that JSON data, was it? But wait for a sec. The location property is still missing in this chord. In the last lecture, you have learned how to create a computed property. And we can use this technique to create the missing location property as well and add the following code. New comment, computed property. Var location, CL, location coordinate 2D, CL, location coordinate 2D, latitude, latitude, longitude, longitude. Horse on. With this code, we have just created a location property. To do that, we use the map Q3 and work, and for their location coordinates, we combine the latitude and longitude information. From now, we just need to refer to this location property and the Map Viewer do the rest of the work for us. That's the beauty of using computed properties. Complex map. Okay, enough with that, OK, let's implement this code. Shall we? We can close this file and open the map view file as I do. Now, first things first, let's import MapKit framework. Once again, enter the import MapKit. After that, we need to create a map region. This region will be dead center of the African continent, such as VDD for the minimap feature previously. But unlike before this time, I will show you a more elegant way to create this complex map region with the help of us with closure. Let's create a new closure and talk about it later on. At state, private, var region, MK coordinate region. Because now add an opening and closing parenthesis to this property. Then let's continue typing var map coordinates equals CL location coordinate 2D latitude 6.600286, longitude 16.4377599. Var map zoom level equals mg coordinate span, latitude, the data 70 is 0. Longitude data 70 dot 0, var map region. Because MK coordinate region, center, map coordinates span, map, zoom level. Return map region. Instead of creating a new region and initializing it with a super long data, we have chosen to dissect it into smaller parts. In my opinion, it's more digestible, especially for beginner developers. The first part is their coordinates of the map. The second part is the zoom level of the map. Finally, the last part is the actual map region with their combination of the coordinates and the zoom level. Please keep in mind that we must add the estate property wrapper to this region property. Since maps in Swift UI are using bindings to track any changes, such as moving, zooming, and so on. All right, after that finally, we can replace the default placeholder texts in their body, meta new map centering the African continent. So let's do that. New comment, mark number one, basic map, map, coordinate region, dollar sign, region. To see what's happening in our code, we need to start the live preview. As I show you see, this is only a basic map that you have already learned how to create previously. And that's not why VR here, our main learning objective is to create a dynamic map bitmap annotations from the JSON data. To do that, first, we need to create a new property that will contain all locations of the African National Parks and flat locations. Array of national park location equals bundle dot domain dot decode locations dot g isn't. With this, we can create a new map and populated with all the data. And John back to their body and enter. New comment. Mark number 2, map with annotations, map, coordinate region, dollar sign, region, and notation items, locations, annotation content, item. In. Now, let's have a short break and analyze their code of this map. As you can notice, after their coordinate region, we added the annotations. Then we add an annotation to our map. Then we have to provide some kind of content as well. Map pin. As for map annotations, apertures, MapKit framework provides us multiple options that we can choose from. We are going to start from the most basic annotations to the most complex ones. Shall we enter a new comment? Option, a pin, old style, always static. Map, pin, coordinate, item, dot, location, themed, accent, color. As you can see on the live preview, there are pins on the map. It looks fine, but one thing is still wrong with this. The color of the annotation is blue. You to preview back. So if we want to test it properly, therefore, we need to do it in simulator or on a real device. Let's build and run the project. After it's launch, click on the allocations menu as I show you. And here they are. Now lets move and zooming the map. It works like a charm, VDD spin annotations map marker. But there is another type of map annotations provided by the MapKit framework. These newer annotations are called markers and jump back to Xcode and comment out the mapping. After that, enter this code. New comment, option B, marker, US style. Always static. Map, marker, coordinate, item, dot, location, tint, accent color. As you can see, the syntax of this map marker is almost identical to the mapping. It's worth to mention that both of these are static map annotations. So if we want them to have any user interaction, then we need to create a custom annotation. Custom Annotation comment out to the MapMarker. And let's create a custom map annotations. Enter the following code. New command, option C, custom basic annotation. It could be interactive. Map annotation, coordinate, item, dot location, image, logo, resizable, scared to fit. Frame with 32, height, 32, alignment, center. New comment and off annotation. This new custom map annotation has got an image view inside it. And that's all for this lecture. Testing. Now, let's build and run the project. After the app has launched, select the locations tab menu, then try to move and zoom in or out the map region. As I show you, as you can see, there are six African nation or parks on the map. All of them are located with their logo image. This is only a temporary solution since in their second part of this tutorial, we are going to develop an outstanding map annotation with their sleek animation. Having said that, see you had that class. 10. Let’s develop a complex Map with custom Annotations in SwiftUI - Part 2: In this second part of this tutorial series, we are going to learn how to create a custom dynamic map annotation with a slick animation. By the end of this lecture, when we select the Location menu than VBAC, multiple African animals representing each national parks on their map. Besides that, these custom map annotations are animated as well. Now let me demonstrate to you how it works then via Zoom in the map. Next, as you can see above this map, that is our compact container with they're constantly updating geographic coordinates. This final design is pretty impressive. So if you would like to learn how to develop it, then let's launch Xcode and start coding custom annotation. As you may figure it out, for this custom map annotations, we are going to create a dedicated Swift UI view. Having said that at select the view folder as its destination and create a new swift UI file. Give it the name, map, annotation view, and CV as usual. Great. Now navigate to the preview and add these modifiers through it. Enter preview layout size that fits that the ink is. Then, after that, Let's create a new property for the location shoddy. Enter the following code. Var location, National Park location. All right, as you can see, now we need to add some sample data for the view inside the preview. We have done it many times before, so the process should be familiar to you. First, let's create a new static property. Static var locations, array of national park location equals bundle dot domain, dot decode locations dot G is on. Then click the fx button in the message that NTDs code. Map annotation view, location, locations, index 0. Super. The error message has gone. With this code. We just thought that we want to use the first location as our sample data from the local JSON file. Now it's time to replace the placeholder text with a new image view. So let's do it. Enter image, location, dot image, resizable, scared to fit. Frame, fit, 48, height, 48, shape, circle. After that, embed this image into a new stack container as I do, is the stack new comment and off is the stack. Nice. Now, here goes the fun part with creating its new design. First, let's create a new circle below the image view. Circle. Fill, color, dot, accent, color. Frame with 54, height, 54. It's a little bit bigger than the image, so it via give us a nice border around the image. Next, we are going to add another new circle between these two views. Enter circa, stroke. Color, dot, accent, color, line of it to frame. Did 52, height, 52. As you can notice, the circle is unfilled and it has got only a stroke. It's exact size is not so important unless it's smaller than the image above it. This is the view that we are going to scale up with animation very soon. To do that first, we need to create a new property and that they're following code at state. Private. Var animation. Double equals 0 is 0. Second, we need to add the own Appia review modifier to Desi stack, enter on APR. With animation. Animation. Dot is out. Duration to dot, repeat forever. Auto reverses, force. Animation equals 1. This code makes sure that every time this view appears on screen than the value of the animation property changes from 0 to one. Most importantly, we also declared that this change will occur with an ease out animation in two seconds. Finally, the only thing to do now is to determine what attribute event to be animated. For example, the color, the height, the opposite, and so on. The possibility is endless. But in this case, we would like to animate only two attributes. The size of the circle with the scale effect and the opposite side of the border. So without further ado, let's do it right now. Navigate to the second circle and add these modifiers through it. Scale effect. One plus CGFloat animation, opacity, 1 minus animation. And we are done with this, but now we should test it using the live preview. Let's start the live preview and see what's happening on their Canvas. Chevy. As you can see, when we started, then the size of the second circle is scaling up from original to w size. Besides that, simultaneously, the border color is fading out totally. When the two seconds duration is ended up, then the animation starts again from its initial state. It's mind-blowing. How easy to create such an impressive animation in Swift UI with modifying only two attributes, isn't it? Super? Now it's time to implement these components into the map view shall be first of all, open on the map view. As I do. Then navigate to the active map annotation section and comment add this block. Grade. After that, enter the following code. New comment option, the complex map annotation. It could be interactive. Map annotation, coordinate, item, dot location, map annotation view, location, item. Do you see the new Custom up annotations on the canvas? They are working without any glitches as they should do. How fantastic is that? So far, we made great progress designing this map view. All right, The first objective is already accomplished in this lecture. I hope that you are eager to jump to the next task. Final touches. Now, in their final part of this tutorial, we are going to create a well-designed information panel above the map. That's sad. Let's create a new overlay for the map view. Enter the following code, new comment, and off map overlay. Then add a new image to it. Image. Compass, resizable, scared to fit frame with 48, height, 48. As you can see, there is a compass image on the center of the map. Now, let's embed this image into a new horizontal snack container as I do. H stack alignment, center spacing. 12. New comment. The H stack. After that added these new modifiers to it as well. Padding, vertical, valve padding, horizontal, 16, background, color, black, coronary radius eight, open city, 0.6. Now we will pin this container to the top center of the screen and padding coma alignment top. It's much better now. Okay, now let's continue with their coordinates shall be. First, we will create a new vertical stack container and add a new divider into it to separate the latitude, the longitude, enter the stack. Alignment. Leading, spacing, three divider. So far, so good. Now it's time to develop the upper part with this code. Each stack texts, latitude formed. Footnote, font-weight, bold, foreground, color, accent, color. Spacer. Text. Region dot center, dot latitude, font. Footnote, foreground color, white. As you can see, this holy layout is flexible and it will look great, not only on iPhones, but on iPads as well. We are almost done. The only thing that we need to do is to select this horizontal container and copy, then paste it below the divider as I showed you. Awesome. Now let's replace the latitude, longitude, Shelby and tax longitude. Text, region dot center dot longitude. And guess what? We have just finished the development and the design of this map feature. Testing. To test it, we can use Xcode's beauty in live preview if you wish. As you can see, we can move them up freely and the information panel is updating the geographic coordinates instantly. How dope is that? Do you like it? It's so sleek venue. Hold this up on your hand and play with it. Highly recommended to have it on a real device. I hope that you enjoyed these two part tutorial and learn a lot about how to create a complex and Val executed map with dynamic data fetched from our local JSON file. I can tell you that more exciting lectures are coming soon. Until then, happy coding and see you at that class. 11. Learn how to create a motion animation programmatically with SwiftUI: In these two parts, Swift UI tutorial, we are going to develop the gallery feature. That's the inaction that we create in the first lecture. As you can see, there are many translucent shapes moving around on the screen. It there cool animation, vile. They are moving from one place to a different place. Unpredictably. They are also scaling up or down randomly. That said, we will focus on learning how to develop this motion effect programatically in Swift UI. This is you want to learn, then let's launch Xcode and start coding along with me. Motion Effect. First things first, we need to create a dedicated file for this motion animation. Select the ViewGroup as its destination and create a new swift UI file, as I do. Name this file motion animation view, and save it as usual. Now we are going to embed the place holder text into a very special view Command Plus click on its name and select the embed option from there contextual menu, as I show you. After that, replace the placeholder container with geometry reader. Enter geometry reader. Geometry. In new comment and off geometry. With this geometry reader container, we can measure not only their screen size but any view's size if we wish. Basically, it gives us access to their size and position of their parent's view. To see it in action, how it works, let's modify the content of their placeholder tax Chevy. Insert this court texts with int geometry dot size, dot width, height, int geometry dot size, dot height. As you can notice with this geometry, width and height, we printed out the exact size of the screen in points. One important thing we should keep in mind that when we have wrapped any view into our geometry, read their container, then the origin point will be changed from the center to top left. That's why the text view moved its position from center to top-left. All right, Let's continue developing the motion effect. Now, we need to embed the text view into a new is this stack. And the stack new comment and off is this FAQ super. After that, let's add a new circle before the text, you enter the following code. Circle, foreground color, gray. Opacity, 0.15. Frame with 256 height, 256, alignment, center, position, x, geometry dot size dot width divided by two. Why? Geometry? Dot size dot height divided by two grid. As you can see, we use the geometry, width and height values to position the circle in the center of the screen. That's said, no matter which iPhone or iPad we have, this circle always will be in the center. Cool, is that next? Now we want to create not only one but multiple, So occurs on the screen. To do that, we need to create a new property that we will store a random number for us. Enter at state private var random circle equals int dot random. In close the range from 12 to 16. This code, we generate a random number between 12 and 16. Nice. Now it's time to multiply the circle with our forEach. And that the circle into a new loop by selecting the repeat option from the context menu. After that, modify it with this code. For each clause, the range from 0 to random circle, id dot itself, item. In new comment and off loop. This code, we are repeat the circle as many times as the value of the random circle property. Keep in mind that we then use a closed range in there foreach, then we always have to provide some kind of identification. In this case, it is the adult self ID. As you may notice, our code works, however, we got also called repeated on top of each other and that's not exactly that we want. So what should we do to fix that and move on? Since this motion animation is quite complex, therefore, I will give you or instructions in detail on how to assemble it. Instructions. Enter the following code after their properties section. Mark. Functions. New Comment, number one, random coordinate. New Comment, number two, random size, new comment number 3, random scale, new comment, number four, random speed. New comment, number five, random delay. And here they go. They're functions that we need to create. It's time to go through them step-by-step Chevy. First, let's create a random coordinate with a new function. Enter funk, random coordinate, max, CGFloat, return CG float, return CG float dot random. In, close the range from 0 to max. After that, let's implement this function into our code. Navigate to their position modifier of the circle and replace the existing chord. Position. X random coordinate, max geometry, dot size, dot width, y, random coordinate, max geometry dot size, dot height. Now let's start the live preview, since this is the best way to test the motion animation and see what's going on on the screen. Let's do it. Okay, So far, so good. We got a bunch of circles, was efficient all over the screen. Next, we can continue randomizing the sizes of these circles. Let's create a new function to do that. Funk, random size returned, CGFloat, return CG float int dot, random in close range from ten to 300. This code, we'll generate different sizes randomly, from 10 points to free 100 points. Now, let's change their free modifier. Did this new function and frame with random size, height, random size. Awesome. As you can see, there are circles be different sizes on their screen. From now, we are closer to accomplish our goal. Now we need to deal with the scale effect. Let's create a new function for that too. Funk. Random scale. Return, CG, float, return, CG float, double dot, random. In, close the range from 0.1 to 2 is 0. As you can see, we are going to scale up and down a circle between 0.12. Now let's implement this quote by adding a new modifier to this circle. Shelby, is that they're following code between their frame and deposition modifiers. As I do. Scale effect, random scale. As you can see, the scale effect has been applied immediately without any animation yet. But don't worry, we will fix it right now. Scroll to the top and let's create a new property for this animation. Enter at state, private. Var is animating equals false. Now navigate to the end of the circle and add a new animation modifier to it. Animation. Animation, dot interpolating, spring, stiffness, 0.5, damping, 0.5. Repeat forever. Speed to delay one. As you can see, the edit and interpolation spring animation to this circle with three additional modifiers, such as repeat forever, speed, and delay. Those modifiers are self explanatory, in my opinion. The only thing to do now is to start this animation each time on appearing. Is that this modifier on appear, perform is animating equals true. It's still not animating because we didn't add the animation property to their scale effect. Let's do that. And scale effect is animating. Question mark, random scale. Column 1. This specific quote starts the animation on appearing super. It's almost done. But as you can see on the live preview also occurs, are moving and scaling together at the same time. That's why we need to refine this animation with some variants. First, we are going to randomize the speed, then the delay shall we enter the following code? Funk. Random speed returns, double, return, double dot random. In close the range 0.025 to 1 is 0. After that, modify the speed of the animation with this code. Speed, random speed. It's as simple as that. Next, Let's continue with the delay property. And funk. Random delay returns, double, return, double dot random. In, close the range from 0 to 2. This code, we delay each animation from 0 up to two seconds. Now, change their delay modifier of the animation with this code. Delay. Random delay. Now, guess what the motion effect feature is. Then. We just need to delete the placeholder text from the view. So let's do that. And we have finished developing this cool animation. Just one more thing. Running such a complex animation with tons of moving and scaling elements could be PVD consuming. But don't worry, since there is a special modifier that can cope with these delegates scenario. Drawing group added these new modifier to disease that container, new modifier drawing group. There it goes. As you may know, Swift UI uses core animation for its rendering by default, which offers great performance out of the box. The dead drawing group modifier, this complex rendering won't be slowed down because this tells Swift UI that it should render the contents of the view into Sackler sharks still images, which are significantly faster than real time rendering. Behind the scenes. This operation is powered by metal, that is Apple's high-level framework for working directly with their GPU. And be these tiny addition, this motion effect, we're not suffer any performance reduction. Final touches. All right, before we call it a day, we still need to implement this motion animation into their gallery view shall be opened a gallery view file and embed the placeholder text into a new scroll view. Scroll view, vertical shows indicators, force, new comment and off scroll. After that at this new frame modifier to it, frame max width infinity, max height infinity. As you can see on the preview, this code will expand the scroll view both horizontally and vertically. And finally, we need to add the motion animation to the scroll view as a new background. Enter the following background. Motion animation view. It's done. Now, let's run a test. Testing. Weird and ran the Africa project. The Xcode simulator already opened and the app has launched as well. To test the motion animation, we need to select their gallery menu from that top bar, C, It works like a charm. The translucent circles are moving and scaling up and down organically with different speeds and delays. Splendid. I hope that you would like the swift UI Tutorial and learned something new as well. In the next lesson, we are going to continue our journey by developing a new gallery with a grid layout. There is a lot of things to learn about the new grid system in Swift UI. So we will jump into this topic very soon. Until then, happy coding and see you at their class. 12. Let’s create a photo gallery with Grid Layout using SwiftUI: In this tutorial, we are going to learn how to develop a well-designed photo gallery with a new grid system in Swift UI, these new lazy vertical and horizontal grid layouts give us a wide range of flexibility on how to create grids for the UI. For this particular gallery view, we are going to use the lazy Vertica, I agreed. But everything you learn is applicable for the horizontal grid as well. By the way, are not only covering the basics, but reveal learn how to change the number of columns from two columns after four columns with the help of our slider user-interface. Moreover, the real enemy, this column modification as well. Since there is a lot to do. Therefore, without further ado, let's launch Xcode and start coding. Basic grid. You know, the simplest possible grid is made up of free things. A row data, an array of grid item describing the layout we want. And finally, either Elisa Vertica I agreed, or I lazy horizontal grid that brings together the data and the layout. We will start by defining a specific grid layout with the grid item. Gridlayout first opened their gallery view file and let's create a new property for the Guarneri. Enter. New comment. Simple agreed definition. Let GridLayout array of grid item. Because grid item dot flexible, coma, grid item dot flexible grid item, not flexible. With this code, we have created a new layout property that contains three grid items as an array. Each of the grid item in this grid layout has a flexible says Size. To put it simple, all this code describes a free column layout. Next, we are going to continue with creating the actual lazy vertical grid. Lazy Vertica agreed. And today following code inside the Scroll View, New Comment, mark grid, then embedded text view beside a new container view. As I do. After that, replace the placeholder container view with a new vertical grid view. Lazy Vertica grid, columns, grid layout, alignment, center, spacing, then new comment, and off grid. So far, so good, but nothing visible changed on the preview window. To see how this new grid works, first, we need to repeat the text view for a couple of times. Follow me by repeating the text view. Did their new for-each loop as I show you, for each. Now, as you can see, there are five TextViews in the agreed. We can change this number to 12 as I do to get a better agreed with more rows. So let's do that. See, creating agreed UI is that simple with the Swift UI framework. But we don't stop here since our main goal is to develop a veil working gallery feature. Let's continue with creating a new property for the animal photos Chevy. Enter the following code. Lab animals, array of animal equals bandit, dot domain, dot decode animals dot JSON. Awesome. Now let's populate the agreed with this data. Modify their foreach loop VDS code for each animals. No comment, and off loop. Next we need to replace the placeholder text betai. I knew ImageView. Enter image, item dot image. Resizable. Scared to fit. Clip, shape, circle, overlay, circle, dot, stroke, color, dot, write. Line with one. And here they go. We can see all the animal photos in the agreed. How cool is that? You may think that's it. Muddies courses. Unlike others, the new grid system provides us in less possibilities. But before we continue developing their full Gary feature, I would like to show you how we can refactor the array of grid layout with Swift. Select the whole property with the following technique. First, enter the cursor where they agreed they add property begins. Then we need to press and hold down the Shift plus control keys, vile VR, pressing the down arrow key as many times, as many rows we have. We call this feature block selection in their community after their comment out this property with two forward slashes. Great job developer. Now enter the following Court. New comment. Efficient agreed definition. That GridLayout, array of grid item equals array, repeating grid item. Flexible. Count, free. Do you see how compact this code comparing to the previous one? This code does the same. A free column grid layout. You can always use this form of declaration. Then you need to multiply a grid item with the same attributes. Swift programming language gives us so much power to write clear and concise code. Photo gallery. Alright, It's time to finish up. Their photo gallery feature shall be. First, we need to create a new property that we had hold the necessary information about the selected animal above the grid. And at state, private, var, selected anymore. String equals lion. As you can notice, the initialize this property with a default value that is a lie on photo. After that, we need to embed the whole grid view into our new verticals, that container, as I show you, the stack, of course we need to move the comment into this container as well. Then enter new comment and off grid, new comment and off the stack. Now at these modifiers to this view to padding horizontal, then padding vertical, 50. And before we forget, we need to add a specific spacing to it. V stack alignment, center, spacing, fertility. After all this preparation, it's time to create a new image view for the selected photo. Enter the following code above the agreed new comment. Mark, image. Image. Selected animal. Resizable, scared to fit. Clip shaped, circle, overlay, circle, dot, stroke, color, dot, white, line, if it eight. As you can see, we are playing with circle shapes all over the place in this gallery view. To make this gallery feature work, all we need is to add one line of code inside I knew on tap gesture modifier. And on tap gesture selected anymore. Equals item, dot, image, and is then motto. Make sure it works properly. We need to start the live preview. Let's do it. So then we tap one of their small thumbnail images, then the big image should change accordingly and display the selected animal. Splendid. It works like a charm without any glitches. Slider. Now it's time to add some cool factors to this gallery via learning additional materials about the subject. We are going to add a new slider between the selected anywhere image. And they agreed. So we can modify the number of columns with the slider user interface. But to do that, we need to create two new properties. First, comment at the previous grid layout property as I do. Second, enter the following code. New comment, dynamic Agreed layout. At state, private, var, GridLayout, array of grid item equals grid item. Flexible. Adds it. Private. Var, grid column. Double equals 3 is 0. As you can see, the first property, the GridLayout is initialized only did one agreed item. The second property, grid column is the one that will hold the number of columns inside the agreed since the VA or change. Therefore, both of them are using the state property rapper. All right, after declaring these very important properties, we need to create a new function that we can call. Then we move the tongue to the left or to the right on that track. Enter the following called func grid, switch grid layout. Because array repeating dot in it, dot flexible count, int grid column. This code will update the number of columns each time for the agreed layout. However, pay attention to the live preview. As I told you before, the initialized the grid layout with only one grid item. That's why there is only one column agreed by default. And that's not that we want at all. Our goal is to provide functionality that will allow the user to switch from two columns, have 24 columns. And the very first time when the user selects the gallery menu from that tab bar, then we want that arm to be in the middle of the slide, our track. Yes, you are right. Is their position free? To fix this, we need to add a new coin appear modifier to the agreed. And on a Pierre perform grid switch. Did you notice that change in the live preview window? This code up this grid layout, instantly me that default free value of the grid column property. And guess what? We can finally create the actual slider. After all this prep work, enter the following code between the selected image and the atomic layer. Create a new comment. Mark, slider. Slider value, dollar sign, grid column. In. From two to four. Step 1. Adding horizontal change of grid column, perform value in grid switch. Awesome. Now let's go through this code Chevy. First. As you can see, we are using bindings, be that dollar sign before the agreed column property. It's a mask since its value will change when we move the sliders stamp on that track. Next, the slider's value changes in our closed the range from two to four. These values are representing the number of columns in the agreed and last but not least, the US van for as a step in their changes, you know, from two to three then to four back and forth incrementally. What's important to is the onchange modifier. Without it, we could move that tamp without any problem, but nothing really happened. That's why we need to tell the slider exactly what to perform on each change. As you may have figured out, this is when we call the grids switch function and modify the value of the Agreed colon property accordingly to their slider's value. Now, let's test this new slider on the live preview. Shall we move the slider stand to right or to left and checkout how the grid layout is changing. It's pretty cool, isn't it? Just one more thing? Improvements. Before we call it a day, we always should look for how we can improve the user interface or the user experience. I found two areas that we could do better. The first thing is that the changes in the agreed layout are so quick without any transition. But don't worry, because we can fix this problem with only one line of code. Navigate to the end of the agreed view and add these new modifier to it. Animation these in. Now, let's test this code in the live preview. And when we change the value of the slider, then we should see a nice animated transition in their terminator GridLayout. It's much better now, isn't it? The second thing that we can add to it to improve the user experience is the haptic feedback. To do that first, we need to create a new property and add the following code. Let haptic impact equals UI impact feedback generator style medium. After that, let's call a new method of this haptic impact property. Then as user taps one of that term layers, Chevy, navigate down to that tab gesture modifier and enter this code. Haptic impact. Impact occured. And we are done developing their full photo gallery feature. All we need to do now is to test the Africa application in the simulator or on a real device. Let's build and run the project on a selected device. Testing. After the lunch, navigate to the photo gallery view and test the application. Then tap on as many terminate images in the agreed layout as you wish to see any changes in their beak selected image. By the way, this layout works perfectly, not only import trade, but the landscape mode as well. Now, let's play with the slider a little bit. Shall we? As you can see, we can change the number of columns in the agreed without any problem. And the cherry on the cake is the smooth animation from RAM state to another. How cool is that? Of course, as I told you before, they can test the haptics only on a real device. That's said, you should definitely test this app on a physical device because nothing can be to that. As I wrap up, I hope that you enjoyed this tutorial and learn something about this new grid system in the Swift UI framework. What's more exciting is in the upcoming lecture, we are going to use this knowledge and develop a complex grid system with one list layout and free additional grid layouts. This will be our huge future that we are add more value to this application. I can't wait to start developing it. Along with you. Having said that happy coding and see you at the glass. 13. Let’s develop a complex Grid Layout system with four Toolbar Buttons: All right, This lecture we'll teach you have to develop a complex layout system. As you can see in this preview video, there are two new buttons on the toolbar. The first button represents at least to you that we have developed earlier. The second button is not one button, but actually three buttons operating a new greatly AT cycle. In this grid layout cycle, there is a one column grid, then a two column grid, and finally, a free column grid layout. Having said that, app, users can go through all of these grid layouts by tapping them incrementally. This tutorial consists of two parts. In the first part of it, we are going to develop a single switch from the list view to our two column grid layout. You will see that it's quite easy to do that after that UV or learn how to develop a grid layout cycle, which is covering a more advanced topic. By the end of this class, you will get a fully functional feature available for users on the toolbar. If this is you want to learn, then let's launch Xcode and start coding along with me. Toolbar. First of all, let's open their content you will file and navigate to the end of the list view as I do here, We are going to create a new toolbar for their list. And they agreed buttons enter the following code. Toolbar. New comment and off toolbar. Toolbar item. Please meant navigation bar trailing, new comment and off buttons. H stack, spacing, 16, comment and off each stack. As you can see, we created a new toolbar item and the new horizontal container to stack the buttons on the toolbar. Next, we will add two new buttons to it. And new comment please. Button. Action. Print. Listview is activated. Image. Sees them name. Square, dot, dot, dot, grid, dot x1, x2. Font, title to foreground, color, accent, color. Nice. As you can see on the preview window, there is a new button on the toolbar. Now let's add a new button for the agreed layout. Shelving. New comment, grid. Button, action. Print. Grid view is activated. Image. Sees them name. Square dot, dot, 2X2. Font, title to for grant color primary. This code is almost identical to the previous one, might reveal change it drastically later on. Okay, there are two buttons on the toolbar without any functionality at. To change that, we need to create a new property that will store the actual state of the layout. But before that, we need to fix a mistake that I made in an earlier video. It turned out that I inserted the properties section inside the body view and that's not good at all. Having said that, select the comment and the animals property, then move this code outside the body view. As I do grade, this is the right place to create any properties. Now enter the following code. At state. Private. Var is grid view active. Bool equals false. After that, navigate back to that toolbars button and add new actions to both of them. First, let's start with the list button is agreed view active equals force. Next, we will differentiate the active and inactive states with colors. Add this new modifier to the image inside the button view. For grant color is Grid View Active, question mark, primary, column, accent color. This code makes sure that when the ListView is active, then it's button image on the toolbar. We stayed in warm yellow. In the opposite case, when the grid layout is active, then it will switch to white color. Next, let's continue with the agrees button shall be. The process is similar at a new action to the agrees button. Is Grid View Active equals true. Then add a new modifier to its image view as well. Foreground color is GridView active? Question mark, excellent color, column, primary. After that, we need to create a new property for the haptics. Enter the following code. Led haptics equals UI impact feedback generator style, medium, super. Now let's use this impact method inside that toolbar. Chevy. Navigate back to the first toolbar button and enter haptics dot impact a cured. Then let's do the same with the second button. Haptics dot impact occurred with all these color changing and the haptic feedback feature, we can let users know what's happening when they decide, do you use these buttons on the toolbar? You know, this is a great practice that will improve the overall user experience. Now it's time to test the buttons functionality using the live preview. So let's do it. First. We need to click on the agreed button and the back on the list button image to see whether it works or doesn't. And as you can see, the switching feature between the two states is working without any problem. Complexly out. After all this, we can continue the development working on the actual grid layout that is still missing in their body Chevy. Firstly, via create a new group. Before that is you enter Group, new, comment and off grew. After that, we need to select and move the whole elitist view into this new group without the navigation bar title and the toolbar. By pressing down the Control Shift keys, we are able to select a block of code with the down arrows, as I showed you. Then we, they're all plus or Command plus opening square bracket key combos. We can move up this code block to their desired destination. The reasoning behind this movement is that we want the navigation bar and the toolbar to be shared between their lives and they agreed views. Layout, switch. Okay, after this prep work, we need to create a new conditional statement that will allow us to switch from the list view to a new grid view. That's said, select the List View and embedded into a new conditional statement as I do with their command, click shortcut. And that's it. Now we need to change the placeholders with the following code. Enter. If is not equal, is Grid View active? As this negative conditional statement with the explanation mark is quite self-explanatory in my opinion. Now, let's replace the empty view with their temporary TextView Chevy tax. Grid view is active. Nice. But before we continue, we need to fix their comments here and there. Enter new comment and off condition. Then new comment and off, please. I hope that you'll find these comments such half-full NYC I do. Without them, I always find myself lost that I need to find where I should put the new modifiers. Awesome. Now it's time to test this layout switch feature using the live preview. Let's click on the agreed button on the toolbar, then on the list button. And it works as it should do a great job so far. This allows us to start developing a basic two column grid layout inside the else condition. Basic, agreed. We are going to follow a similar procedure to how we did creating a self-contained list item component for the animal list view. Shall we navigate to the project navigator on their side bar and select the view group has the destination. After that, Let's create a new swift file for the new grid item view. Gives you the name animal grid item view and save it as usual. It's ready now, first let's add some modifiers to WVU. Enter the following code. Preview layout. Size that fits. Padding. After that, we need to create a new property for the individual African animal and lead animal, animal. Now we need to feed the view inside the preview with some sample data and navigate to the preview and enter static. Let animals array of animal equals bundle dot, dot decode, enemas dot JSON. Yes, we are practicing calf to use the JSON decoder all that time. And that's exactly my intention with this project. But in our field that OK, now we need to modify the view with this quote, any metal grid item view, animal, and immerse the 0 index. Okay, it's time to create the actual design. First, let's replace the placeholder texts with a new image view, image, animal, image, resizable, scared to fit. Corner radius 12. And that's all surprisingly, we are going to use this image in the agreed layout no matter how many columns are in dire. All right, now we'll jump back to their content view and let's create a new property for the grid layout. And that grid layout. Array of grid item equals array, repeating grid item dot flexible. Count. To this formula should be familiar to you from the previous lecture, shouldn't it be, have just declared a two column grid layout. Now, navigate to the S statement and less create the actual vertical agreed with. Then you scroll view, as I showed you, start typing this code. Scroll view. Vertical shows indicators, force, new comment and of scroll. Then embed that text view into a new container as I do. So we can replace this placeholder container with a new grid. Lazy vertical grid, columns. Grid layout, alignment, spacing, ten. New comment and off-grid. Splendid. Now it's time to populate this grid with data from the decoded anomers dot JSON file, embed that text into a new for-each loop, for each anomers animal in new comment and DO Loop. So far, so good. Now, before we add the agreed item view to it, we need to create a new navigation link, replacing that text Qc, such like we did previously in that list for you, enter this code. Navigation link, destination. Any more detail view? Animal, animal. Super. The only thing that we need to do is to insert our custom grid item components there. Any metal grid item view, animal, animal, then new comment and off link. It's almost done. Now let's add some padding to this grid view so the images won't touch the screen, the edges and padding 10 animation is in. And that's it. To see whether this code works, we need to test the app using the live preview. After starting it, click on the agreed view to check out what's happening on the screen. Well, that's quite impressive, isn't it? The functionality of this layout switching works like a charm. Now let's test the scroll view and the navigation link as well. Without any doubt, this feature adds additional value to these Africa project. But do you think about it? I hope that you are enjoying these tutorials so far. It was easy. Isn't it? Advanced feature? Now the fun part is coming. But before we start coding, I would like to gently warn you that this learning material will be more advanced than their previous part was. So please don't be depressed. If you don't understand totally was going on. It's still not rocket science, but it needs more programming experience to get it at first. Nevertheless, just follow me line by line and you will be able to accomplish this objective to help you understand the agreed switching system, I made some slides for you. This is the first one. As you can see, our goal is to create a feature that will allow the user to switch from one type of good layout to another type. That's said there are 123 column grid layouts altogether. Our main objective is to create a complete grid switching system. It's important to understand that this system via display, not found button of the actual grid layout on the toolbar, but the next one in the cycle. So users always, we'll know which grid layout will be shown after they tap on the button on the toolbar, we start with the one column grid layout when the app has been launched. But we will never see this initially because the list layout is the default view on the screen. That's why when we tap on the agreed button, then the two column grid layout will be activated immediately. You can check out how this works in action on the left side of this slide. Next, it's time to implement this into code shall be. First we need to replace the basic grid layout with a new one. Enter the following code. At state, private, var, grid layout, array of grid item equals grid item flexible. As you can see, this new array of grid layout has been initialized with only one grid item. As you may also notice, the live preview has been updated with disagreed after I click on the green button on the toolbar, this is the starting point with a one column grid that the user will never see after the launch of the application, since the List View is the default layout, now we need to create two more properties. Enter at state private, var grid column int equals 1. At state private, var, toolbar icon, string equals squared dot grid, dot T2x to this grid column properties, sole purpose is to keep track of the actual number of the column so we can change the image of the agreed button each time when the user taps on it. Just to be clear, we will not use it to update the actual grid layout and you will see it why soon. Next step, the toolbar icon property holds then aim of the system icon that VV or change each time when they're gets, which is from one layer to another one, it will always display the next grid layout in the line of the agreed cycle and not the actual visible grid layout on the screen. To put it simple, there is an offset from the starting point, and users will always see that two column grid layout because this is the next one in the line. I hope that everything is clear so far. Next step, after creating or unnecessary properties for this feature, we need to create a new function that we can call each time when a user taps on the agreed button, enter this code. New comment. Mark. Functions. Funk, grid, switch. Grid layout, the course array, repeating in it. Flexible. Count, a grid layout. Dot count, the remainder operator, free plus 1. Now let's discuss what this code does, shall be first, the update their grid layout with a new value. Pay attention to the second part of the line. As you may or may not know, depending on how experienced a developer you are, we are using a mathematical remainder operator to calculate the actual number of columns for decades. After this calculation, we add one to this number to increase the number of columns by one. This is the bread and butter of this feature. And I am not kidding at all. This short remainder operator does the hard work for us and we just incremented by one to switch their next grid layout. If you want to know how these basic operator works in the Swift programming language in detail, then you must visit the official language documentation by opening the following website address. As you can see, there is even a figure that may help you to visualize how this remainder operator works. But don't worry, I prepared a very specific slide that can help you to understand each calculation. So let's check it out. The remainder operator. Here is how the remainder operator works. To calculate nine remainder operator for you first, work out how many fours will fit inside nine. You can feed two 4's Inside the nine, and the remainder is one. And there is another rule about the remainder operator than a, less than b, then a remainder operator, B equals a. Now let's see how this remainder operator calculates the grid layouts for us Chevy. First of all, let's see the two column grid layout. Since free doesn't fit inside one, therefore, remainder will be always one. Then we increase this one value by one when the user taps on the agreed button and the one plus one equals two. This is how we get two columns for the grid layout. Next that see the free column grid layout. The actual grid layout value is through now. But since free doesn't fit inside that too at all, therefore, remainder value will be two. Then we increase this to value by one when a user taps on the agreed button and 2 plus 1 equals 3. This is how we get free columns for the grid layout. And finally, let's see the one column grid layout. The actual greedily add value is free. And now, since free does actually fit inside a free, therefore, the remainder value will be 0. It's quite logical, isn't it? Then we increase the 0 value by one when a user taps on the agreed button. And 0 plus 1 equals 1. This is how we get one column for the grid layout. And the grid layout cycle will continue with their two column grid layout and so on. All right, I hope that you understand this calculation. If not, then watch this explanation again after the finish up the development of this feature. Now, let's move on and enter the following. Grid column equals grid layout, dot count, print grid number of grid column. As I told you before, we use this grid column property to keep track of the number of the next grid layout. This will help us to change the image of the agreed buttons soon. But before doing that, let's call this function inside the buttons action. Navigate to the agrees button and enter grid switch. This function will be called each time when a user taps on the agrees button and it will do the rest for us. To see whether it works or doesn't work. We need to test it using the live preview. So let's do it right now. And as you can see, each time when the click the green button, the grid layout changes. The endless grief cycle works without any problem. How cool is that? Grid batters? Now it's time to finish up the development of this complex agreed system. The only missing feature is the image changes of the grid button. To do that, we need to create a new switch statement that will change the name of the system icon when it's needed. That's said first navigate back to their function and enter the following block of code. New comment, toolbar image. Switch. Grid column. K is 1. Toolbar icon equals a square grid dot H2AX to case two. Toolbar icon equals a square grid dot x3, x2. Case free toolbar icon, rectangle, dot grid dot x1, x2. Default. Toolbar icon equals square dot grid dot 2x2. As you can see, this switch statement is quite self-explanatory. We always display the icon of their next grid layout and not the icon of the actual grid layout. So there is an offset by one. Alright, after this, we need to use this toolbar icon property. Navigate to the agrees image and insert that toolbar icon property by replacing their previous hard-coded image name, enter image, system name, toolbar, icon. It wasn't that hard, was it? For this final modification? We have just finished developing this complex grid cycle feature. Now, let's see it in action. All right, let's test the Grades button as many times as you wish to see what's happening on the screen. And it works without any egregious using the live preview testing. I'm pretty sure that you will enjoy more using this new feature on a real device as well. Having said that, let's build and run the project on your chosen device, Chevy. After the app has been launched, let's play with their buttons on the new toolbar. So what do you think about this new feature? It's quite impressive, isn't it? To wrap up this tutorial, I would like to congratulate to you, since this was the hardest part of the whole Africa project. I really hope that you think it was worth doing it. In the upcoming two short lectures, we will have some fun adding more values to this application. And the most epic thing about them, that those new features will be so easy to develop. Until then, happy coding and see you at the glass. 14. Let’s create a new iMessage Extension (iOS Sticker Pack): If you are a beginner app developer, then you've really enjoyed this short lecture because we are going to create an amazing sticker pack for the African application without a single line of code. You know, a sticker pack is an iOS messaging extension that lets people share content with friends without typing or using emojis. Sending stickers is an engaging way for us to express ourselves in the messages app. As you can see in this preview video, there is an African animal on each slicker. By the end of this tutorial, you can send six different stickers to anyone. Are you ready to dive in? Then without further ado, let's create a new message extension shall be iMessage extension. First select them in Africa project on that project navigator, as I show you, it's an m should be highlighted. After that at the very bottom of the project panel, click on the plus button and add a new target to this app. And you options window will show up. There. We have to choose a template from the iOS tab menu in their search field, enter sticker and make sure that you choose Sticker Pack extension. As I do. Then click on the Next button for their product name, enter stickers. Then click on the Finish button. After that, let's activate this thicker Shem. Now, I will recommend you to rename only the display name. Replace this thicker name with Africa in the text field. This new sleeker name will be displayed in the Apple messages application for all users. Now, you will see a new target on their project, one L in the middle below the main Africa target. Besides that, you should see a new group called stickers in their project navigator as well. This is the place where we are going to create and use the car pack and folders, tickers folder and click on the stickers Assets Library. Then in the assets library, select the iMessage app icon folder, which is empty currently. Here, we need to add some additional icons for the iMessage. First command Plus click on the name of the iMessage app icon and select the Show in Finder option from there contextual menu. Then select their stickers icons that folder and open it. This is the place where we need to add that previously prepared icons from the Resources folder. Now open a new preview window or tab as I show you. The next step is to go to the IDEXX snap and open the resources folder. Inside that opened the app icon I message folder as well. Sleeker icons. Inside this folder, there are icons of many different sizes that we need to add to the sticker pack. As you can notice, there are not only square rectangle icons as well. Select all files in this folder and copy them into the clipboard as I showed you. After that, switch to their stickers icon set folder in the Finder window, and base all 14 items from Daqri board into this place. The Finder we'll ask you about to replace their content JSON file. So let's select the replace option. Nice job. As you can see, the library has been refreshed with the new iMessage app icons in the Xcode window. Sticker graphics. After finishing with adding the eye message icons, we are going to add all of their pre-designed graphics to their sticker pack. To do that, select the empty sticker pack folder in the assets library. It's empty, but you should see a dedicated drag and drop area at the top part of the window. The next step is to navigate back to the Resources folder in the Finder window, then open this thicker folder inside it. In reality, each C calligraphic has a transparent background and rounded corners, but in the Finder window, it shows us a white background color. Now select all these VNG files and drag and drop them into their sticker packs container. As I do excellent job. We can close the Finder window. Now, you might be interested in how to customize the appearance of these thicker extension. To do that, make the inspectors Spanner to be visible on the right side or the Xcode and select the attributes inspector menu. In this panel, you can set how many columns you want to display in the messages app. There are options for 23 or four columns. I find that frees the cars on our row are the most suitable for this application. And the ad almost than I would like to show you how we can change the order of these the girls, if you are curious about it. To do that first unfolded sticker pack folder, then select one of the animals. Now we can move up or down this thicker by clicking on its name and dragging it to the desired position. As you can see, it's quite easy to do that, isn't it? Testing. Also, we have just created an outstanding Sticker Pack extension for the African application. It's time to test this the coast in the simulator or on our selected real device. Make sure that stickers is the active shim on the top toolbar and run it by clicking on that build and run button as I show you. Since we chose to run this the gas, therefore, Xcode will launch the messages app in the simulator instead of the iOS app. I am pretty sure that you know how to use the Messages app. After launching these iMessage extension, you can finally send and receive these speakers from one test user to the other tasks user. Let's play with it a little bit shall be. We can even switch between the two test users in the messages simulator and send the animals the gas to each person. You only need to find the new icon of these thicker extension with the lion graphics in a capsule shape. By clicking on this icon, you can launch the IMS each extension. Here they go. Now send back another African animals, thicker Chevy. Not only that, we can switch from the light mode to the dark mode using the simulators features menu to test how that transparent background works. The animals, the curves have a sleek designed heavens day. No doubt that people will love to send these thinkers to each other. How fences that, I bet you have fun playing with this, the curves just like I do. I hope that you enjoyed this course so far and I can confidently tell you that you will find more exciting things in their final lecture. First, we are going to create a well-designed block of content about the application with the help of a very handy customer, Swift UI modifier. Second, we will bring the Africa project to the IDEXX snap using Apple's catalyst technology. If this is you want to learn, then See you in their final class. Until then, happy coding. 15. Let’s transfer the iPad app to desktop Mac app with Mac Catalyst technology: Did you enjoy developing these Africa application so far? I hope so because this will be the last tutorial in this section. First, we are going to create an information box about the app utilizing a custom Swift UI modifier. Second, we will transfer the Africa Project Walk deck stop Mac app using attributes Catalysts Technology. By the end of this class, we finish up this multi-platform application. All right, without further ado, let's get right into this info box. First of all, we need to create a new swift. Do I file for this self-contained info box Chevy? Select the view group in their project navigator as its destination and create a new swift to AI file, as we did several times before giving you the name, either credits or copyright, you as you wish. After that added these new modifiers to the view in the preview. Preview layout. Size that fits. Padding. Great. Now let's replace the single line content in that text view. We then use multi-line tax. Just a side note before we do it. If you are a beginner developer, then you need to follow me strictly, enter the following code. Tax free, double quotation marks, copyright, Option plus g. Then place your name here. All rights reserved. Better apps, less code. Free double quotation marks. Please pay attention to their free double quotation marks. And they are called intonation because it's really matters when it comes to multiline string literals in Swift programming language. After that, we need to insert a new heart symbol into the last line. To do that, we need to open the character viewer, press V control, last command plus space shortcut. It will open a new character viewer window above the Xcode. This character viewer window has a compact and an extended view. To switch to the extended window, we need to click on that button on the toolbar. Super. Now enter the hard work into their search here to see all available symbols. After that by selecting divide hard suit, this utility program will insert this character into our tax. See, it's there. We can close the character viewer and delete the extra space if it's unnecessary for the code. Okay, it's time to add some modifier to this text. You enter the following code. Formed. Footnote, multiline text alignment center. Great. Next step, embed this text view into a new articles that container, as I show you, this stack, new comment and off the stack. Padding. Open city is 0.4. This opposite in modifier will help us to convert all content inside these three stack from white color to a semi-transparent color that looks gray above the black background. That's sad. Let's add a new image before that tax 30. Enter image. Compass, resizable, scared to fit. Frame with 128, height 128. And we are done with creating these self-contained view. It's quite impressive, isn't it? Now it's time to insert it into the list view at the home screen. Implementation, first opened their content you'll File and navigate to the list. You then enter this code before the closing bracket. Credits view. Now let's see how this code works using the live preview. After starting, you scroll down to the end or delis and check it out. Oh, as you can see, there is our new credits view, but for some strange reason, it's aligned to left. And that's not exactly what we want at all. You should keep in mind that the ListView is thrifty wife comes with some default preferences. Many times this could work perfectly as we intended, but sometimes it does the opposite things. This is a great example of that. If I am not mistaken, there is no dedicated list cell modifier for the alignment in Swift wireless through yet. But don't worry, since we can put these credits view into our horizontal stack container as a wrapper and fix this problem with ease. And this is a perfect candidate to show you how to create a custom Swift UI view modifier that you can reuse it as many times as you wish. Custom modifier. To do that first, we need to create a new group and the new swift file, the new group name VRB modifier. After that, Let's create a new swift file and give it the name Center modifier. Then save it to its destination. Great, Now let's import the CIF to AI framework as I show you. Ok. Now we are ready to create a new custom view modifier. Enter the following code. Extract center modifier, view modifier, funk, body, content, content, return some view. As you can see, there is a specific formula for creating a custom view modifier in Swift UI. And the structure is very similar to a regular Swift UI file. The only thing that we need to do is to enter some content inside the body. And each stack space or content spacer, this new horizontal container, your center, any content inside the view with the help of their two spacers. It wasn't particularly hard to create this modifier, isn't it? Now let's edit this modifier to their credits view. Shall we jump back to their content view file and navigate to the info box? Enter credits view modifier, center modifier. And let's see how this modifier aligns the info box inside the last least row. Scroll down to the bottom of the list view and check it out. See, it works gorgeously, no doubt about it. I hope that you liked this result and how we sold the alignment issue in the list cell testing. Now, let's test the Africa application in Xcode simulator Shelby. However, this time we should select an iPad, the device, as I show you. After the app lunch, let's try out how things work. See the list view is on the left side of the screen. On iPad devices, we can scroll down and Appian delis, and without any problem, we also can switch from list view to grid layouts. Let's check it out. Excellent. Do you like it? I hope so. Now select a different animal from the grid layout. Awesome. What about hiding the sidebar totally? It's doable by tapping the New button on the toolbar. Watch how the app works in full screen. It's quite outstanding, is indeed Mac catalyst. We have reached a point where everything is ready for us to transfer these Africa to a Macintosh. Using Apple's Mac catalyst solution, we can bring any full iPadOS add to that snap computers. Ru, such excited as I am. Sounds great. Then let's do it together. Jam back to Xcode, then select them in Africa project on their project navigator pane. Now, before we add support to Mac OS, we need to select the right target. We want to configure, select the Africa project with the icon right after that under the General tab menu in that deployment in for section, we need to select the Mac checkbox. As you can see, Xcode we're asked to enable this feature. Select Enable. Then we enable the Mac OS support. Then Xcode will create a new file and it will also add the app Sandbox entitlement to our project. You can see how this works by selecting the New Africa entitlement file in their project navigator. As I do, Xcode only includes this entitlement in the Mac app version of this project. Then Xcode editor, I knew my Mac device to the toolbars list of destinations. To give it a try, select the My magazine new destination, and click on that build and run button as I do. Now, wait for a sec while Xcode is compiling the very first time our Mac application. And here it goes, the African macOS. It's not assimilator, but are full fledged deck snap application. Let's play with it a little bit shallow. V, select one of the African and immerse from Dallas. Great job. It works perfectly. But did you notice a different accent color depending on your individual who has settings? To make it more obvious, Let's launch the system preferences and select the general settings there. Here, we can override the accent color globally, no matter what specific accent color we decided to use in our project. Let's try a different accent colors, shall we? What about to the blue than the green? The orange, even the yellow and green colors. Do you see how the primary accent color is updating immediately after each change? How cool is that? Now, let's check out them in menus and features of this project. As you can see, the detail page is beside that is through. Now, let's test the video player by selecting a movie from the list. After that, we should checkout the map feature with their custom map annotations as well. It works like a charm. What about the gallery feature? We need to test the as well. As you can see, it works too fantastic. Now, let's change the list layout to greatly Chevy. But do you think about this mock-up? It's incredible how easy it was to bring our mobile app to Macintosh. We can even hide this sidebar, just like on the iPad. So far, this africa was identical to our iPad app. Now let's see something new, something cool. All right, at info, as you already know, every decks that has got a menu bar by default. That's said move up the mouse pointer to that toolbar at the top. And under the African main menu, select the about Africa option, as I showed you. And it opens a new info window about the African application. This window contains not only the app icon, but for some additional information about the decks that app as well. Splendid. Congratulations. You have just develop IDEXX snap app that has some extra features. Now, let's have a brief look at the icon shall be. As you can see, the icon has irregular square shape without rounded corners. The reason behind it that unlike iOS and iPad OS, the Mac OS doesn't add any mass with our rectangular shape and corner radius to the icon itself. That's why this Africa icon is slightly different. The app icon is visible on the dock as well. Let's check it out. See, it's almost perfect. But don't worry, we can fix this design issue by adding some dedicated icons for this backup. So let's do it right now. Dedicated Mac icons. First, John back to Xcode and open the Assets Library. As I show you here, we need to select the app icon folder to see the Mac icons. Add that to this project. Do you see all Mac icons at the bottom of the editor that are then of them in one line. And we need to replace them with icons, we transparent backgrounds and rounded corners. To do that, just go to that next step and open the resources folder in a new finder window. As I do, there, you will find a particular folder called app icon mac. Let's open it and take a quick look at the different sizes of icons with rounded corners. Our goal is to add these specially prepared icons to the Assets Library. I would highly recommend you to switch from the list you to the icon view in their finder window. As I do, we can move this window around a little bit to see the targets in the assets library underneath. Now, we need to check out the icons, filenames, and notice many variants of the icon set. Every ad icon size has both been ex normal and T2x retina resolutions as well. Our goal is to drag and drop each pair of icon sets from their finder window to their slots accordingly to their size. Follow me carefully and do what I am doing precisely. First, we start with their 16-point Mac icons, then we diverted to point icon. Next, drag and drop the 128 points Mac icons following me, there are 256 points icons. Finally, we finish up if their beak 500 points App Store icon variants or some jab, it's time to build and rerun the MCA. Just a gentle warning. Since Xcode uses caches to build and run projects quickly. Therefore, we need to close Xcode and relaunch it before seeing the new icons inaction, close Xcode and relaunch it. Splendid. Now we can build and rerun the African market. After it's launch checkout, it's new icon on the dock as I showed you. It has got the rounded coordinates. Now, how fantastic is that? Now, navigate to its menu bar and open the app info window by selecting the About menu item. To be honest, I am quite speechless that you manage to develop these outstanding application. Congrats fellow developer, you made it. By now, the Africa app should look like a native MacOS by also running on iOS devices. As you can see now, it's relatively straightforward to start building a native Mac app from an existing iPad OS application. Be the Mac catalyst are African, shares their same project and source code. So that's why we cooled efficiently convert this iPad Air 2 MAC for APA. I hope you enjoyed this course so far. And I can confidently tell you that more projects are coming. Just one more thing. I would appreciate it so much if you could take that time to give me a five-star rating. Or even better if you could share your learning experience with others for dance by writing a helpful review of this course. This way, not only motivate me to publish more outstanding projects to this course, but at the same time, you have other students to be informed about this excellent learning material as well. Thank you so much.