Hi Alex here from rebeloper.com and welcome back to the Christmas Calendar
tutorial series and in this episode I will show you how you can use the flat
UI colors that we all love. So without further ado let's jump right into it!
Great! Now what is flat UI colors you asked me now if you don't know that go
ahead and take a look at their site: flatuicolors.com. And they have this
beautiful palette that you can use in your app. Now usually what we would do is
let's say go into the flat UI palette version1. Select one of our colors
click on continue and this hex number has been copied to our clipboard and we
can use that in our code. Now that is kind of tedious and of course you need
to write your own UI color implementation using hex and so on.
In this episode I will give you a tool that makes this also super easy.
Let's just minimize this and go ahead and click the link down below for the
resources on my site. And once you download it you will have this FlatUIColorsSwift folder.
Now we will drag and drop this into our Xcode project so
let's create one for that. Okay, let me open up Xcode and create a new Xcode
project and I will use this Single View App from developer. If you don't already
know go ahead and check out my other YouTube video on: How to create your very
own custom Xcode project templates. And this one removes the main.storyboard
all together and we can start coding right off the bat as we usually do.
Let's click on next and let's name this FlatUIColorsSwift. Okay, and I
will have the root view controller. Let's name
this RootViewController. Okay, you can take a look at the previous video on
custom templates on what this basically is. Okay, for now let's just click on Next.
And add these to... let me just go here... to our code folder. I will not
create a git repository because this is just all about that library that you
have just downloaded. Okay, let's click on create and there we go. We
have our word Xcode project created. And as you can see there is no more main.storyboard.
Okay, now what you want to do is go ahead and grab the FlatUIColorSwift folder
and drag and drop it onto your project. Make sure 'Copy items if
needed' is checked, 'Create groups' is checked because 'Create folder references'
just adds a reference to the downloaded file and for whatever reason those are
deleted then your Xcode project cannot find them anymore.
Basically these copies and paste them into the Xcode project. Okay and make
sure 'Add to targets' is checked. Okay, let's click on finish and here we
go let's take a look at what we got here. First of all let me just show you the
creators of these palettes. Go ahead and if you wish go ahead and check them out
they are also available on flatuicolors.com when you enter the palette.
Okay, here we have our word FlatUIColorSwift.xcassets. That X is Xcode
assets and we have a folder here FlatUIColorsSwift, if you open it up you will
see that I have prepared for you all of the palettes that are inside flatuicolors.com.
And now let's just open up some of them let's say the first one is
Flat UI. And as you can see all of them are inside here. Let's take a look
at the French. Ooh! and the British. These are all of the color sets that
flatuicolors.com uses. Now let's just jump right into our RootViewController
and let's take a look at how we can use them. And for now let me just as usual go
to our preferences and set these phones to be a little larger so you may see.
Now how can we use a color from and these FlatUIColorsSwift assets.
First of all let's type in here... let's say: let myColor and what I usually do and I
could use image literals or something like that but and I also have a YouTube
video on that so go ahead and check that out. I would go ahead and hit command
shift + M and that would bring up the media library. Let me just clear this
search and as you can see here we have all of our media including our word flat
UI colors. And basically if you have a lot more assets let's say your another
asset catalog with your button images or whatever background images they will be
listed here. What you want to do is search and I will search for our Spanish
flat UI colors and it is here. Let's see I will use this Eye of Newt. And what
I want to do is just simply drag and drop from the media library and there we go !
We have our color initialized. Okay, it
hasn't been used so I will just fix this error by so basically giving it this
underscore. Okay, now what else do we need? Well let's say we want to have our views
background color to be black. And that is pretty simple: view.backgroundColor =
and I will choose a can from our media library. So command shift+M again
and let me see what type of color... I will use this Crocodile Tooth. It's not black
but it looks awesome. Now let us just build and run and see
how our views background color came this crocodile tooth. There we go and as you
can see we have our crocodile tooth background color added. Pretty sweet and
pretty simple if you ask me compared to what we would have to do to add all of
this otherwise. Okay, now next up we have here a FlatUIColorsSwift.Swift
file and if you take a look at it we have here a struct called AppColors.
Now I want to teach you a technique that I usually use when dealing with the theme
of my app. And that is this struct. It is code AppColors and I have a
main color, a secondary color, ternary color. And of course this can be extended
and we will do that but for now let us just add a main color
for our app. Let's go back to the RootViewController and let's say
we want to have that main color to be represented in the background. Okay!
First of all I would set up these main colors: AppColors.main =
and I bring up the media library again and drag and drop the color of what I
want. And now what I can do is not drag and drop all the time these colors from
the media library when I want to use the main color I just type in AppColors.main.
Of course this does the same but on the long run this makes coding it
out fairly easier. Okay, now what we can do next is extend this. Let's say
we don't want the main color to be our background color because the main color
usually is let's say a button color or something like it or the logo color that
it's not the background color. Let us create or extend app colors to have and
that background color. What we want to do is you could create separate file for
this or whatever. I will just add it all right here. Let's create an
extension for our struct: AppColors. Okay, and here we will add our static var and
let's say background and it will be a UIColor. Okay, if you don't know what you
want to... I believe it is not equals here just like so... let's take a look at what
we have here it is equals. Okay, and maybe let's create it a public static variable.
Okay, let's add here a public and change that back to = . Okay, now what we
want to do is again a sign for the background color, a new color and let's
open up our media library but it'd be this time and this... let's say this
Celestial green. Awesome! Okay, now for the background we want to use AppColors.background
and that is it. Let's build and run for the last time for our
project. Of course you can add button colors, label colors to your liking.
Of course take a look at flat UI colors palette for everything that you can
choose from. It's a really a nice flat set so I usually use them in my apps.
Go ahead and you do so. Now that is it for this video I hope you enjoyed it.
If you did go ahead and give it thumbs up and subscribe to the channel if you haven't
or done so and click the notification bell
to get notified when I release this awesome video tutorials. Now here is the
question of the day: Which one of these color palettes do you like most? Is it
the American the Aussie the German the Indian the Spanish the Swedish? Go ahead
and comment down below and I will see you in the next one!