Develop an iOS Todo App with Core Data and SwiftUI | Robert Petras | Skillshare

Develop an iOS Todo App with Core Data and SwiftUI

Robert Petras, UI Design & App Development with SwiftUI

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (3h 9m) View My Notes
    • 1. SwiftUI Tutorial with Core Data Learn how to develop a Todo application in Xcode

    • 2. Let’s set up the Todo app project with Core Data and SwiftUI

    • 3. Learn how Core Data and SwiftUI frameworks work together

    • 4. How to fetch data from Core Data and display it in a List view with SwiftUI

    • 5. How to show an image and a quote when there is no todo item in the List

    • 6. Let’s improve the Todo form appearance with SwiftUI

    • 7. Let’s create an advanced Settings and learn how to open an external website link

    • 8. Let's develop a feature: How to create iOS Alternate App Icons with SwiftUI

    • 9. Let's develop a feature: How to create App Themes with SwiftUI


About This Class


Let’s build together another outstanding iOS and iPadOS app with SwiftUI! The new project will be a Todo application with Core Data.

In this intermediate class, you’ll write your very first Core Data application with SwiftUI in Xcode. You’ll see how easy it is to get started with all the resources provided in Xcode, from using the starter code templates to the Data Model editor.


What is the main project of this class?

Learn by developing a fully functional iOS and iPadOS to-do project with Core Data and SwiftUI.


Who is this class for?

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


What is the difficulty level of this class?

The difficulty level of this SwiftUI class is intermediate.


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

By the end of the class, students are able to accomplish the following development tasks and build a Todo application:

  • How to build an impressive Todo iOS and iPadOS application
  • How to save data permanently to the local database with Core Data
  • How to add priority for the Todo items
  • How to delete Todo items
  • How to create an outstanding Home view with custom illustrations and quotes
  • How to build a complex Settings view
  • How to develop a new feature: Alternative Icons
  • How to develop a new feature: App Color Themes
  • How to open external links like Web pages, Twitter app, etc.
  • How to create a subtle animation and enhance the UX
  • How to support Dark/Light user interface

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

Students can share screenshots of their finished projects with the teacher and other students on the Skillshare learning platform by creating a new project in the class.

By doing that the teacher of the class with many years of experience in the app development industry and other students are able to give feedback to the students.

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

Technical requirements

There are only two technical requirements for this SwiftUI class:

  1. macOS Catalina from Apple (free)

  2. Xcode 11 from Apple (free)

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

Custom iOS 13 and iPadOS mobile app icon


What is Core Data?

Core Data is a framework that you use to manage the model layer objects in your application. It provides generalized and automated solutions to common tasks associated with object life cycle and object graph management, including persistence.


What is Alternate iOS App Icon?

Learn how to dynamically change app icons in your iOS apps. Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system, such as in Settings and search results.


