How to Use Named Colors (iOS 11, Xcode 9, Swift 4)

hi everyone my name is Marc Mike's from big mouth studio and today we're gonna talk about a new feature in Xcode 9 called color sets or named colors and the advantage of named colors is that you can centralize all your colors for the application in one place and then if you ever need to change anything you can just change it in this one place and I'll take effect throughout your application where you reference these colors now you might be saying to yourself well I kind of do that now using a class that has all my colors for my application maybe it's a theme class well that's fine there's no problem with doing it that way but I want to show you about named colors and some of the advantages that they provide so it gives you another option in the future okay let's get started okay here you see a project that is just beginning and there's no colors yet everything is in black and white and the designers are telling you that they're gonna give you some colors but the colors aren't set in stone right now so what we're going to do is we want to take these colors and we're gonna create named colors out of them so let's take a look at the first theme they give you okay here we go so they give you this theme and there's three colors the lighter brown color is like your accent the darker Brown is going to be your background color and then that lighter blue color will be your tint color and the tint color is just a color that goes to anything that the user can tap on or interact within your application such as a UI button okay so what we'll do is we'll create named colors for all three of those colors right there so let's create some space so we can still see the theme here and when you create named colors you actually create the colors in your assets folder so we can go here we can add a new color set and you see there's a new option here for color set and then we want to give it a color I'm sorry and then we want to give it a name so let's see so let's start with the dark brown color there we go and then to actually give it a color what you want to do is select it and then go into your properties and then you have the color right here so for bringing this up we can just bring usually you'll see it like this just click on the eyedropper tool and select your color and there you go there's your first named color but I'm gonna give you a tip here something to keep in mind I don't recommend actually naming your named colors after the color they represent because if you're gonna change this to maybe like a red color in the future well you have to change the name to and then you'll break all of your references so give a name that won't be changing in the future so I'm gonna change this color and I'm gonna call it background instead then I can change it to any color and background is still applicable ok now we have two more colors to create but I'm gonna give you another option here too instead of creating all your colors here with all of your image assets it might be better to create just a whole new asset folder instead of mixing in your colors and your in your images so let's do that instead we're gonna come here we're gonna create a new file and if we scroll down you'll see there's an option here asset catalog so let's just create that and we'll call this our theme okay good and this will hold our theme colors okay so we're gonna get rid of this named color and we're just going to create all of our named colors here in the theme okay so this was our background and you just click on the color go into your properties click on the eyedropper tool there's our background now what I'm going to do is I'm going to create one called accent then we have another one for our tint there we go okay so there's our themes right here our theme colors now let's apply them go into our storyboard and let's create ourselves a little bit more room here okay we can start by setting the background color I'm just gonna click on the view here and I'm gonna click on the background color and you'll notice now in this color picker there's a new section called named colors so whenever you create named colors they'll show up in your color picker now and we have an accent color so I'm going to use that accent color to apply to this image and all the text let me deselect that let's start with the text first I'll be accent and for the images just let you know these images if we click on them I set them to render as template image and what that does that allows you to change the color of this image in your application by using the tint color so we want to use the accent color for the tint on this so if I come here go to the tint I want to change it to accent okay now this might be a good time to talk to you about something else you may have noticed in the past that if you use this method of changing the color of an image by using the render as template and then changing the tint color in the past if you run the application right now that tint color would not be applied what you had to do was you had to reset that image in code or you get to take away the image here like this and then reset it like in your viewdidload function in your view controller well the good news is when and I don't know if Apple intended this or not but if you use named colors to set the tint you no longer have to do that you can just set the image and in your assets folder of course have it as render as template and then supply it with a new tint color as long as it's a named color it'll work if you try using one of these colors up here or selecting a new color by itself it won't work okay so those colors are set now here is another thing that you have to keep in mind for this button I set it to a custom class UI by 2x which is over here and what that does is that has IB inspectable properties that show up here now and if you don't know what IB inspectable SAR I have I do have other videos that go into it more deeply so you can watch those but there's something I want you to notice here now what we want to do is if we want to change the tint of this button normally what you do is you go to the View you can change the tint from here which is exactly what I'm going to do and you notice that changes the tint for the button that's because the tint works on a hierarchy basis if you go to the highest object in the document outline and set the tint there then all the controls underneath it will also use the same tint by default so it's a good way to set the tint for all of your buttons and all your controls it's just go to the the route and so the tint there but you'll notice here that this outline is still black that's because there's a separate color to set the border here using this custom control but look at this so we want to use the tint color for that border but notice there's no named colors for your custom control properties this this bugs me because they should be there they should be available and you should be able to use those named colors from this color picker I did submit a bug to Apple so maybe they'll fix in the future but I'm not certain so let's just run this and see how it looks right now okay good it's really coming along except for that border right there now what we'll have to do is we'll have to set this border in code so let's do that and referencing a named color is a little bit different when you do it through code okay and here's the code that's already here and as you can see I I don't have to set the image if I'm using named colors so I'm going to delete that since I don't need it anymore but I do want to set the border color of my button so that is called the cup of button and we want the border color and this is a property that I created normally if you want to set that color you would have to go through the layer property right there and you notice it's a cg color but I created my own property called border color here okay so how do we set this well you have one option if you come over to your media library over here you'll notice that the themed colors appear in there so I could take this tint color and I could just drag it and drop it into my code and it becomes a color literal but that's probably something you don't want to do I just wanted to show you that the named colors do show up in your media library but you probably won't want to use it because what will happen is if I change that theme the color of the tint here let's just watch real quick see I changed it to this color this reddish color and we come back into the code well notice this this color didn't change if you go to if I go to the media library yeah that color changed right there but the one in code which is a color literal did not change so you don't want to use that instead what you want to do is just look at the UI color constructor options here and you want to use the one that says named for your named color and we call this tint so I'm just gonna use the name of that named color and with this constructor you know the code doesn't know if this color exists or not so we'll have to explicitly unwrap it okay let's see how that looks all right there we go okay everything looks great and the designer comes back to you and says hey the theme has changed once again so now they want to change the theme to these colors and this the green now is going to be your accent and the background is going to be a little bit lighter like this cream color here and your new tint is going to be this reddish color okay so let's change those colors and see what happens I'm going to go to our theme accent is the green the background is now the lighter color and our tint is this reddish color there we go okay let's see how that looks now if we go back to our storyboard look at this hey the controls are still using the old theme colors but if we run the application let's see if they updated they did update so so what's happening here well my guess is this is a bug and because I think it's a bug I actually submitted another bug to Apple to ask them to fix this the only way I can get rid of this like I tried clicking on other storyboards and come back and the colors don't update the only way I can get it to update is to close the application and open it back up so let's close the project and go back into it and there you see the colors have updated all right guys those are some tips about using named colors right now they don't update on the storyboards but you can just you have to close the project move it back up I don't know how important that is to you or how often you'll be changing the colors that's just one of the bugs of having a new feature Xcode 9 so I hope you enjoyed this tutorial I hope you you gained some useful information from using color sets in your project and hope you can see the advantages they provide you we can just create your theme and be able to change all your colors in one place and you can now conveniently access these colors just from the color picker with this new section called name colors if you liked this video give it a thumbs up if you think it's something useful that your friends might want to know feel free to share it on Twitter or Facebook or any other social media that you use and if you haven't already consider subscribing thanks guys

Channel: Mark Moeykens

Views: 8,408

Keywords: Xcode, iOS, Programming, Swift, Tutorial, Tuts, Learning, Example, app, learn, make, how to, mobile, Xamarin, beginner, xcode 9, color set, named colors, color theme, theme management, color management, sean allen, brian vong, letsbuildthatapp, codewithchris, chris ching, uiappearance, best, way, easier, easy, fast, faster, programming, development, your, own, code

Id: JDFHqdBY3zg

Length: 14min 20sec (860 seconds)

Published: Thu Nov 16 2017