Hi, Alex here from rebeloper.com and welcome back to the channel and welcome
to this epic tutorial series on tiny constraints. The best way to use auto
layout for humans. So without further ado let's jump right into it.
Okay! Now you already know that I'm a huge fan of tiny constraints and go ahead and take a look
at its repo on github it's by Robert Hein I hope I spelled that out right
and yeah if you want to take a look at the example you can simply clone or
download the repo and take a look at it. It's kind of interesting it. It is kind
of complicated too. So that is why I have decided to create this tutorial series
where we will dive deep into tiny constraints and you will learn well
mostly everything 99% of tiny constraints. So you can use auto layout
the easiest way possible. So what you need to do is first of all click the
link down below to get the resources because there will be some resources
nothing much we are going to have the pod file of course if you are interested
in that. We are going to create that in just a moment a tiny view that we are
going to constrain and some colors. So we can get those lovely views some colors to it okay.
So let's jump right into it and start
from scratch I am going to add here an Xcode project. So go ahead and launch
Xcode and we are going to create a new Xcode project. Okay and I will use this
single view application from rebeloper the link where you can get this it's
further down the description. Basically we are removing the main dot storyboard.
And let's hit next and I will name this master tiny constraints. There we go.
Master tiny constraints and I will not embed this into the navigation
controller because this way that we have a huge view without top or bottom
elements we can learn all of these tiny constraints a much easier. So let's click
on next here and I will drop it, yes there we go and let's create a git
repository. You will find a link to the good repository in the resources too.
So let's hit create here and we are ready. Great! What we have here is an app
delegate and this is what we have in this template it's calling our root view
controller in the code so we are not using any storyboards at all my favorite
way of coding and we have an empty UI view controller. Now let's add in these
resources the colors. There we go and let's finish here and let's add and tiny view.
Let's add it right over here, okay. Under colors we have some material colors here and in
the tiny view we have basically a UIView that has a corner radius and a border
with you go ahead and take a look at it. We will see that in action in just a
moment. Now let us just close this because the next step is going to add in
our tiny constraints cocoa pods. So once this is closed and let me just open up
so you can see what we are going to add in here. So we are going to set the
platform to be iOS 12 and we are going to add this all tiny constraints and I
am currently the latest version is 4.0.0 and yeah I'm going to use that one.
So let me just hit command C here to copy that out, okay.
So let's open up terminal as usual and type in CD and space and drag the root
folder of our project into your terminal. There we go and type in pod init.
There we go and that will create a pod file. Oh I hit need to hit return here.
So CD and drag and drop and hit return. There we go.
Then pod init. There we go. We have created our pod file and I will comment
this line out and set it to iOS 12 and basically paste that in with command V.
Okay! There we go and let's just close this and finally pod install will
install tiny constraints into your project and that is it. That is what we
need to do and from now on we are going to open up our workspace to work on this
project. Okay! Let me resize this. So let's see
what we have here. Basically it's the same that we have in our pods, here is
our pod file and under the pods library we have tiny constraints. So let's set
this up and let's add in some views first of all and let's see. Let's add our
view 0. I will add 5 use of something like that and we will play around with
those. So view will be a tiny view. There we go and as you can see we have
two initializers those are custom initializers. One with the background color
and one with background color corner radius and border width. So first of all
let's use this one and for the UIColor I will just delete on the holder and hit
command shift M to bring up our media library and I will just drag and drop
this blue one right over a there. Corner radius should be 0 and 0 and you
will find out in just a moment why I want to have this because as of default
corner radus I believe is 6 and border width is too, okay. So next up let's create
another view. View 1 equals again tiny view and now we will choose only the
background. Let's add in here a background color command shift m and
drag and drop that blue color over there. And let's create a few more let's see a
let view 2 equals tiny view ground color
and maybe I will fast forward this. So there we go.
We have our six views. Mostly we are going to use these last five and what we
need to do next is add our view a background color. So we don't have that
ugly black custom well default background color of a UIViewController. So view
background color equals and I will use this gray color. There we go.
What do we need to do next? Well we are going to set up our views. So let's
create our function here set up views of course as you already know I like to set
this as a file private function and there we go and inside set up views we
need two functions one is add sub views and the other one is constrained sub
views. And I will make again both of these as file private functions and now
that is the bark of it and as you can see we already have some code here and I
don't really like to mess up all of my who I view controllers so we get that
massive view controller problem. So I will just add all of these 3 into an
extension. So let's create a new file here and I will hit command N and
next for a swift file and I will name this root view controller and plus setup views.
There we go. So let's import here tiny
constraints because I already know that we are going to need those and let's
type in extension for our root view controller. There we go.
And basically what we are going to do is copy all of this out. Hit command X
to cut that out and let's add that in here and you will see an error here
because a set of views is file private if you wait long enough but I won't do
that and we just delete the file private
before this setup views function, okay. And yeah that should be it.
Let's hit command B so we can see that all of these builds successfully, yeah.
There we go. Built has succeeded and yep maybe let's build and run so we can see
that all of this is okay. We should see a grey background. So there we go. We have
our gray background. Let me just add this here, okay. We have already done so much
setup it is time for your reward for this video. We are going to add this
view edge to the edges of course of this view that is the view of our view
controller. So view 0 will be edged to view. Okay and you will see how easy that is.
Okay! Let's see here. Let's go into our root view controller plus setup views,
you will be basically working everything in this file and I will be deleting the
examples but you just go ahead and follow along the video tutorials. So first of
all what we want to do is add view 0 to view.
So you add subview, view 0 very good and okay basic stuff but now comes the magic
here and let's constrain this subview. So view 0 edges to super view.
And that is it, okay. Let's build and run and see the blue view edging all the way
up and to the trailing and leading anchors and to the bottom anchor of our
view and that is how simple it is and this mentality goes through all of the
tiny constraints repo, okay. Now that is it for this tutorial.
The next one we are going to dive a little bit deeper into edging some views.
I hope you enjoyed this one if you did go ahead give it a thumbs up, subscribe
to the channel and most importantly hit that notification bell because if you
are subscribed maybe you will not get alerted when we launch some new videos
and as usual I will see you in the one.