1. SwiftUI Tutorial with Core Data Learn how to develop a Todo application in Xcode: Swift UI is a modern way to declare user interfaces for any absolute platforms. Creating useful and functional iOS apps is faster than ever before. The desk Swift programming language, learning app development with Atreus native user interface framework and creating remarkable application is a practical and enjoyable activity with their right learning material and teacher. Hi, my name is Robert, the lead instructor of this class. I am a professional US EPA developer and UI UX designer. In this class you will create your very first core data application with Swift in Xcode, UVA, see how easy it is to get started with all the resources provided in Xcode from using the starter code templates to their data model editor. Who is this class for? This intermediate level class is suitable for every aspiring app developers who want to create useful applications from scratch. The skills you will pick up from this class can be used to create apps with similar functionality for both iPhone and iPad devices. Is that glass wall about this practical class is about completing three main learning objectives. Swift UI framework. The first thing that you will learn is how to use the swift Dui, Apollos native user interface development framework, iOS development. The second thing that you will achieve is learning how to create these customizable application and store data on your device from scratch. Xcode essentials. The third thing that you will acquire is the essentials of real app development in Xcode code editor. But will you create in this class, by the end of this class, you via created these to-do application that users can launch and use on their mobile devices. These to-do app provides some very cool customization options, such as changing the app icons or selecting a different color team or the entire app. After completing this hands-on project, you can use it as a foundation of app development or building even more complex applications. Why should you take this class? Project-based learning approach? This class takes learning programming concepts through a project-based approach. It means that you learn everything you need to know by creating this application as your class project. Contextual learning. This glass also heavily relies on contextual learning, which means that no mirrors at development concepts are introduced only when we need to use them. Hands-on development. Finally, this class is not just going through boring programming concepts, but instead we will focus on writing real Swift code in Xcode, approves official app development tool. By taking this class, you will improve your app development and programming skills by creating these real-world application. Without further ado, let's have some fun and build these outstanding to-do app ID Swift, you, I see you had the glass. Okay. 2. Let’s set up the Todo app project with Core Data and SwiftUI: in this tutorial. Uriel, Right? Accorded the application. It's rift You I in X scored the new project. Maybe had to do up. You see how easy it is to get started using the core data started caught template provided by Ex scored in this section we are going to build. This happened differently, as we used to do before their to do after TORIA consists off two parts in the first part. Off the tutorial, we are going to develop their full lab, focusing on core data and nothing else. In the second part of the tutorial, we are going to enhance the user in their face and the user experience touring, designing you, Why and you x. We are going to learn some exciting concepts and develop some totally new features as well . All right, enough talking. Without further ado, let's set up a project in X court. Them loaded the resource flies from this section, then place it to the deck. Stop and and zip it by clicking on the package. The provided the main folder consists three folders marked with the Swiss logo and the Supplementary Bird book file. With the main objectives off this tutorial As you know, by now you can find the completed project in the green folder. This finished project with the source courts may have you when you are stuck and need some creek help. The red further contains All of the resource is you will need to build that Toto application. Finally, we are going to save this ex court project into the students Blue folder. All right, that's a lunch X scored. Then create a new project. Select the single of you at Project Template under the U. S. The bar. Next, we need to configure our news 50 y project for the product name enter to do? Yep. For the team, if you have an apple developer account, Logan in here allows you to build your app on the device. If you don't have an apple developer account, you can skip this part and test your app in the IRA simulator on your Mac organization name . And they're your personal or company name. Here. You can leave these blank to for now. Organization. Identify where we usually enter the company website address in reverse order. For example, come 50 y, Master CASS, the Bandel identify ire is automatically combined from the project name and the organisation identify air. Next, make sure that the language is set to Swift, then the user in their face, must be swift. Why as well. Finally, the most important set things in this tutorial. Make sure that the cord that option is checked and they use Cloud Kid isn't another thing. The unit test and the U. I test option should be unchecked as well. After all of the settings, click on the next button and Xcor will ask us where we want to save our project on the computer. Navigate to there there. Stop and choose the Students Up folder as the destination off your ex court project. All right. After creating the new exclude project, we are going to prepare the Toto application by creating a user input form only after the spread work review. Learn how to use the court that, having said that, select the content you file in the Project Navigator panel and let's create a new group from selection by control, click or secondary mouse button, click on the fire name, then this group toe view. After that, let's create the new Swifty Wife ill name. It to add to the view and save it into this father. As usual, you separate them in sections off the court by declaring new comments with a separator Mark Properties Mark Body Mark Preview Super. Now we are going to head a new navigation view to the body navigation view and navigation just that creek and had full tip for you. We attached a new comment at the very end of the navigation view. You know, I find myself sometimes lost when I am trying to figure out where should I put a new view modifier. For this reason, I tend to end this kind of short ending comment as a reminder to speed up my coding. Furthermore, I like to skip typing the end word totally and substituted with a simple colon. Do you see how easy is to mark the end of the court broke with this technique? All right, back to the main topic. That's an embed the placeholder text into a new world. Take our stack container. These thank new go meant and off these tech. Then the let's add the following modifier to this V stack navigation bar title You to do this play mode in line this cold beer display a title at the very top of the screen. As you can see on the preview. Nice. It's time to create a new input for inside this vertical container. Enter form, then move the text you inside the form and add a new spacer after the form For spacer, Great. Now less creates a new properties that were stored the name and that priority. If I new to do item in the form, add stayed private bar name string and this string at Stade Private Bar Priority String Normal as you can notice, the default value of their total name is an empty string. As for the priority, it will be normal. Now we are going to define all priorities with a new array and, uh, let priorities. Hi, Normal. No, nice job so far. Let's continue with finishing up the form with adding new elements to it. Shall we? We are going to start with adding a new text fear to the form mark to do name, text field to do next dollar sign name, then the let's add a new peak. Care for their to do priorities mark to do priority be care priority selection. Well, our sign priority for each prior of these i d backslash dot self. Thanks, don't our sign? Zero, since we only have three priorities such as high, normal and low. Therefore, instead off using the standard we carry Y component officials switch it toe a segment that bigger style at the following more the fire to the speaker. Bigger style segment that bigger style. It's much better now, in my opinion. But do you think? Okay, the final element in their form is the save button. Let's created right now. Mark save button button action Print Save I knew Toe the white them decks. Save you comment. Save button. With this block off court, we only bring the short message into the outward panel. It's quite straightforward is ended. Now let's a jump back to the content you file and prepare you for dealing with court that are later on. We start with their comments as you got used to mark properties, mark body mark preview, then add a new navigation view inside the body navigation view navigation. After that, let's remember the placeholder text into a new list. You, as I show you please zero less, then five idm in text. Hello Vered, please. This list will display their to do items later on. Next, we had a new title or the navigation bar as well. Navigation bar title to do display mode in line Super. Now let's have a new button to this navigation bar to navigation bar items trailing. Then enter this block off court Inside it. Bratton Action New comment show at to do view image sues them. Name bless add button. Our goal is to open the gate to the view when a user tap on this button. In order to achieve this goal, we need to create a new property that were stored the state off this behavior enter Add stayed private bar showing at to the view bull equals for us. Now navigate back to the battle and replace the comment line with the following court Self showing at toe the view total. This will toggle the bullion value of this property from forced to true, and that can fought. Now it's time to create the actual sheet that were displayed. The head to the view she'd he's presented dollar sign showing at to do view. It's to do with you after finishing with this, opened the attitude of you file again. We are going to create a close button on the navigation bar to first, and they're a new environment property at the top of the file environment. Max slash dot presentation, more bar presentation mode, then at a new navigation bar item with the button inside it to the existing vertical stack container navigation bar I attempts trailing button action said presentation. More rapids value this miss image. Cyst them Name. X Mark this block off court of your display an X mark button on the navigation bar, and it will close the sheet every time when a user types on it. And that's it for this lecture. That's a jump back to the content you and tells the whole F starting The Life Review Shelvey started right now. All right, on the home view that is a list of to do items with some temporary placeholder decks. Now let's stop. On the plus button, we shall see a new form with a text field, a picker and the save button inside it. Finally, by clicking on the X mark button, we close the shade of you our code works perfectly as it should. Since we have finished doing all of the prep work, we already is to start working with core data. Having said that, see what their class. 3. Learn how Core Data and SwiftUI frameworks work together: Thea first step in working with core data is to create a data model file because we decided to use court that I went, He created this project. Therefore, X court created this data model file for us in the Project Navigator. You can see a new XY that a model file. Then you select this core data model file. Then you will see totally different settings in the editor in, though, than ever before. Here we defined the structure off our to do applications object, including its types, properties and relationships. If any, both of the smaller left part and the larger right, right off the editor are empty here, we need to create and configure a new core data entity. If you are not familiar with entities, you can think off an entity as a class in swift programming language. Discord at the entity could have many attributes as well. These attributes are like the properties off that class. Our main goal is to create, read, update and delete toe items in the local storage in computer programming, create, read, update and delete, or the four basic functions off the persistent storage. Many times we mentioned this development approach. Just saying crude. Now the only entity we need for the simple to the Web is for holding different to do high temps. Having said that, this up must have bought entity and some attributes, such as the name of the to do item. And it's priority. Let's create a new core data entity and the configuring it shall be. We are going to create an entity by clicking on the large class button at the bottom of the editor and then by double clicking on the entity itself. The very name eat toe. Do as I show you. After creating this to do entity, we are going to add attributes to it. Firstly, con the blast button at their tribute section and give it the name I d. At the type column. Select you You I d this to do our tribute to generate a unique identifying for each to divide them. Next. Let's create another attribute this time. Give it the name, name and for its type, select string. So far, so good. Now let's create the last tree boot off the to do entity. Click on the plus button again and give it the name priority at the type column. Select Shrink. Nice job. We have just finished setting up our core data model for holding the to do items. Buzz in that easy. There is one more important thing that you should know about this. Korda Tamada. After we defined it to the entity and its attributes, core data automatically generated to five to support the data model behind the scenes. The first file is a class file, and the second file is a properties file. These fights are hidden by default and we cannot see and modify them from the Navigator panna, since their core data takes care of generating these managed objects subclass for us. Therefore, we don't need to manually deleted it. It's quite convenient is indeed just a quick note about core data later on. In this master class reviewed, develop and had vest application with court data, very well learned. Have to generate a manage Objects are class and these properties manually. All right now, Jim, back to the stood web and let's take a short look at how core data gets implemented by Swift ey, take a look under the hood place. Open the app Adela Gate file the second thing you've you notice. Besides the review, asleep mentioned, exceed that a model file that they called that a framework was imported here by the ex courts than plate after we created this to do project. Now, scroll them a little bit as search for the other modifications off this file. Do you see the newly generated chunk off court off the court that a stack ex court added a new persistent containing property tohave delegate that laws that to do model vial into a container? After that, X court also created a safe contacts metal toe the delegate that were check for changes and save it if needed. There are more modifications in their seen delegate file as well. Open this file and let's see what's going on there as well. There are three changes inside a sin delegate class. First, there is a new context property, which is injected into the initial content use environment using their managed object context key. Now scroll down a little bit. Second, we call the safe contacts metal from the sins delegates Sin did enter background metal, ensuring that court that are these are triggered than the scene moves through the background. These new changes in the delegate and sin delegate vice provide us the complete ability to use core data. Fetch request using swift you. I don't worry if you are not familiar with this yet the only important thing you need to remember for now is that we can use the managed object context for fresh ink and saving the to do items, since we have already composed the user in their face off the to do well in the previous lecture. Therefore, we are ready to learn how to save a new to do item toe the intern er that the base open the content you'll find and let's create a new environment property at environment backslash dot managed Object context bar managed object context by using these managed object context in the environment. Rapper, we can assess the Internet or storage in this lecture review, learn how to save a new to do item using this property in order to achieve this goal. First, we need to pass this manager object context toe ed toe the view which is displayed in a shade at a new environment modifier toe. This view in the sheet adds to do view environment. Backslash dot managed of jack context Self managed object context After that opened the ed to do view and let's create another environment. Property at Environment. Backslash dot managed Object context Bar managed Object context. Now these through views are connected to each other and everything is prepared to save. I knew to Dwight them toe the intern our storage, go to the button and replace the brain function with the following block off court. Let to do it was to do context. So managed object context to do name equals sev name, toe do priority equals self priority. With the scored above, we have just created a new to do item instance off the to do entity. Then we deter mined this to do items values as well. The i d off the to do item is automatically generated by calling the U. U I D method so we don't need to deal with it. It's time to save these to the white them today in their non storage, and they're they're full of in court. Inside the batter's action. Do try said managed object context. Save Gedge Brilliant. It are in case something's goes wrong. We are using the do try catch error handling for safety. If there is no problem, then are new to the white Them if you will be safe to the data storage, be called called a day because that's all you have just learned half to wear. Says they're in their nurse storage by using the managed object context in the UPS environment and have to save to divide them into it. But wait for a second. But if the user doesn't answer anything for that to do name and the accidently taps on the save button, wouldn't it be nice if we could check this case and prevent saving an empty toe item in the database? We can do this by embedding our coat into a new conditional statement. Are you read to me? Let's create a new if statement and move our cold into it. If self name explanation mark equals and this ring and that's it nice. It's time to does that, to do help in order to see what's happening. Then we have the save button. We are going toe print. The recently saved to do item into the outward by adding this court after the safe method brilliant you to do backslash to do name priority max slash toe do priority, since there to do name and their to do priority are optional values. Therefore, we need to provide a default value to avoid the compilers. Warning. What if I different metals as I show you toe do priority. The blue question mark and this rink to do name double gusher mark Empty string. Great job. The warning is gone. Now let's try toe desk that to do happen. The simulator shabby, milled and ran the AP in the simulator, then tap on the plus button on the navigation bar. After that, enter masters with you. I into the text field. Now select the high priority for this task and save it. If everything goes right, then you need to see the new to do item printed out into the outward panel. Let's enter another task just to be sure about that. Our code is working without any problem and charities. So far, so good. What about trying to save an empty task? Let's do it. As you notice. Nothing happens in the output panel. The conditioners they'd meant works perfectly and prevent House to save an empty text to the database. We could be satisfied with these results, but something is there missing, in my opinion. Wouldn't it be nice if he could ask somehow the user to enter something into the text field ? Showing on alert mean, though, is a great solution to improve the user experience. We can do it with direct calling and a large window. But what if we had have not only one text field in their form, but many others? I am going to show you now have to manage this kind of situation by creating are usable technique for basic form, validation and error handing Go to the top of the file and let's create three new properties. Add stayed private bar that are showing bulls equals for us. Add stayed private more. Your title string equals empty string. At ST Private, you are error message string equals empty string. After that, navigate back to Dave conditional statement and add a new S statement to it as self there are showing it was true. Said they're old title. It was invalid Name, self and our message equals. Make sure to enter something for the to do item return it is Lakoff Court. It ogle the state off the alert window that we are going to have that shortly to the V stack. Just one more thing before we do that, do you remember that we call safe? Not only one task to the database, but multiple entries. It's quite strange behavior, isn't it? We can fix it by dismissing that she, after saving a new task into the intern er storage, added these one line off court after they've statement seven presentation mode. Prep it. Value this, Miss that fact. Now let's finish this lecture by this playing the actual a large window shall be. Let's add a new alert modifier. Toe the vertical stack alert. He's presented dolar Sign error showing alert. Die too. Text at your title message. Thanks. Error message this Miss button the Ford Next. Okay, great. Let's see if these cold works by running are up in the simulator. Opened a new to do sheet by tapping on the glass bottom and try to save an empty east. Ask. We should see a new alert window on the screen, warning as to enter something in the text field. It works as it's supposed to but about this missing the sheet after saving, I knew it asked with another base that's tested as well, and that's it. I couldn't be more satisfied because we not only learned the basics about how called other works with Swift Why, but we managed to save new to do items to the Internet storage as well. In the next lecture, we will find a way have to fetch all of the safe to do items from the database and display them in the list of you having said that, see what the glass. 4. How to fetch data from Core Data and display it in a List view with SwiftUI: in this lecture, Revere, learn how to fetch data from the database and displayed in a list for you In the reviews lecture, we have already created a new environment property. This property wrapper looks inside the internal storage by using their managed object context. Now, in order to retrieve toe items from the internal storage off the device, we need to call a new factory quest. Doing this with Swifty, why is surprisingly simple using the fetch Request property Rapper. Without further ado, let's open the content. You file and start According let's enter the following court at the top of the file at virtually Crest entity to do entity sort the Scriptures s so to the script or key bus backslash to do name scanned ing true Voller to do this fetched results to do. All right, let's go through this block off courts that by step, this fetch request needs to know which cord that I entity to use In our case, this is there to do entity. Then we have to determine how Corta should sort the fetched objects. We can do this by using an N s sword descriptor and specifying the attributes we want to use for sorting the fetched result. We decided to sort every to do item by its name in a scanning off a bet order. Please keep in mind that we need to add a new back slash before they keep off. Finally, we passed the fetch data toe, another viable for holding their to do items we call it to deuce. I hope that everything is clear and you can digest this new information. After this preparation, it's time to actually display the fetch the results in our list you by using a new for each loop. First, let's clear up the least. You, by deleting the place, hold their content like I show you, then at a new forage, look to it and there the following court for each self. Two DUIs I d. Backslash self to do in and off forage by using that Trudeau's patch request in this luke or data automatically differentiated to do items from each other by looking up to their u u I d. Inside this loop, we are going to display the content in a new horizontal stack container and third, the following court Age sec, Thanks to do name W Castor mark. Unknown spacer. Thanks to do priority. That blue question mark unknown. This junk off court should be self explanatory, in my opinion. Basically, we put that to the name on the left side and the to do priority on the right side off the road. Okay, we don't did nice to see what's going using the Life review. Let's start it right now and nothing happens on the campus except that there is a narrow. Yep, the review has stopped working at the point when we called the new court that are fetched requests. So simply put it, our preview window doesn't know about the core data. Therefore, we have to adjust the corresponding preview Strack for running the APP again in the preview simulator. As you can understand, the preview should assess the manage object context as well. To do this, you repeat the steps as excluded it for us. Previously in the scene Delegate file. Let's create a new context with the persistent container and injected inside a new environment rapper. When we called the content to you on the campus, enter the following in court in the preview lead contacts because you I application shared delegate as explanation. Mark App delegate. Persistent container view context After that, we need to call the content you with a new return key like I show you return content to you Environment backslash managed object call index context By doing this now are content you preview is able to manage the court that I request and ran are caught on the campus. Let's start the life review again regardless that the for each loop go through all fetch results. You still see only on empty leased on my preview because I haven't created any to the attacks yet. Now I am going toe head new to do items to the database. Then I had a second tax to it and the 3rd 1 as well as you can notice each time I tap on the save button. Then I new to do item is displayed in the list. You. Our court works without any glitches, as it should do. Stop the life review and let's learn how to delete a to do item from the list and update the database. Shelvey. Do you remember when I told you about the crude programming meddled that's right this time reveal deal not only their delete, but the update parts off it. First, we need to create a new function that will be called each time than the trigger a Deal it operation. Let's create a new function at the bottom off the content to you Mark Functions Private funk delayed to do ed offsets Index set Ford Index in offsets led to do Equals two DUIs index managed Object context Deal it to do do try a managed object context, save, catch, print and are first we start with the new comment line as usual. Then this New Delhi to do function goes through every index in the storage and adds its corresponding item toe the to do one by one. Fortunately, the cord letter automatically via no, which I tend to do it so we don't need to deal video manually after deleting their to do item. Then we need to update the database. We do this in a safe by using a do try catch, and we're handling as many times before in this master class. Now it's time to call this delete function than a user swipes a certain row inside the list . We can do this by adding a new modifier to the for each loop and, uh, on the late that form the leads to do, and that's it. Now let's there's the delete function by starting the life preview the second time by calling our new function in this on the lead property, they are able to delete a single toe the whiten when we swipe from right to left or from left to right, depending on the language that we are using. So far, so good. Just one more thing. Another useful feature provided by the operating system is to add a building edit button to the navigation bar. Its implementation is super easy. We need to just insert this edit button inside a navigation bar as I show you navigation bar items leading. I did a pattern. Why do you think about it? It couldn't be easier, in my opinion, since we have reached the end off this lecture than it's timeto Death star coat in the simulator or on a real device Chevy that's build around the application after that. And there, Sam new tasks. By using the input form, you can switch its priority from normal too high or low as you wish to. What about if we try to save an empty task to the storage? As you can see, it's not possible due to our conditional statement that we've road before. Now, after adding and saving you to do items into the database, we can try to delete them by Spy Ping from right to left the selected rose off course. We need to test the new added button on the navigation bar. It works perfectly as it should do. I bet that you are satisfied with finishing this lecture. You have learned not only have to save a to do item into the internal storage with core data and swift do I but have to manage this letter by adding the deal it and update functionalities these applications, as well as I told you at the beginning of this class before coast on this court learning material about core data. So far, it's a great achievement that we have a fully functional toto AB in our hands. In the second part of the sexual Revere focus on how to enhance the user in their face and the overall user experience by adding additional functional days to this to do application , for example, we are going to display a random illustration with a random productivity quote, and there are no tasks in the list. Then we were create and advanced that things for you with more handy features, like other Nate, at icons, at color teams and so on. I hope that you are excited about the upcoming lectures as I am See you at the next class. 5. How to show an image and a quote when there is no todo item in the List: in this video via learn how to improve the overall user experience. Instead of showing a boring blank list. And there is no to do item and captured, we are going to display around, um, image with a random productivity tip on the screen. Without further ado, let's start with modifying the projects that thinks shall be first open X court. Then select the main project in the Project Navigator panel at the deployment in four section, please and check Landscape Left and right options. These through APP works best in portrait mode. Great. Now we are going to create a simple yet very designed large screen. First opened their sets further than let's create a new folder for the Apple logo. Now give you the name Blanche screen. After that, navigate to the deck, stop and open The resource is folder in the new finder window. As I show you in The resource is Walder. You will find a large screen folder, open this lunch screen folder and take a short look at the graphics inside it. As you can notice, the to do have logo has got a light great and the dark gray color radiance with a regular and multiple resolutions as well. Select the light grey graphic rice, then dragged them into the previously created empty lunch screen folder inside the assets holder. So far, so good. Now it's time to prepare this logo for the dark mood as well. Click on the inspectors button to show it next at the appear Ian section, select the any light and dark options. By doing that, a bunch off new empty slots will be a paired in the middle part off the window, waiting for adding more graphic cassettes to it, since there any appearance is identical to the light appearance. Therefore, we just need to copy the logos from the any toe. The lights. Lots. Obviously, the graphics off the one x two x and the free X resolutions must be matched. Super. It's timeto had the dark grey logos to this set. Make the finder window active above the X cords and one by one, select and drag the graphic Feist to its matching empty slot according to its resolution. Nice job. Now open the lunch screen storyboard file. We are going toe had this to do apple logo to the center of the screen. Click on the big class button on the toolbar and search for the image you element in the pop up library window. After you've wanted, Select the image icon and drag and drop it into them. This storyboard screen. Try to position it to the center of the screen by using the help of the vertical and horizontal guides. Easy peasy, isn't it? At the image views attributes Inspector Banel enter to do and select the to do Apple logo. Graphic a set Now First, we need to wear an exact site to the logo. Click on the Add new Constraints button at the very bottom of the Editori in the. After that, enter 96 points for David and 96 points or the hide, he said, the size by clicking on the ads to Constraints Button. The final task before we finish. Creating the lunch screen is to align the logo to the center off the screen, regardless off its dimension. To do that, click on the add align button and select the horizontally and vertically in container and check marks as I show you. Then at least two new photo layout constraints to the logo, and that's it. since we have just successfully created this lunch screen. Therefore, we should test it right now on a real device, or at least in the simulator. Let's build and ran the project super duper. There is our to do logo displayed on the lunch screen. It looks great both on the light and the dark. More. Now it's time to develop a brand new view, displaying a randomly generated restoration and tax label above the empty leased to you beer started developing the conditional logic off this functionality. Open their content to your file and navigate to the list for you, since we want to display a new view on top of the empty leased you. Therefore, we need to stack these views by using a new disease back. Let's embed the existing list view inside a newsy stack one off. The easiest race to do this is to first embedded in tow. Avi Stack with help off X court. Then we need to rename this V stack disease that as I show you Z's check this way, the indentation off the court will be perfectly aligned, and it avoids us making any mistakes Accidentally optionally, we can add an ending comment at the very end off the Z Stack as well. New comment and off z Stack. After all of this prep work, we are going to create a new conditional statement. And third, the following in court mark No to do items if two DUIs count Equus zero Next empty leased As you can see, this court were decide whether to display a new view above the empty list. Having said that, if there is no toe item to show in the least, then attacks, you really appear above it off course. We want more than just displaying this tax. What we really want is to display different view on the wall screen and hide the least you underneath it. That's why we need to create a news 50 y file. Now select the View folder on the Project Navigator panel and let's create a new suite. So I file give you the name empty leased view and save it as usual. We start with entering some comments for the main parts off the court Mark Properties Mark body mark preview. After that, we are going to embed the placeholder text inside a new verticals. That container these Tech alignment Center spacing 20. Thanks. Use your time wisely. Now this code is ready to add a new image view with an illustration, navigate to the assets colder than open. The resource is folder with a new finder window on the deck. Stop that is a folder containing all of the illustrations. Open it and select all of these more than illustrations with transparent backgrounds. Next, drag and drop the graphics into their sets holder. Then let's create a new folder from this selection as I show you give you the name illustration. I like to keep everything neat and organized there, but about you. Now jump back to the empty leased view and finally, at a new image. You inside the V stack, enter the following code image illustration. Number one pretty sizable. Scared to feed free him. I mean, the weeds. 256 idea of it. 280 max. We'd 360 Mean height. 256 Ideal Hide. 280 marks. Hide 360 Alignment Center Play out, Priority one. As you can notice, this image has got a flexible with and high two dimensions with the priority modifier we can force to expand the image and get bigger on the divider. I pets screen. All right. What about the next to you? Off course we can style eyes it with. I think these modifiers through it. Text layout Priority 0.5 Formed. Cease them. Headline design rounded Finally at this new modifier toe the vertical stack as well. You comment and off v stack Bad think horizontal. Not too much is going here, but it's enough for us until we start developing the color teams 42 application later on. Just one more thing. We need to make sure that the empty leased for you and the entire screen will be covered fully on there. Now we have just work with the image and the text. It's time to add a new color background to this for you. The easiest way to do this is by embedding the existing this that content container inside a new disease back disease. Thank you. Comment and off Z's Thank super. Then add the following modifiers. Through it cream mean it. Zero max with infinity. I mean, hide zero Marx hide infinity, the grand color gray And now the last modifier is quite important and just ignoring safe area. All. Oh, some job. This container with the background color were stretcher the entire screen and Heidi empty leased few underneath it. It works as it should do, but now we need to replace the background color with a better one. To do this, we are going to create a new adaptive color set in the assets for their open their sets warder and create this new color set by clicking on the plus button at the bottom of the editor. Give you the name color base and make its appearance to adopt the light and dark moods as I show you, that ship would spawn L on the right side of the X court in, though after that, select any appearance at the mid Lee editor and changed the input method off their colored from floating point toe accidents. Immel at the attributes spanner enter the following values off the light grade there F one F oven f seeks. Now copy this any appearance, color toe directly board at the middle editor, then select the light appear Ian sculler beside it and replace it by basting the light great from their clipboard as I show you. So far, so good as for the darker periods we are going to create. A pitch black color slider values off the red green blue colors to zero in order to achieve it, and that's it. But before we jump back to court, you need to create a new folder for all of the color sets that we are going to use for this project. So let's do it nice. We are ready to use this color set for the background. Open the empty leased to you again and replace the existing background color with the Newman. That grand color color base. It's so much better, in my opinion, we can test have these adaptive color works in the dark mood as well. Navigate to the preview and add a new color. She modifier to it. Environment. Backslash color shihm dark. The background color just works perfectly both in the light and the dark moored. Please ignore the harsh fight for Gant. Color off the text. We really replace it later on when we develop the color. Shame for that to Doapp sees our main goal in this lecture to enhance the user experience. Therefore we need to work on. Furthermore, as you may know, by adding a fine turned animation to specific you I elements we can crab the attention off the user. That's exactly what we want to achieve now reveal add a septal animation toe their content off this view, including the image and the text as well this week why animation will be triggered in multiple occasions. The 1st 1 is when the user opens there to the Web, and there is no tasks on the list yet. The second case is when the user deletes all of the tasks on the least, became empty. To do this, we need to start the state off the animation by creating a new property for it. Enter the following court at the beginning of this tract and stayed private. Var is animated bulls equals force, then navigate to the V stack and add some new modifiers to it. First, the animate the opacity off the content from 0 to 1 over city is animated question Mark one colon zero. Then we are going to move the content Vertical E to its final destination by 50 points offset. Why is any May did question mark zero Kahlan minus 50. After that, we define a smooth is out animation that we will take 1.5 seconds long. Animation. He's out. Duration 1.5. Finally, we are going to trigger this animation only than this content appears on the screen and said its state on a pier perform said, is animated Tuggle. All right, it's time to insert all we have done so far into the main view. Shelvey. Let's open the content you file and replace the place for their text. Read it empty list for you and that's it. Now let's wield and round the up in the simulator or in earlier device, as you can see shortly after the lunch screen disappeared are animated content with the illustration, and the productive entity is displayed on top of the anti least for you. Not bad, that's all. Our goal is almost accomplished. The only functionality that is still missing is the randomly generated illustrations and the productivity tips. Let's develop this feature right now. Shelby open the empty leased view once again, and let's create a new array for the different illustrations entered the following court. Let images array. Offspring equals illustration. number one illustration. Number two Illustration. Number free. All right now let's create another array. But this time it will collect all of the productivity tips. Enter let deeps array of string because use your time wisely. Slow and steady wins the race. Keep it short and sweet. Put hard tasks first, Reward yourself after work. Collect tasks ahead of time each night. Schedule for tomorrow. After finishing with creating these properties, you may wonder that we are going to create some functions that were generated around the image and the random string. For us. You are right, except the fact that this time I am going to show you a shorter and much, much easier way to generate a random element in Swift. Are you ready for it? Awesome. Then navigate to the image of you and modifying its value in the following piece. Off court image. Backslash open and close parentheses, images, random element parentheses. Double question. Mark said images. Zero. What do you think about it? It couldn't be easier, in my opinion, using the images random element metal, we are able to generate a random image from the array, since this airline metals value is optional Therefore, the second part off the court is a must. Basically, the W castor mark is an ill coalescing operator that helps us toe under up the images random element safely and ensure its value in case if something goes wrong by declaring a default value to it. In our case, the default image is the first illustration. Now we are going to practice this random element and the near coalescing operator on the productivity tips. Let's replace the content of the text to you with the following court decks. Backslash parentheses keeps random element. Prentice's double question mark Self thieves zero. Everything seems to be okay. If the compiler is happy, then we are happy as well. Finally, let's test our on a real device on in the simulator. Shari build around there to do project. As you can see, our app didn't crash, and they can see the impressive content with an own appear animation on top off the empty list for you. Now let's create a new to do item that we've your delete shortly after, and tests have these new functionality works, and there it is. After directing, the only to do item are newly created content view is displayed on the top of the anti list for you. Our code works without an egregious, and that's a quite achievement. We have just learned have to display new content on top off another run using a conditional statement with this, the improved the overall user experience as well an added additional value to this to do application. I hope that this long lecture, but informative and you enjoyed learning with me see you at the next class where we are going to improve the user in their face. Furthermore, 6. Let’s improve the Todo form appearance with SwiftUI: in the first part of this lecture, we are going to improve the to do forms appearance with Swifty. Why, as you can see with some handy modifiers, we can create a professional looking user in their face. In the second part of this tutorial, we are going to create a new ad battle with Apple Is ating animation on the first screen. All right, Without further ado, open the add to the file and navigate to the beginning off the form for you. Let's face it, the default you I design provided by the operating system is quiet plane, which is totally okay since we can use it as a starting point. Let's start to make this design better than its existing look. Shelvey first, maybe a get rid off the forums view because we don't want to display the separators and the bottle's design that it provides us. Having said that replaced their phone view with a new V's thank as I show you v spec alignment leading spacing 20 then at the following modifiers to it as well. You comment and off v Steck bad ink, horizontal bad thing Mercy. Call 30 Super as you can notice in the review. The separators are gone already. Now we are going to improve their U I off the text field by adding the following modifiers Through it bad dink background color you eye color, tertiary system feel corner Reduce nine formed. Cease them Sighs 24 Great board design the Ford. Whoa, whoa, whoa. Hold on a sec, you may say, where does this tertiary system feel color came from? As you know, Apple's IOS operating system provides us many you. I components with the default to design system. This default designed system changes from time to time when Apple decides to refine or totally refresh the whole look and feel, or only just some parts off it, in some cases, off the next big Iowa s release. However, one thing is sure about this design system, its official name is human in their face guidelines. And Apolo designed it not only for us, but all of its platforms, such as requests Virtue s and Steve us If you want Toby Ah, well rounded. I us for Mac os app developer. Then you should be familiar with these design guidelines. Please visit a prison official website at https Developer not apple dot com slash design slash human Boesch in their face dash guidelines, Web address and select the I was the commendation from the available options on the page. By doing that, you will notice the table off the contents on the left side bar. Now click on the visual design main topic and read all of the sub venues there. I would like to highlight through SAT topics from the visual design. These topics are the color and the dark mood. The documentation off these topics is not only informative, but I would say quite crew Sure, if you want to create a modern and professional design, for example, in the color section, you can gather helpful information about the default color system. Next from the dark motor documentation, you can learn how these default colors adopt the light and the dark appearances. Finally, this third Cherie system feel is one of these operating system level color assets that we are using for the background off the text field. I hope that the short side track was useful to you, and I highly encourage you to get be familiar with this human in their face guidelines as soon as possible. I can talk it more about for countless hours, but you need to get back to the track. Let's continue the up development. Be designing the save button Shelvey, navigate to the if conditional statement and comment out the brain function inside the button. We don't need it anymore. Next, go down to the text you with a safe string and enter the following modifiers to it. Formed Sees them sighs. 24. Great board Design the fort that dink free him, me and the beads. Zero Max Reid The Infinity background Color blue corner radios. Nine for grand color color, Right. The school is quite self explanatory in my opinion. First we said the same size and the way to the front as we did review Asleep or the text field. With these, we kept the design language consistent after that by using the infinity frame setting for the heat off the battle we achieved to expand it horizontally. These white horizontal battles are quite popular nowadays in app design. Then V edit a temporary blue color background with rounded corners. Invite four grand color to the button and that's it. We have just finished designing the import view off the to do up. What do you think about it? It's definitely better than the previews plane stuck. User Interface design Isn't it good job so far? Now it's time to create a new ad. Bratton. Open the content you file and navigate to the existing at button on the navigation bar in the upcoming lecture. Reveal. Replace it. But now we only need is to copy the sheet modifier inside it. Let's do it right now. After copying the shade to directly board scroll down to the end of the Z stack and placed it there. The reasoning behind it is this sheet will be triggered by the new ad button and the previews. One of you be replaced when this thought developing a new settings view. All right, enough talking. Let's get down to the business first, let's create a new over late for the new ad button. Overly. This will align the battle to the bottom right corner on the screen. Next, we need to create the actual button inside his overlay modifier. Enter the following called Bratton Action Sev showing ads to do view Targo Image seus them name plus not circle dot feel very sizable. Scared to fit the grand circle feel Kallur Color base frame Did 48 Hide 48 Alignment Center . Super Not bad at all. Did you notice that background with a circle shape inside it? We need this one because the plus sign in the same ball is cut out from the shape the color off the circle always adopts to the light and the dark. Appearances accordingly, with these tiny details are at battle. Looks much better now, But before we aligned this battle to the corner, then we need to embed it into a new Z stack. Since the final button consists of two parts, let's create a new visa back and rename it to Z Stack as I show you disease. Check new comment and off Z stack. Now we are able to align this container to the corner with the following perimeter Today. Overlay coma alignment, but I'm trailing as you notice this will align disease that container to the bottom right on the screen above the safe area. The only thing we need to do is to add some bad things, too. It enter bad ink, but, um 15 bad ink trailing 15. Great. The design of the bottle gets better and better. It's time to finish it by adding a group off circles below it that we are going to any made shortly after. Let's create a new group. The two circles in the Z Stack Group Circle Feel Color Blue Upper city 0.2 free him did 68 Hide 68 Alignment Center circle Feel color blue up a city 0.15 cream Great 88 Hi 88. The Element Center. As you might notice, each circle below the at symbol is slightly bigger than the other one. The transparent background is a perfect match for depositing animation that we are going to develop right now because we always need to start the state of the animation. Therefore, go back to the top of the file and let's create a new property for it. Enter the following court, add stayed private of our animating button bull equals force Super. Now jump back to the group off circles and modify their oper cities. As I show you, modify the opacity off the first circle up a city itself animating button Question mark zero dot to column zero then the second circle opacity. Self animating button question Mark 0.15 column zero Great. This will change the opacity value of the circles from total transparency to their original values. Next, we are going to add a new scale effect to these circles as well, and these through the first circle scale effect. Seven. Animating button question. Mark one column zero, Then at the same modifier toe the second circle as well. Scale effect seven. Animating button question. Mark one, colon zero. So far, so good. Now we need to declare precisely what kind of animation we want to run continuously at this animation modifier toe the group itself Animation Animation. He's in out duration to repeat forever. Auto reverses. True, this piece off court were run, and he's in and out animation slowly and repeatedly forward and backward. With the combination of the upper city and skill effect, this will create a custom possessed animation. Just one more thing. Before we finish this tutorial, we need to decide when to run this animation as many times before we choose to run it. Then it's appearing on the screen. Having said that at a new on appear modifier toe the battle as I show you New comment. End off button on a beer that form seven animating button Togo. It's then I am pretty sure that you are already eager to test this to the Web on your device or in the simulator. Let's do it together. Build and run the project and verities after the lunch screen that is our newly created and animated at the new task button on the first screen. Its main goal is to grab the user's attention to it, but about the input form. It's quite impressive, isn't it? Do you like it? I hope so. We can import you task in the well designed text field and save them with the horizontally flexible button to the local storage. It was in court that now let's there's there to the Web in the dark mode as well. Go back to ex scored and click on the environment overwrites button at the bottom of the editor. Now change the interface style from light to dark and play the that with the Web a little bit. Pay attention to the left of colors off the text field or the add button. The design of this through the Web is much, much better now than it was before we started this lecture, and I am so glad that I could show you by designing a user in their face is so important. But hey, we are not done yet. In the following lectures, we are going to develop new features for this to do application. Having said that, see you in the next class. 7. Let’s create an advanced Settings and learn how to open an external website link: in this tutorial, we are going to create a complex lee out for the new settings view. It's rift you I besides learning how to create a sleek group, the least give you learn, have toe open external website wings as well. Before we start coding. I think that it would help us to understand the layer design if we take a look at the final design and go through the building blocks one by one first. Since we want to navigate from the main screen toe, the settings view by using a new button on the navigation bar. Therefore, it's of use that we need to create a navigation bar here as well. Inside this navigation view, there is a primary vertical stack that consists off to other parts. The first element in this re stack is a form you've you see that form view in I us and iPad . UAs is very, very powerful. You. I component when the size of its content is bigger than the size of the screen, then it automatically provides us a scrolling functionality. The second part of the container is a simple food, er but only one text you we decided not to put this text to you inside their form because we wanted to speak at the bottom of the screen on purpose with this combination off the form on the text view inside a vertical us that container. If you get a very impressive custom, Leah design and that's it. In a nutshell. Without for Dorado, Open X Court and let's create a new file by right click or control kick on the View group on the Project Navigator. Select this 50 y view from the tram plates and give it the name settings. View. After that, save it into the view for their then, as usual, remarked the three main parts off the court with new comments. Enter Mark Properties Mark by the mark. Preview. Super. Now let's embed the placeholder text you into a new navigation view. Navigation to you, New comment and off navigation. Great. It's time to create the primary content forever. The verticals, that container embed the place order tax you into a new V stack as I show you these back alignment center spacing. Zero you comment and off these thick after finishing read it. Now we are able to create a new navigation bar title at this body. Fire to the V Stack Navigation bar title. Sad thinks display mode in line. All right. The navigation of you and the primary content rapper are done. It's timeto continue with creating the form with swift you I enter the following in court inside of Easdaq Mark, form form Then move the place for their tax Into this form new comment and off form Before we continue developing the main sections for this form, we are quickly going toe build up the complete falter You really see how fun is creating minor you y elements with somebody Delis enter the full of in court after the form mark Food er next copyright All right Reserved backslash and better abs Bless Gord. Just a quick reminder Using a backslash class and character inside a string has a special meaning in programming. The result is a new line in the outward text. I would like to insert the just one more thing there, navigate the coarser between the apse and the less words and pressed their control Plastic Oman plus space bar keyboard combination. At the same time, it will prop up the character view of Indo above the ex Corde. Now enter the heart words into the search, feared, then select and click on the White Hart sweet character as I show you. After that, close this window by doing these steps, the character of you work will insert this heart symbol inside the text. Do you see it on the preview? How cool is that? I bet that you have seen these before in one off your favorite mobile applications. This is how we do it for fun. Now let's add to Destexhe some new modifiers. Shelvey multi line text alignment, center formed food note, bad ink dope six, I think. But, um, aid for grand color color secondary. It's much better now, in my opinion. Just one more thing. I think that we can do better with this plane form. Have you ever wondered about how to customize a form? It turned out that Apple provides us some styling options for forms to. Unfortunately, it's not so where known have to do that, But that's exactly what we are going to do now at these two modifiers to the foreign view, please Style group At least style environment. Max slash horizontal size class regular Now let's talk about what these modifiers do when we create a new lease for former view with 50. Why, then it's default style we'll be playing. However, we can change it toe a group least style. The difference between the default and the group police style is the following. The group least style adds a gray bar above and below the least perform. With these small modifications, we can visually separate the sections in the form that we are going to create in the upcoming lectures, but above the strange horizontal size class environment body fire. Using this modifier, we are able to drastically change the design of the form because we want to enable this inset style for the group form. Therefore, we must said the horizontal size class environment where you from come back to regular. Such is is the case with full screen scenes on iPad. If you want to get a real world example for this inside group least style, then I highly recommend you open the settings on an I bet and for example, then you select the general menu. Then on the right side off the view, you can see the inside group list. Having said that, don't forget that we need explicitly at these two modifiers to the form or list view in order to get the insect groups style for iPhone. And finally, please keep in mind that this might change, if approved, would introduce a delegated inside group, the least style with the next swift you I release in the future. All right, Only wanting is still missing in these design. In my opinion, we want this food or to blend into the main container. But right now, as you can see, it's background color is different than the background color off their form of you. We can fix it by creating a dedicated background color for the footer that is identical to the adaptive background color off this form first opened the assets Walder and let's create a new color said by clicking on the big plus button at the bottom off the middle panel. After that, give it the name color background. Now expand the inspector panel by clicking his button on the toolbar and make this background color Toby Adaptive, select the any light and dark options for its appearance like I do then change their color in put metal from floating point toe Hexi decimal. Enter the following value for the any appear Ian's Hash tag F von F Van F six. Now select these any Hyperion's color on the editor and copy to directly board. Then select the light, appear ius and replace it with the color from that keyboard. Finally, select the dark appearance color and change its color value at the inspector panel. And there the following accidents seem a value for it. Hash tag. One c one c. One e. After the spread work, jump back to the settings view and let's at a new background modifier toe the verticals that container by grand color. Calor background As you can notice, the background color is now identical to the background color off the form. The only thing we still need to do is to make this background. We expand beyond the safe area to do these at this modifier to the color of you edges ignoring safe area all and that's it. Congratulations. We have just finished developing the main layout and they look off the settings view In the rest of this lecture, we are going to focus on developing two new sections with content inside them. First, we are going to create a reusable components for de static form section. With this component, our code remains clean and neat. Having said that, let's create a new swift. You I file as usual, give you the name, form, Rose, static view and save it to the View folder. Now Mark Demi's sections in this file with new command lines. As always, mark properties mark by the mark preview. Great. Now, since this you, I component will be a row in the form. Therefore, we should modify the preview early out accordingly and that the following modifiers review layout fixed with 375 Hide 60 Bad thing. After that, we are going to create three new properties for holding their content off the road. Enter Bar Icahn Spring Bar first next spring bar, second decks string Seems there is no default by you Declared for these properties. Therefore, exclude will throw us an error message in the preview. To fix it, we need to add some tests content to the preview. Click on the figs button and Xcor ville creep operate the missing Are humans there? The icon will be gear. The first text will be application, and lastly, the second text will be to do nice. The editor is gone. It's time to design the layout of this room, but before that I am going to zoom the preview window to 100%. Much better now. The main wrapper off the content in this road will be a new horizontal stack container. Embed the placeholder taxing toe A new H stack, as I do next. Replace its string with the previously created first text perimeter. Thanks. First text, then at a great color for its foreground color for grand color color gray. After that, enter a new space, sir spacer on the right side of the road, we are going to place the second stacks and the decks. Second decks. I like to see what's going on in the preview that I am designing a newly out. It's so helpful for me. The only thing that is still missing is the icon on the left side of the room. Let's do it right now. There are many ways to do this, so you were see only one solution for death. First, let's create a new disease back disease thank then at a new branded rectangle shape. Inside it. Rounded rectangle corner radios, aid style continues. Feel color gray. Next, we are going to add a new image with a system symbol above this rectangle. The meat sees them. Name I go on for grand color. Color white. Finally, we need to declare the exact size off the Z stack in orderto get a perfect square. Enter free him the 36 Hide 36 Alignment center, and we are done with creating the study. Grow component. Just look at the preview on the finished design. Now it's time to use this, competent for creating a new section in the form. Open the settings of your file and replace the placeholder text with a new comment line for Daniel Section Mark section For Then let's create a new section with a header. Text about with section Had there Thanks about the application. New comment and off section for bad Think Vertical three. After that quickly entered the first that he crew for Moreau. Static view. I go on gear first. Thanks Application Second, thanks to do look at the updated review window. So far, so good. Let's country new Harvard by adding more rose to this section shall be former roads that view I go on. Check mark dot seal First text compatibility Second Thanks iPhone. I bet for Moreau. Static View. Icahn Keyboard First text Developer. Second text. John or Jane Forum Robes Static View. Gary Cohn, Paintbrush First text Designer Seconds Tex Robert Address for Moreau. Static view Icahn Flag first Thanks, Vision. Second decks 1.0 bond zero is then what do you think about the newly created? Is that group form section? I think it's much better than the default form style, but we won't stop now because we are going to create a new section for this form, and this time I will show you how to insert a website link into a row. This new feature will add more value to this to the Web. For sure, the process is very similar to the previews. One. First, we are going to create a new U I component for this room. That's great. And you swift you. I file and give you the name, form, row, link view. Then save it to the View group, as I do now. Mark the main called blocks with new comments as you get used to mark properties. Mark BODY MARK REVIEW Super now at the following modifiers Toe The preview Review Lee out Peace with 375 Hide 60 heading. We can zoom the preview to 100% if it's necessary as well. Grade. It's time to declare all of the properties for this room. Enter a bar. I go on string bar color color of our thanks spring var Blink string. As you can notice, there is a new color property and the new link property created for this component as before, we need to fix the missing argument error in the preview. So let's fix it by adding a test content for it. The icon will be this time glow. Then they let the color we think for the text Enter website and finally the link will be https. Swift you i masterclass dot com Perfect. The error already has gone. Now navigate to the placeholder text and simply replace it with a new horizontal stack container ages thick, then enter the following code for the colored icon on the left side of the room disease. Thank rounded rectangle corner radios aid style continues. Feel color image sues them. Name I go on. You mean skill Large for grand color color wide. Free him. I didn't 36. Hide. 36. The Diamond center He is it Busy is ended. As you can notice, we use the color property toe colorize around the rectangle according to its value since we entered being in the preview. Therefore, his background color is pink. Next, we are going to create a text beside this icon. Next text for grand color color gray, then a new spacer for pushing it to the left edge spacer. Finally, let's create a new button with a temporary comment line inside its action button Action. New comment. Open a link image. Seus them name. Chevron, right? Phoned. Sees them size 14. Great semi board design. Rounded excellent color color system. Gray, too. As you may notice, we chose to use another system color for the Chevron symbol. I found it slightly lighter than the default system. Gray color. All right, The layout and design off this you, I component, are done. After all these design work, it's time to learn after weapon in external Erling in a form first entered the following piece off court inside the action. But don't worry. If you are not familiar with it, I will explain it truthfully. God let you are l Equus u l spring Self That link coma you, I application shared can open the u l You were ill as return you I application shed open. You were ill as you, Ariel. Great job. But we want to do first with this code is to safely check that there is a value in the link property. Besides that, we also want to safely check whether our app is available. Toe handle the given you Ariel shame as you can see, the use of God error handling, therefore safety. If one off the conditions his force, then our court escapes from this section block and there to the web won't crash. Having said that, if all conditions are true, then there to the weapons the specified you area link. It could trigger the suffering bro's er on our device. Or even that we tear up if it's already installed. Okay, enough talking. Let's implement this you I component and use it for creating a new section in their form. Shelvey open the settings view last time in this tutorial and create a new section about the previews. One As I show you Mark section free section Heather Thanks Follow us on social media, New comment and off section free bedding. Vertical three. Great Now all we need to do now is to enter at least three rows here. Form Rolling view. I go on globe color, color pink. Thanks website Blink https column forward slash forward slash swifty Why masterclass dot com The first throw is, then we can see it in the preview window. Next, let's create the other two rows as well. Form rolling View Icahn Link Color Color Blue Next Teeter Link. Https column forward slash floor sesh twitter dot com forward slash Robert Patras Form Rolling view Icahn play dot rectangle Color color Green text courses Link. Https column forward slash four slash www dot you Demi dot com Poor slash user forward slash Robert Dash Potrykus And that's it. We have just created two new you I components and use them to build up two sections in the settings form. But before we call the day, we need to achieve that. The user can navigate from the home view to these settings for you and back to it as well. To do this, we are going to create a new clothes button and place it to the navigation bar. For that, we need to use the presentation mood in the up environment. Let's create a new environment property to achieve that at environment backslash both presentation mode var presentation would. After that, navigate to the end off the main vertical stack container and let's create a new clothes button on the navigation bar. Navigation bar items trailing button action self dot presentation mold Both prep it value dot dismiss image sees them them X mark. This will dismiss their sheet and navigate. They use their back to the home view after tapping on the close button. Great job. Now open the content you file the last time here. The only thing we need to do now is to modify the bottle in the navigation bar. But to do read first, we need to create a new property that we're hold the state off the settings view. Let's do it right now, head State private bar showing said. Things view bull because for us, by default, the settings view in the shed is hidden. Now go to the execs thing button on the navigation bar and change the action as I show you Upsell showing settings. View Tuggle, then replace the Plasticine Balto. A paintbrush symbol like I do. Finally, we need to make sure that the open the settings view in the sheet as well modify the shit. According to this goal sheet, he's presented Dollar Sign showing settings. View said Things of you, super duper. Now let's there's there to do upon a real device or in the simulator after finishing each tutorial in this section are apt, gets better and better. Let's see the new settings view. What do you think about it? The new settings view with the indented group sections is quite impressive, isn't it? What about testing the links? It's perfect that to the Web didn't crash, and by tapping on dealing, it opens the suffering bruiser and visit the official website off this course. Not bad at all. Do you like it? I hope so. We can open that with their link as well. If you have already installed that you tear on your device than the eye us instead of opening the website. It will open the APP itself. He's in that cool. I think so. Now I am going to show you how you can switch from light A periods to die A periods using them. And you are, however, on the features main menu off the simulator. Then click on the toggle appearance menu item. As you can see, this feature has got a short cut as well. With the shift class comment class a shortcut. We can do this in a sec. I found it so handy that I use it constantly without thinking about it. I hope that you were start using it as well in the next lecture, unclear than happy coding. 8. Let's develop a feature: How to create iOS Alternate App Icons with SwiftUI: in the Swift ey tutorial, we are going to develop a new future. The ability to change the capsicum programmatically has been around for a quite a few years . The school feature allows users to switch between a pre defined set off alternate icons. Please keep in mind that the icon can only be changed at the user's request, and the system always provides the user with confirmation off such a change. Our goal is in this tutorial. How to create a pre defined set off alternate icons using their property leased editor. Next, we ve learned how to change the APP. Icons programmatically finally reveal leverage. Swift. You I pickers allow users to choose their favorite. I come from a list. This time we are not going to add a graphic fais off the alternate icons in the Assaults Library. It's mandatory to create a separate group that holds all of the alternate icons. Having said that, let's get started with creating a new group or the icons in the main project folder give you the name I goes after that, navigate to the deck, stop and open. The resource is for there in the resource is folder. If you find a dedicated folder for the icons, open this folder. Now let's take a short look at the graphics. As you can see, there are three main colors, like blue, pink and green. Besides that, every main color has free color variants, for example, light, dark and primary as you can notice, each icon has a descriptive name. These file names Lee a quiet, important role in developing the alternate icons feature. All right now, let's select all of these graphics, vice and drag and drop them into the recently created icons warder in the Project Navigator panel, as I show you after that, a new job than viviendo via the shown. Make sure that the icons are copied, if needed, and the target project is that to do Ebb and the check mark is selected quickly. Go through some of the icons in the folder. So far, so good. Now it's time to register these icons to the project as alternate icons with using the in for property list file. There are two ways to do it. First, I will show you how to use their property leased editor in X scored. Then I will show you how to edit their source code of this property leased with court. Let's do it. Select the main toe the way project in the Project Navigator panel. After that, click contain for menu item on the top Navigator bar in the detour as I show you super. But before we jump into editing the properties here first we need to talk about this default information property list at a glance. All I Us Mac OS and other Apple platform applications have at least one information property list supplied by Ex Corde. The property Leased describes many different kinds of behaviors for dear by using key value pairs. And I was communicates a lot off information toe the system using the Info playlist file. Xcor supplies a standard in four police with the most important case. But most APS need to add additional case, describing new features, asking new permissions, resolving some privacy issues and so on. Just some examples when we have to modify this list to record Sands from the microphone to save images to the users Photo library to use the touch I d and face I d. With thrift you I toe handle the https requirements in IOS etcetera. OK, but you really need to know about the structure of this property lease that it contains many key value pairs inside it. The elements off the information property leased are organized in a hierarchy in which each room is an entity such as an array dictionary string or another type. Now we are going to define the primary icon for the app manually, instead off using the default icons in the assets library, as we did before. Many times. Don't worry, just do it. But I show you power over the course er on. The first key at the Custom I West are Good Property Section Review. See that a new place and Miners button appeared at the end off the key column. Now, by clicking on the plus button a new empty cave, you'll be added to the list with a new selection menu. Just enter the eye letter on your keyboard and choose the icon. FIEs I us five option from the menu as I show you. As you can notice a new icon, Fais property has been added to the list that has its own hierarchy and its own key value. Pairs now unfold the icon fi ski by clicking on the down arrow at the beginning of the room , then unfold. The primary icon tried key, and it's icon, vice child key As I show you, you see there. The value of the first property, which is Item zero, is empty. Currently, just look at the Value column on the right side of the table. Here, we need to enter the name of the primary icon. Click on the empty table you sell and type the blue filing. It's were to mention that you have to enter the exact file name without its file extension . There nothing more, nothing less unless that to do have you crash for the first time and you try to run it. The primary icon has got another property. Besides it's file name. It's their special glass effect. Since our graphics don't have this effect, therefore we can leave its default by you to set no. Now our next step is to delete the new stand icon from the property leased. We just don't need it at all. Delete the new sent icon by clicking on the Miners button. As I assure you now that we have set up the primary icon manually using the property leased editor. It's time to add the other alternate icons to this dictionary. Right now we are using their property leased editor, but you can see it's actual source file in the Project Navigator panel. On the left side, it is the in four p list file that you can see this in four p list file specifies essential runtime configuration information for the application. This time I will show you after we added the source code off this property list. First, select the in for policed file on the Project Navigator, then by Control Creek or right click on its name. A new const actual menu will be appeared all right, however, over the open as menu item, then select the source code option from the sub menu as I show you, Are You with me? Super. Since the previously created Dictionary off the alternate icons is nested inside this property list, I find editing the in four P list in the row. XML format is much easier than those buttons in the editor. This source code might look a bit scary at first, but it's pretty straightforward. Each key property has an opening and the closing tag, and inside them you can see the values the parents dictionary off the icons is the CF handle icons. These CF Battle Icons Dictionary calls another Nestor dictionary for the primary icon. This really replace the use off the empty icon set in the Assess Library. This is the CF. Bandel Primary Icon Dictionary. As you can see now, our goal is to head a new dictionary for the alternate icons. Place the cursor at the very end off the CF Bundle Primary Icons Dictionary and enter a new line. It's important that our new dictionary is still inside the CF Bandel Parent Dictionary, then enter the following in court opening Key. CF. Bandel Alternate icons Closing Key Opening Dictionary Closing Dictionary. The discord. We have just created an empty dictionary for the alternate icons. As you can notice, the opening and the closing tax off this dictionary are in separate lines. It's trying to type the code off the first older net icon into this empty place. Enter opening Key Blue Light Closing G Opening Dictionary Closing the Dictionary Key CF Bandel Icon FIEs Closing Key Array Closing array Spring Blue light closing string. Okay, U I re rendered icon closing key force. You must enter exactly this court. Every character matters here. Therefore, if you misspelled something here, then your code won't run at all. Did you manage to do it? Nice job. Now we are going to speed up. I think the rest of the alternate I cause, my Grace, think this code snippet. Select the court off. This recently created first alternate icon from the key tact here the end off its closing dictionary as I show you after that copy this code snippy toe directly board. So far, so good. Since the to do have has nine icons and we have order. They said the primary icon and the first alternate I can't to this project. Therefore the only need toe base The court snippet from the clipboard to the property leased seven times. Are you still with me? Great. Please raise their courts. Naybet frantically board after the ready end of the first order. Nate Icon, seven times as I demonstrate to you one to three for five Sikhs and seven or some jab scroll up to the first alternate icon. Now, as you can figure out our job is to modify the values off the recently added alternate icons. Previous thought with the second alternate icon Key name Blue Dark file name Blue Dark as well. Then repeat the same process with the rest of the older Nate I cause in the property leased Key name Pink Fire name being as well. Key name being light fire name being collide as well. Key name being a dark fire name being too dark as well. Key name Gurian File name Green as well. Key name Green light five Name green light as well. And the final alternate icon. The name Green Dark fire Limb green Dark as well. What a tedious work but with finishing it. We are ready to use these registered icons in their to do project. Now select the in four police file in the project navigator again and by control, click or right click on its name opened the file in the editor is a property leased instead off its source scored. If you did exactly. But I ask from you then you were see the property leased a detour and not the source code. If you may spare to something, then you must find it back, then try it again. Now that we are all set, let's look at the project structure. As you can see, our list is done. Try toe unfold. It's less that dictionaries as I show you and watch all of the recently at the primary and eight alternate icons to the main toe do project. I hope that by now you gain more experience working with the property list. It's a quiet, crucial skill, and we are going to use the property lease that it or more and more in the upcoming projects. All right, enough talking. Since the icons are already apart off the main total project. Therefore, we are able to use them back to code. Get the alternate icon toe. Get the older Nate at Icon is quite easy. You I application dot shared dot alternate icon name This one line off court returns on optional string that represents the current icon Ski name. If the default icon is being used, it returns Neil to set the alternate icon to set an alternate at Icon. We just need to pass the name off the icon in this set alternate icon name function. You I application dot shared Dot said Alternate icon name I can name completion handler Air or in using their completion handler to check for a Rose is a good practice to decode the alternate icon. But how do we set this icon name? In order to use the previously added icons as alternate icons in our project, we need to first decode the Alternate Icons Dictionary from the property list. Our main goal now is to get the icon names off all of the alternate icons and to set them in a new array, open the scene delegate file and scroll down to the end of the class. We are going to create a new class with a function that were decode the in four p list file Class I go names. What was server object? Var Icahn names String question Mark equals Neil and published Bar Current index equals zero funk. Get alternate icon names if Let I Goes equals Bandel dot main dot object four in four Dictionary key CF Battle ico's As pressure mark string any lead alternate Ico's equals. I goes cf Battle alternate icons as a question mark. String Annie four Underscore value in alternate icons. God let I go on lease because value as a question mark. Dictionary string Annie as Peter God let I go on flies. You course I got released. CF Bandel Icon fires as grass chur Mark string as he turned God bled. I go on because Icahn FIEs daughter first as return I go on names Don't append I go on now let's dissect this piece off course Shelvey First, we created a new class that conforms to the observable object protocol With these off serval bulla object, we can now publish an announcement inside. Yep. Then his value has changed so the user interface can be updated Next we have set a new icon names array as nail that will indicate the default primary app icon. After that, we created a new variable to store the index off the current icon with the established property rapper. Our code is able to publish the change notification automatically across the whole project where this property is used. Inside this class, we have created a get alternate icon names function. Its primary job is to go through the property, leased the afford Luke and at every alternate I call name to the icon names property using an append method. As you can see, we are using the very powerful God statement for error handling and optional unwrapping multiple times. By doing that, the two doapp want crash unexpectedly. All right now, we still need to set the current icon with their current index in it. We are going to accomplish that with a new initialize ER and there the following code above the function inside the class. In it get alternate icon names if lead current icon equals you. I application dot shared dot alternate icon name self dot current index because icon names dot first index wolf Current icon W Castor Mark zero you may ask, but this code does do. First we call the function that were said all of the names off the icons from the property wrist into the icon name property. Then, he said, the current alternate icon with the current index with using a near coalescing, we make sure that there will be always a default while you were the icon and we are avoiding that to do. We have to be crashed after finishing with this data model. Now scroll to the top of the file everything seems to be great so far. Our next goal is to share this data model with our Swifty. Why content you file and best these icon names to the EPS view hierarchy. That's exactly but we are going to do by adding a new environment off Jack to their content . You as I show you navigate to the window route view controller and modify the execs thing called there window dot route view controller, Because you I hosting controller Rude to you. Contents view, not environmental object I call names By doing these the content, you will be a fair off this icon names and it were keep and I only It's every change. Now. Open the content you file and let's create a new Aiko Settings Property with the Environment, Property rapper and environment object var Icahn Settings Icahn names So far, so good, since we are not going to use this icon settings property directly in their content view. Therefore, the mask passage for the settings view navigate to the end of the ad baton. And at this property toe, the settings view using a new environment object modifier. In the sheet settings view dot environment object sev dot icon settings Did that court are Content View is ready to communicate with the settings view now, open the settings you file and let's create another icon settings. Property with the Environment. Property of rapper at environmental object var I Go settings. Michael names. I bet that you will find this property identical that we have just created in their content for you and you are right. But this time we are going toe populate a new Pekar component with this icon settings property. Now, finally, we have reached the point in this lecture where we are going to finish up the project by creating a new picker with all of the user selectable icons inside. It is in that cool, is it? But before we do that, we must populate this icon names to the preview as well navigate to the preview and at the Eichel names to the settings view using a new environment of jack modifier. Sad things view that environment object. I got names. With the help of this court, we can see what will be happening in the review. Then we are developing a new picker in the alternate icons and even we are able to run the life preview to enough talking and let's go the shabby navigate to the foreign view. And let's create a new section for this new feature mark Section one section had there. Next Choose the icon. NewCo meant end off section one Bad ink. Vertical free. So far, so good. Now we are going to create a new picker inside this form section and populated with the icon settings property. This court will be slightly longer than usual, so please follow me carefully. Enter beaker selection dollar Sign icon settings dot current index labour. Thanks at I cause you comment and off Picker, then inside the speaker element. Let's create our for each loop with the icon names for each zero dot to dot less. Then I consulting's dot icon names dot count Index in. Then let's create a new horizontal stack container for the older Nate icons inside this loop Ages thick newco meant end off age stack bedding free after that had a new U I image to this age stack image. You I image you are image named said dog icon settings. Don't I got names? Index double question mark Blue double question mark you. I image as you can notice the default value of this. You my image will be the blue icon. You can see this default icon on the review of in though it's quite huge, isn't it? Now at the following modifiers to this image view that we'll fix this layout issue rendering more only Gina re sizable scared to fit cream Vit 44 Hide, 44 Corner radios nine and Walla Vile. We can see that Pickers labour On the left side of this section there is the default blue icon on the right side off it with a Chevron button beside it. How cool is that now? Enter a new spacer after the image of you as I show you spacer free him, read eight. After that, we are going to display the icon name beside the icon image and, uh, next seven dot Icahn settings dot icon names index W question. Mark blue frame alignment leading or some job there to the Web is getting better and better . Our picker design is almost done, but before we continue working on it, I would like to teach. You have to develop the core functionality off this icon picker feature. Add the following on received modifier to the picker view on the receive said dot i gone settings dot current index dot publisher dot first value in lead index equals seven dot i gone settings dot i gone names dot first index Move you I application dot shared dot alternate icon name. Double question mark zero if index explanation Mark because value you I application dot shared dot said Order Nate. I go name sev dot i consulting's don't icon names where you air or in if let error equals driller print error dot Localized description As print Sex says you have changed the APP icon, but this chunk off court that's really first. The never de picker selection is change. The only received more. The fire gets triggered. It publishes the latest value that is the index off the selected. I can second inside disclosure, we are comparing the icon name of this section with their currently active icons name. This is a crucial step, since it triggers and I cant change only than the user chooses a different one. So far. It's quite obvious, isn't it? And finally we set a new icon for the app by calling the share set alternate I call name mattered with the current icon MBA unit. Off course. We do it in a safe way with an additional error handling as you can. Not this nice job. Wouldn't it be nice if we could test that to do up right now? Let's do it. Build and ran the project. It's happening super fast, but we can notice that the first time that to do a planche is it shows the default blue icon. As we pretty find after the lunch off the Please Navigator, the settings view and click on de Pickers button. As you can see. When the alternate Iconix change successfully, the system sends us on alert. Message. This is a building functionality provided by the mobile operating system, and it doesn't require our involvement to do this at all. Now let's see what's happened on the home screen. Close thereto. Doapp. Do you see the new app icon? How cool is that? Our icon picker works without any grudges. Let's play V did a little bit Shelvey change the APP icon by choosing a new one using the picker. It's so great are to the Web is almost then, but we won't stop now. I am going to show you how to make this speaker even better with additional design elements . Are you ready for more or some nous? I don't so jump back to ex court and let's modify the label off, the bigger as I show you first, let's offer up the labour text in a new line then embedded into a new horizontal. Is that container age? Steck Next and I cause you comment and off label. Great. Now enter a new image with somebody fires before the text to you. Image sees them. Name being brush formed. Seus them sighs. 28. Wait Regular design D. Ford for grand color color Primary. Hold on a sec and let's take a brief look at the preview. The new paintbrush icon is already displayed beside the pickers Labour. Not bad, that's all. Now let's embed this image into a new vertical stack as I show you disease that frame vid 44 Hide 44 And finally, let's he is that a new rounded rectangle into this Z stack rounded rectangle Corner reviews . Nine style continues stroke, border color, primary line of it to super. Just one more thing at these missing modifiers to the text Labor Front Weight Board for Grand color Color Primary. Then add these to the string upper case and grace. What with finishing this new form section, including the alternate I Can picker you, I component and dysfunctionality is already done. Let's build and ran that through the Web, on your real device or in the simulator Shelvey. Now let's play video icon picker for a bit. What do you think about it? I hope you like it. You know, every Abney's, a beautiful and memorable icon that attracts attention in the F store and stand out on the home screen. This new user, selectable at Icons feature, provides more value for the to the Web. By developing dysfunctionality, we let people select an alternate at icon from the set off redefined icons that are embedded within the APP. Having said that, I think that it was weird to watch this lecture. See you at the next class under then happy coding 9. Let's develop a feature: How to create App Themes with SwiftUI: in the last few act with Auriol in this section, we are going to develop another great feature that will add additional value to their to do app. This new feature in the settings will allow users to change their color. Shame off the entire application. Users can select a blue, pink or red color, and by doing that, the whole user in their face will adapt to it. Moreover, the application will remain in that specific color. Hence its stores this color of Are you in the persistent storage? Using the user defaults? All right. Without further ado, let's open X scored and start scolding. First, we need to create a new folder for this feature named this group to tea. And after that, let's create a new swift file in this Waldir give you the name team model and save it. Now that's important. Swift to I framework and enter a new command line mark team model Great. Next, we are going to create a new strapped for the team. Enter the follow of in court Abstract team identifiable lead I D in lead team name. Spring. Let team color color with this court. Every simple declared the basic structure that we will need to store all of the details off the pretty finds teams. As you can see the team Strack cause East off an I. D number, a team name and the team color. It's quite self explanatory. Super, since our team model is already, then they are able to create the actual teams. Go to the Project Navigator and let's create another sweet file in their team folder. As I show you give you the name team that, uh, and save it as usual, the real import, the swift you I framework, Then enter a new command line Mark themed data. Now it's time to create a new constant that were stored all of the details of the pretty find teams and that the following in court lead theme that, uh, GM gm i d. Zero z m name being theme team color. Kallur being the, um I d one theme name Blue T and team color Calera Blue Team I D to Siem name Green tea M team color, color green. As you can see, the established in advance all of the teams the there's such as I D number, theme name and finally team color. So far, we have created a model and that for the team now the next step is to create a new class for the team that were said the actual team. To do that, let's create another swift file in that team folder, give you the name theme, said things and save it after that important swift you I framework and enter a new comment . Mark the glass. Now let's create a new class for the team feature. Enter the following court class, GM said. Things observe. Elber object. Ed Pavlysh of our theme said things in equals. User. The Fords dot stand that dot imager for key team Did said. You deserve the forts. Don't stand that dot said said. DOT Theme said things four. Key theme. The main objective off these themes Settings class is to set the user selected teams I D. Number in the persistent locus storage. Using the user defaults, we use that team key name with the capital first letter toe get and said that the user select that theme value. As you can figure out that we are going to star in the local storage is the integer value off the Team I D. For example, Zero represents the being theme. The one represents the blue team, and finally, the second number represents the Green Team. Besides that, you can see that using the established property of Rapper, they are ready to assess this theme settings property across the whole application, since everything is said to create the you I and the functionality off the team feature. Therefore, let's open the settings file and start coding. First, we start adding two new properties to the file. Enter the new comment line following the first property team. Let Teams Team equals team that these themes Property holds that it is for all of the teams like I d Name and color. Next, enter the second property at Absurd Object. Far Team equals Team said things this new team property assess the actual teeny in the local storage via the previously defined class. Now, after all of this prep work, it's time to develop the user in their face off this theme feature. Navigate to the end off the first section and let's insert a new one there Mark Section two section Heather Thanks. Choose the FTM you comment and off Section two that I think Vertical three. Nice job in this section. We are going to create the new U I for the team chooser. This time we were use a sample but yet totally functional approach to do that Enter the following court, please. For each themes. I d backslash dot i d id them in. Thanks. Item Team name. Fantastic work. You cut the preview in, though in a TRO off the newly created list for you, there is a team them, as you can notice in there for each loopy populate the teams that are and display the team names in a row one by one, it couldn't be easier. However, I am still not satisfied with the look off this you I design since we can do it better with swift you I Therefore, we still need to work on it a little bit. Embed the text into a new horizontal stack container as I show you h Steck. Then exact a new image inside these age stack image suits them. Name Sergo feel for grand color item team color. As you can see, this colored circle visual represents each theme that the user can select from this list, but we are still not done yet since there is no functionality attached to this user in their face at all. Until now, we used only the teams that are for creating the main user in their face. Now we are going to wrap this. You are in tow, a battle inside the for a troop. Our main goal now is to set the actual team each time when the user taps on the button. First, let's create a basic button inside the 40 troop Bratton action, New comment and off button. Then move the whole age stack inside this button, as I show you. So far, so good. It's time to add the team setting functionality to this button. Enter this code inside the battle is Action self dot team DOT Team said Things equals item dot i D. As you may remember, this theme settings property represents the selected theme that we are going to store in the local storage. Having said that, when a user taps on one of the buttons in the least, then its value from 0 to 2 will be assigned to these themes settings. Okay, since that we have the value off the selected team, then we need to store it in the local storage, using the user defaults set method and there user the forts dot standard, Dodd said. Said dot team DOT Team said things for key team with these lines off court inside a new button, we have just finished developing the team selection feature. Just one more thing. When the boot a text inside the button, the need will inherit the default. I was battles for grand color automatically. I am not keen on the blue text in this particle situation as a U I developer, So let's make it better navigate to the end off the battle and at a new modifier to it. Accent, color, color. Primary. Now the foreground color off the tax is blending nicely to the whole design. You know what? Wouldn't it be cool if you can create a tiny indicator to tell us we select that theme variant somewhere in this interface, let's do it by following me, navigate to the sections Heather and wrapped the text you into a new line, as I show you, then embedded into a new horizontal stack container Ages thick. Great job. Now I am going to show you how to display the actual team. Using a simple circle beside the Heathers labor, enter the following court The image seus them. Name, circle, feel precise, available frame Vince, then hi, then for grand color themes said DOT Team. That theme said things that team color pay attention to the foreground color. The team's value represents the whole teams that are, as you already know, in order to decide which theme color to use as the foreground color, we must get access to the local storage. Using the team settings via the previously pre defined theme class, the published theme settings Property gets assess to the actual index value off the team that we are going to use in the team array. I hope that everything is crystal clear, because we are going to use these themes settings many, many times in the rest of this lecture, but about testing our code. Let's start the life review right now and select one or more teams in the least as you can see the small circle shaped in the indicator beside this section, Heather is changing, according to the selected team. Splendid. Our court works without any glitches. Since the team selection functionality is already done, it's time to go through the whole project and make sure that all necessary user interface elements color will be changed when a new team is selected. First, we start with the settings file. There is not much to change here. Only the closing button on the navigation bar. Navigate to the very end off the navigation view and add the following modifier to it as I show you excellent color teams sev the team. The team said things the same color. That's right. We have just entered the same court as we did at this section. Heather, the teams that represents old teams that are and the theme settings provided the necessary index for its array of that since the user hadn't selected anything yet. Therefore, the integer in the user defaults words back to zero, which is the first element in the team's the pink color. This is why we see the pink closing button and the pink indicator. Okay, let's continue with the ad. Stofile shall be open the ads to do fine and enter their two properties at the top team and observe the object of our team equals theme said things. Bar themes, team equals. Seemed that nice after that. Navigate to the button and modify his background color as I show you. Background teams said dot team dot theme settings don't team color super. It's working now. Jump to the end of the navigation view and add a new extent color modifier to it. Accent color teams said dot team that seem sad things. That same color. So far, so good. We are going to do the same process in the content you file open it and enter the necessary two properties team at Observed Object Far Team equals Theme said Things of our teams see him equals team that great job. In this file, we are going to modify the two bottles on the navigation bar and the entire animated at button. Having said that, navigate to the navigation about items and at a new accent color modifier to the edit button. As I show you, I did the pattern except color themes said dot Team. That team said things dot same color, then at the same modifier to the paintbrush button accent color themes, self dot team dot team settings dot team color As you can see in the preview, the colors off these buttons are instantly updated. The next step in this file is to make the ad battle ready to team changes, scroll down to the add button and modify the field color off the first circle. As I show you circle feel teams self. That theme that team said things dot team color, then do the same with the 2nd 1 Circle Feel Teams self. That team that theme settings that theme color. Finally gentle the actual ad better and add an accent color modifier to it. Accent color Teams self dot theme dot team settings that team color. Good a job So far, slowly but surely we had the color team functionality to the different you. I elements here and there. Now build and Randy Project in the simulator and let's see what else we can do. We can see the default theme Vida Pink color works just fine. Now let's add a new to do item toe the least Chevy and there's something in the text field and say Veto the database, then add a capital more to do high temps there. All right, now hold on the main screen for a vile and let's discuss what we can improve their. In my opinion, this is an OK design, but it's definitely not impressive in the following part. Off the lecture, we are going to work on it a little bit. Go back to that content for you. First we veer, create a colorized circle indicator and edit. Which toe do I them each priority were show a different color. To do that first, we need to create a new function that can handle the different priorities in each case. Navigate to the functions and let's create a new one. Private funk. Cool arise Priority Spring Color speech Priority case Hides return Don't think case normal return dot green case though Return that blue The fault he turned Don't gray. As you can notice the high priority Swink. The normal priority is green, and the low priority is the blue color. Now, after that, this useful function is then we can use it inside their to do list. Jump back to the least and at this colorist image indicator before the two. The one name circle frame right through love. Hi to have alignment, Center for grand color self, not colorize priority to do that priority. W question Mark Normal. After that, let's really find the design off the to do name with this modifier formed. Wait semi bald and finally make the design off the priority tag on the right side. More impressive with the following modifiers. I want food note for grand color color you eye color system gray to bad thing free frame me and the kids 62 Overly capsule through color you eye color system. Great too line of it. 0.75. Then finish up with a new modifier for this age stack. New comment and off h stack. Bad ink Vertical 10. All right, it's time to test, but we have done so far. Beard and round the project. Do you see the new design that we created? Let's look at it in the dark mood as well. It's much better now. That was before, isn't it? Now let's delete all of the to do items from the database. Super, the least is empty. Now we could call the day, but what about the illustration? On the anti least view I haven't idea off. Have to give some love for its design. Besides that, you were learn a new thing about the image of you since, like a deal, doesn't it? Then let's do it. Jump back to Ex Scored and open the empty leased view file as many times before. Let's enter a new property for the team that are and their team said things. New comment team At observed Object Var Team Equals Theme Said things var themes, theme team that Now let's start with a dink, a new four grand color modifier to the text view. Enter for grand color themes. Self. The theme. The theme said Things don't cream color nice. You can see that pink text in the preview next review. Continually the image doing the same process at this modifier toe the illustration as I show you for grand color themes, said the theme that theme settings I don't see in color Wait for a sec and guess what? Nothing happens. The foreground color modifier doesn't work until the override the default rendering mood off the image. And here is the new information about it. There are two rendering words for an image view. First, the original Mort. This is the default by the way. Second, the template rendering mode. This is what we need to do to override the default appearance and colorize the image at this, rendering more modifier today. Image as I show you, rendering Mort template. Oops, we have got another message. What's going on? It turned out that we must place the specific modifier at the top of the other modifiers and make it the 1st 1 Let's move it up. And here it goes. The illustration has already been colorized with being a car is in that fantastic is it. Now let's a build and around the project. As you can see in the simulator, the random illustration and the productivity tips are using the actual teams color now. All right. After lunching, they have navigated the settings and select a different color team from the available options. Nice. The actual team indicator and the closing button instantly changed from Brink Toe Blue. Let's close the settings and see what's happening on the first screen. Shelly. Oh, as you can notice the why elements color are only partially changed on the screen. On one hand, the illustration and their productivity are using the actual team on the other hand, the battles on the navigation bar and the add button are not using it. What is going on? Let's close there to the Web and restarted by tapping on its icon. As you can see when you re started to the Web. Then it reloads the new team. Information from the user defaults. We can test this behavior again. So just a quick recap. Strangely, something is preventing the team to update the U I on the navigation bar and at the at the bottom. The team changes, working without any problem on the settings and then on the add to do items, views, the setting and the getting off. The teams using the user defaults is working without any problem. Yet on the first screen, the acting feature is only partially working. Unfortunately, at this point, I can't tell you what causes this problem on the first screen. But when I figure it out, I will let you know by publishing another lecture about it. As you know, as up developers. If frequently, heat stumbling blocks and we need to learn have to find a decent solution for those problems. Now, one temporary solution toe this cool to be to notify the users about the team changes and ask them to restart the application. And that's exactly but we are going to do now open the settings of you and let's create a new property that we're hold the state off. The alerting, though, and third, the following code at ST Private Bar is them and change rule ik was for us after that. Navigate to the bottom in the team least and enter said DOT is the image change. It's all good. This cold were changed, the property's value from force to true. Now the last step is to create a new alert window that were notify users when the property's value became true. Let's at the new alert modifier to sexual number two. Alert is presented. Dollar sign is them and change alert title. There's sex is message. Thanks. It has been changed toe there. Backslash themes self dot team dot team settings. The team in name Force that now close and restarted this miss button the fort. Thanks. Okay. As you can understand, this piece off court notifies the users each time when the team of the APP has been changed . This alerting, though, contains a title, a message and a dismiss button inside itself. Easy peasy, isn't it? Now let's there's there to the Web again. In the simulator, build and round the project and test have the updated theme feature is working. Navigate to the settings view and change the apse theme toe a new one as you can see a new alert in the book up and ask us to restart it to do jazz Dewey. And let's see that the application changed its reviews them to the new one. Nice job so far, you may vendor that we have already than we developing their to the where. But one thing is still missing. We haven't tested the application on an iPad at all since there to do is add, deployment are get, are still iPhone. And I bet therefore it should work without any problems. When I bet, Let's see if it's true reason Shelvey. Now go back to ex scored and build and ran there to the Web on an iPad device, as I show you after lunching there to the weapon on, I bet we got shocked because the layout is quite different than we expected before every least few comes with a master and detail split few on I beds. These two do up is not an exception from that. The master view is the actual empty leased view that you can see on the left side of the screen, and the details view is on the right side but could be more strange to you for the first time. When you see is that when you navigate to the settings view, the former view also follows this same split you lay at pattern. The same is true for the add to do items view, since our to do application is a minimum valuable product by design. Therefore, we don't want to use this split view in this up. Fortunately, it's quite easy to prevent his behavior by adding a stack navigation view style toe, each navigation view. All right, let's do it right now. Jam back we x cold and navigate to the end off their navigation view. Then, at this new modifier to the navigation, navigation view style stack navigation view style, this court will make sure that we won't use the master detail view early at will be stacked from top to bottom. We were used the same code on the other screens. Having said that, copy this modifier toe directly board and let's open the add to the view file. The process is the same as before. First navigate to the end of the navigation view second base, the modifier from Beckley board as I show you next, open the content you file as well, then navigate to the end off the navigation view and finally, basically modifier from directly board, as I show you and we are done. Now, it's time to test their to do. We have last time, since our application is already done. Well, I ran the project and testing navigation view with the stacked style, and that's it. The layout off the app on the iPad is definitely much better now. But about this sad things, let's check it out. Whoa, that's quite impressive, isn't it? Next, that's that's the EP by. I think I new to do item to the court that our look, our database, as you can notice the sheet on the I bet, is slightly different than the iPhones. It doesn't expand the whole screen, just a portion off it. On the center of the screen. Nice job. Now let's There's the app on an iPhone Shelvey. First, we large the by tapping on the user selectable icon on the home screen. Second, there is a nice logo on the large screen, and then they finished to the Web has been lunch. They can see and play V the different features, and that's their functionalities. But do you think about the finished project? Do you like it? I hope so. In this section you have learned so many topics, including how to work with court data, have to improve the default ey components have to create a complex and reusable Lee at for the settings. Then how toe open external links safely. Then how to develop a new feature that allows users to select a new icon from our list off , redefined alternate icons and finally have to develop the courting feature and optimize the airport device screen I pets as well. Having said all that, I hope that you enjoy this course so far, and I can confidently tell you that more exciting projects are coming. Just one more thing. I would appreciate it so much if you could take the time to give me a five star rating or even better if you called. Share your learning experience with other students by writing. I have full review about this course this way. You not only motivate me to publish more outstanding projects to this course, but at the same time you help others through dance to be informed about this excellent learning material as well. Moreover, I would be glad to read your success stories, too. Thank you.