Hi Alex here from rebeloper.com and welcome back to the Christmas calendar tutorial
series and today we are on the episode 2 of our
tiny constraints hands-on examples. So without further ado let's get started.
Great, now we have left off by creating all of this awesome UI and let me just
bring up the example that we are going to create. There we go. Let just this like so.
Great and it looks pretty similar and we are using again tiny constraints if you
are new to this video go ahead and take a look at the previous one on the
playlist we have added our tiny constraint spot and we have added our
UI here and I can see that these subscribers is a little bit too large, so
I will start tweaking on that and maybe add this cog a little bit lower. So let's
start with that. So the channel subscribers let's say 14 and last
week our channel subscribers offset should be free and the cog the top let's
say 60. Let's build and run again, okay. Next up what we want to add is a
container for, it looks pretty well, a container for our videos. So let's go all
the way up and let's add let videos container view and it will be a simple
UI view and let's add that in here, okay.
Let's initialize it, let view equals UI view and let's hit
return here and let's set the views background color, background color and
let's open up our Xcode our Photoshop here and let's select this color here
and it's 40 40 40, okay. Pretty easy to remember. Great let's go back to Xcode
and equals to UI color and let's here's again the red green and blue so 40
divided by 255, 40 divided by 255 and the alpha value should be 1.0.
Okay, now let's constrain this videos container view. What is wrong with this
UI view that's it build. Oh, we need to return the view, okay. Let's go all the
way down to our container view should have this videos container view, videos
container view ,pretty straightforward, okay. Now let's anchor our videos
container view. Videos container view top anchor and we should add at the top
anchor to our bottom of our channel subscribers count label.
So channel subscribers count label and offset let's set it to 8 for now and
let's delete all of the rest, okay. Again and the videos container view left to
and container view videos container view right to container view and again
with the button. Videos container view bottom to
container view, okay. Let's build and run and see if we do have a that other type
of black there that container view. And indeed I don't know if you can
realize it or not it's here and let me just take a look at the padding here.
It should be a bit larger so let's add in here let's say 24.
Let's build and run again. Now next we want to add our let's say featured
video. Yeah, it looks really nice. Let's take a look at the image that we
are going to build out. So we are going to add this featured video, okay. And it
will be a simple UI image view of course it needs to be either a button or you
could add a UI tap gesture recognizer to that image view
if you want to make this tappable. So for now let us just add and this UI image view.
Okay, let's go ahead and create our, I will name this ... and it will be of
UI image view.
What else? We need to set this image view to be let's say the content mode.
Okay and let's add in here our image and let's add an image literal, image
literal and double click on it and select this one, okay.
And I believe that should cover it all. Now we want to add this to our videos
container view. So add sub view and let's say featured video image view, great.
Now let's constrain it. Let's just scroll all the way down and what we want to
achieve is basically let's type in featured image view and let's say edges to
and here we go and the constrainable is the videos container view. Videos
container view excluding the button and the inset should be at the top let's say
dot top and let's add in here 8 for now. Let's add this to our left to 8 and
let's add the right one too. Right and 8 okay. Priority and is active can be emitted.
Okay, and next up let's have our image or rather yet let's just build and run and
see if we do get an image there. Maybe we need to set the height of our image. Yes,
we need to do that. So let me just and go here and featured image view
height let's say 300 and I will create a constant for it in just a
moment. But for now let us just see how this works. okay. And I can see that
the insets are not set up correctly and let's see here should be 16 and let's
see -16 I believe. Let's see how that works and the left should be 16 and
300 is a little bit too much so let's say 250.
Let's build and run again, see what we got, okay.
We are almost there maybe let's add in here
200 and then we will take a look at the insets. There we go.
The insets are quite right and I believe they are
okay indeed, great, okay. That will cover it all. Now what I want to add next up is
this label for our time stamp, okay. Not the time stamp the duration.
So let's add a new label here.
And I will simply set the background color, the labels background color to be
UI color and let's set this to be red green and blue and I believe we need to have
this zero divided at 255, 0 divided by 255, again 0/255 the Alpha value should
be 0.7, okay and let's add our labels text to be
let me see the duration 13:17, okay.
13:17 and may be set the labels text color to be white, okay. Let's build and run and
see what this actually does. Oh rather yet we still need to anchor it. So let's
stop that and anchor it to our featured video image views let's say bottom right
corner, okay. So what we need to do here is type in duration label and first of
all we are going to set the bottom, the bottom to and I will choose this one
bottom to and the constrainable will be our featured video image view and
let's set the anchor, I believe we need to set this to -0 and let me just delete all of
this, okay. Now let's set the duration labels right to, yes to our featured image
view and again the offset should be I believe -0.
Let's delete all of these and now we should basically set up a width and a
height. So the duratuionLabel.with. Let's say the width is let's start off
with 50 and duratuionLabel.height let say 30. Let's see how that looks like.
And did we add it to our views? No, so featured video image view, add sub view
and duration label. Let's build and run. There we go it looks
fairly nice what I would like to have is to set the width of this to be let say 40.
Let's take a look at that again, yes and on the label I would like to have,
I would like to change and font so label a dot font equals UIFont and bold
system font of size let's say 14 and I would like to steel set the text
alignment. Text alignment to be dot Center, okay. Let's see how that looks and
it should look awesome. Great, great I really like it.
Next up we could add a profile image view for this video and the labels and
so on let me just bring up and the finder here. There we go. Simulator. So we
can add all of these but we have talked about this in the previous video and it
is fairly simple do. Okay that is it for this video, I hope
you enjoyed it if you did go ahead and give it a thumbs up and subscribe to the
channel and hit that notification bell. I hope you enjoyed this tutorial series
about tiny constraints, go ahead check out the github repository and as usual I
will see you in the next one.