Hi, Alex here from rebeloper.com and welcome back to the channel and welcome
back to this tutorial series on tiny constraints and today we are going to
move forward building on our Instagram profile view with the help of time
constraints. So let's just jump right into it.
Okay! So we left off by adding
this stats container view and what we want to achieve here is add this post
followers following and promotion and edit profile buttons, okay. So we have
added this so we want to add these two container views of our post followers
and our buttons. So let's create those first. So let's just scroll all the way
up where we have our stats container view and let's create two more views.
There we go and this one and first one will be stats container view but that will be
a stats numbers container view and stats buttons container view and let's have
this as red and let's have this as in green, okay. Let's add them to our view
hierarchy and we want to add them in here. So view add sub view stats numbers
container view and view dot add sub view stats buttons container view, okay.
What else do we want to add in here? Well we want to constrain those but we are going
to do that as a stack. So stats container view just scroll this a little bit up.
Stats container view stack and let's add in here our stats
container numbers stats, numbers continue view and our stats buttons container
view, okay. Access should be vertical there we go and yep all of the other stuff
maybe let's add in here a spacing of 5 it doesn't really matter but yeah it's
really nice to have some spacing there. So let's build in run and see how that
looks like. Well we need to head our container views some height. So stats
numbers container view will be of height let's say profile image view height multiplied by
let's see 0.66, okay. And the numbers container view buttons, sorry about that
it's buttons container view will be 33. Okay and let's set the, or maybe 30 and
let's add in here UIView. So we don't get that squash the way. Yeah it looks
really really nice, Okay maybe let's have this as 63 and 43.
Great! Now we want to add these numbers and posts and as you can see we have
these as separate lines but yap, let's add these as a stack again, okay.
Let's see how this looks like. Really really nice, okay. Okay! Let's just scroll
all the way up and get rid of these green, red and purple. So white and white.
Okay! Now in the numbers container view we want to add some labels but again those
will be stacks so we are going to have this has containers too, okay.
Stats numbers let's see one container view that will be, okay. So let's have
this as red maybe we could have some more obvious names here but it's okay
for now, like following followers and I don't know what's there opposed
followers and following but it's okay for now. Let's see we want to stack them.
So under stats number container view. So stats numbers container view we want to
stack and we want to have our views here. So stats number one container view.
Stats number two container view and stats number three container view, okay. Access
is horizontal and I believe we could get
away by adding the height here or rather yet the width sorry. The width it should be
our number stats container view divided by three but we will see if this works and no
spacing here or rather yeah no spacing. Let's see how this looks like if
we get our stats container view dot frame and dot size dot with, okay.
Let's see if this really works. Yeah, it kind of works. Let's add in here our second views
background to be something else. Let see here purple. Yeah, it doesn't really work we
want to set these with constants as
constants really. So let's see here.
Stats numbers one container view dot with and let's add in here 50 now.
Let's do these for the other two. Let's see how this looks, okay. It looks kind of
great. Let's see if we do you have, let's see let's add in here 150. How does that
look. It's much too big so let's add in here 100 maybe this isn't the right way
to basically constrain it by giving these hard-coded numbers but it looks
kind of okay so 90, 90, 90 just build and run again, okay.
95 will do okay. 95, 95 and 95.
Basically what we should do here is have this stats number container view have
its own hide but I don't know if that will work so let's see stats container
view divided by three or rather yet dot frame dot size dot width divided by three. Let's see if this works and
it doesn't. For some reason we don't get this here. So we are not able to get this.
90 will be fine, okay. Well most probably you want to not set this as a
hard-coded number but it will work for us right now.
So these stats numbers one container view will contain this label. So let me
just show you this one and let's just create this label. I just crawled all the
way out and find our stat numbers container view. So let's create a label here.
So let me just maybe grab our label from here
and paste it in there. Okay and that will be our stat numbers one label. There we go.
We'll be UILabel and it will print out 838 posts. Okay and I will use here
this is awesome way of adding these strings, okay.
Text alignment center is okay and we'll have this as black for now and let's
just add this, okay. Stats number one label. So it's numbers view dot add sub view
stat numbers one label and we just simply want to constrain it or edge it to
our stats number one container view. So stats number one label edge is to
constrainable stats number one container view. Let's see how that looks.
Okay, we don't really have enough space here so maybe let's just, let me just go all the
way up and have this as 12, oh I can see my mistake now we want to have our label
to support multiple number of lines. So let's set this to zero and hopefully we
will get back these two lines. There we go and now let's do all of this for the
followers and following, okay.
Number two and the followers and now comes the following. Okay and what we
need to do is basically add them to our view. So we are adding it here and
building out our edging here. Let's build and run. Looks really great. Now let's get
rid of these background colors, okay. So I really like this.
Okay! Now it's time to add in these buttons. Now this is already the end
of video three and I believe you have much hands-on experience with tiny
constraints being that said I will lay out all of this UI on this project and
you will be able to take a look at it in a github repository. You just click the
link down below for the resources where the link to the github repository
will be unveiled. Now I will fast forward all of this because yes I want to show
you that I really build this out and I'm not just copy and pasting and if you did
like this video and if you did like the whole series on tiny castrates go ahead
and give it a thumbs up, subscribe to the channel of course and hit that
notification bell to get notified of new videos as they do come out and now as
usual we see you in the next one but I will start working on implementing these
UI's in a fast over fashion, Okay if you do want to then just skip this part
close this video and take a look at the github repository if not enjoy.