1

00:00:07,620 --> 00:00:11,480

Hey hey ladies and gentlemen welcome back Johnny be here with us.



2

00:00:11,640 --> 00:00:18,800

Come and we are continuing on with our SMAC chat app and we're making some great progress in just the



3

00:00:18,800 --> 00:00:19,670

first couple of lessons.



4

00:00:19,670 --> 00:00:22,550

We already got the slide out menu.



5

00:00:22,550 --> 00:00:25,580

In fact let's go ahead and just run this and take a look.



6

00:00:25,850 --> 00:00:33,880

In this lesson we're going to continue working on our UI we're going to get the channel VCU set up to



7

00:00:33,890 --> 00:00:39,090

actually go ahead and take a look at our design mockups.



8

00:00:39,110 --> 00:00:42,260

And here is what we're going to be working on.



9

00:00:42,260 --> 00:00:46,480

So we got a couple of labels some buttons up on here.



10

00:00:46,490 --> 00:00:53,570

Button Down here with a with an image and a table view that's going to contain our channels later on.



11

00:00:53,810 --> 00:00:59,030

And one of the big things here though that we're going to work on is what you see here in the background.



12

00:00:59,030 --> 00:01:00,470

This gradient.



13

00:01:01,010 --> 00:01:09,140

And so we're actually going to code up a custom gradient view file that's going to be able to that's



14

00:01:09,140 --> 00:01:12,260

going to be able to do this or is going to be pretty cool pretty fun.



15

00:01:12,260 --> 00:01:13,430

And so let's get started.



16

00:01:13,430 --> 00:01:14,070

All right.



17

00:01:14,330 --> 00:01:15,130

So that's good.



18

00:01:15,140 --> 00:01:23,540

And jump over here into main storyboard real quick and my Looks like our files get shifted around a



19

00:01:23,540 --> 00:01:23,910

bit.



20

00:01:23,930 --> 00:01:27,050

So we're just going to drag this over.



21

00:01:27,050 --> 00:01:28,960

All right so here's where we're at.



22

00:01:29,150 --> 00:01:35,240

Here's what we got so far in our simulator we're able to pull this and drag this over and right now



23

00:01:35,240 --> 00:01:37,790

our channel Visi is just plain white.



24

00:01:37,850 --> 00:01:40,250

So let's go ahead and work on that.



25

00:01:40,250 --> 00:01:41,750

So how are we going to make this gradient.



26

00:01:41,810 --> 00:01:46,020

You know you might think it's going to be pretty tough but it's actually not too bad.



27

00:01:46,020 --> 00:01:50,660

I swear we're going to do is we're going to come over here to our view folder and we're going to right



28

00:01:50,660 --> 00:01:54,910

click and say new file and we're going to create a subclass.



29

00:01:54,980 --> 00:01:59,780

So we're going to make sure you've got Iowa selected and Koca touch class are going to say next and



30

00:01:59,780 --> 00:02:02,050

it's going to be a subclass of you I view.



31

00:02:02,120 --> 00:02:04,270

I'm going to call this ingredient.



32

00:02:04,630 --> 00:02:07,830

You say next.



33

00:02:08,270 --> 00:02:12,210

And create.



34

00:02:12,290 --> 00:02:12,560

All right.



35

00:02:12,570 --> 00:02:20,510

So what we're going to do is we're going to make this subclass not only work when we run but also so



36

00:02:20,510 --> 00:02:25,740

that you can see it in real time action in the in the in the storyboard OK.



37

00:02:25,970 --> 00:02:34,970

So first off what we gotta do is we've got to put in a line of code here called IB desirable and basically



38

00:02:35,030 --> 00:02:41,940

what this does is this just lets this class know that it needs to be able to render inside of the storyboard.



39

00:02:42,170 --> 00:02:49,610

And then we're going to need a couple of variables that we are able to select and change in the storyboard.



40

00:02:49,610 --> 00:02:54,350

So for instance if we come over to the storyboarded and just grab any of these elements you'll see here



41

00:02:54,350 --> 00:03:01,490

that you know we have things that we can select and change and we're just going to create custom variables



42

00:03:01,490 --> 00:03:08,000

that we can change ourselves and that will change the properties of this custom view.



43

00:03:08,000 --> 00:03:09,120

OK.



44

00:03:09,560 --> 00:03:13,240

And we do that by declaring an IP inspectable.



45

00:03:13,700 --> 00:03:14,320

OK.



46

00:03:14,560 --> 00:03:19,260

And we're going to say var top color.



47

00:03:19,940 --> 00:03:22,390

And that's going to be of type color.



48

00:03:22,490 --> 00:03:29,740

And for now I'll just say something like you like colored dot blue and so now what we're doing is we're



49

00:03:29,740 --> 00:03:34,480

creating a variable that can be changed inside of the storyboard.



50

00:03:34,900 --> 00:03:39,650

And that's going to be a color picture that we can be able to choose.



51

00:03:39,730 --> 00:03:40,300

OK.



52

00:03:40,450 --> 00:03:50,490

And then we're going to say did set and we're going to say self-taught needs out.



53

00:03:50,650 --> 00:03:51,050

OK.



54

00:03:51,250 --> 00:03:56,680

So if we click on self that needs lay out right here it says that what this does is it invalidates the



55

00:03:56,710 --> 00:04:01,530

current layout of the receiver and triggers a layout update during the next update cycle.



56

00:04:01,540 --> 00:04:02,090

OK.



57

00:04:02,320 --> 00:04:08,780

So basically when we're in storyboard if we click on this and change the color when we said it.



58

00:04:08,860 --> 00:04:13,380

That's what this key word here is set then we're going to say OK we've changed some stuff.



59

00:04:13,390 --> 00:04:18,000

So go ahead and update how we look update the layout of this view.



60

00:04:18,090 --> 00:04:18,790

OK.



61

00:04:19,180 --> 00:04:24,840

And so we're going to need a couple of variables here because we're making a gradient.



62

00:04:24,940 --> 00:04:32,170

And of course a gradient is you know you have usually two colors it can be multiple colors but you're



63

00:04:32,170 --> 00:04:37,920

changing gradually from one color to another color and it just sort of blends nicely together.



64

00:04:37,930 --> 00:04:38,600

Right.



65

00:04:38,890 --> 00:04:43,810

So we got a top color and then we're going to have of course a bottom color and I'm just actually going



66

00:04:43,810 --> 00:04:48,930

to copy this and pasted for sake of time too.



67

00:04:49,210 --> 00:04:56,770

Bottom color and we'll change this soon to say UI colored dark green and same thing.



68

00:04:56,770 --> 00:05:00,440

Once we change it we're just going to update our layout.



69

00:05:00,800 --> 00:05:03,950

OK but what's going to happen when we update our layout.



70

00:05:04,060 --> 00:05:10,140

Well we you know we haven't even we haven't said what needs to happen when we update it.



71

00:05:10,210 --> 00:05:15,990

So we are going to override our lay out sub views because.



72

00:05:16,050 --> 00:05:18,990

So what's happening is when when we change color we say Sidneys lay.



73

00:05:19,000 --> 00:05:25,810

And what happens when you say senese lay out then the the layout of the view is updated and this function



74

00:05:25,810 --> 00:05:26,840

right here is called.



75

00:05:26,850 --> 00:05:27,520

All right.



76

00:05:27,520 --> 00:05:33,960

So here is where we're going to actually create our layer and add it to this new subclass.



77

00:05:33,970 --> 00:05:34,600

OK.



78

00:05:35,160 --> 00:05:38,630

So working with gradient layers and swift is actually pretty easy.



79

00:05:38,680 --> 00:05:47,590

So what we're going to do first is we're just going to create a variable called gradient layer and that's



80

00:05:47,590 --> 00:05:48,870

going to be of type.



81

00:05:49,000 --> 00:05:53,590

A gradient layer for s.a.a stands for core animation.



82

00:05:53,590 --> 00:05:58,840

And if you click on here right here you can see the description says a layer that draws a color gradient



83

00:05:58,870 --> 00:06:03,600

over its background color filling the shape of the layer including rounded corners.



84

00:06:03,660 --> 00:06:04,220

OK.



85

00:06:04,630 --> 00:06:11,240

So we're going to create the gradient layer and then we're going to set up some of its properties.



86

00:06:11,250 --> 00:06:14,700

OK so what does a gradient need.



87

00:06:14,980 --> 00:06:19,530

Well first off it needs some colors of which we've already created a couple of here.



88

00:06:19,840 --> 00:06:29,950

It needs a starting and an end point and it needs to know how big of the shape it is going to be filling.



89

00:06:30,280 --> 00:06:32,300

And pretty much it.



90

00:06:32,320 --> 00:06:34,900

So it needs colors start and end point.



91

00:06:34,930 --> 00:06:37,350

And to know how big it's going to be.



92

00:06:37,420 --> 00:06:37,840

OK.



93

00:06:38,720 --> 00:06:44,120

So to start with we're going to say gradient layer dot colors is equal to.



94

00:06:44,120 --> 00:06:50,220

And you see that it is expecting an array of UI or C.G. colors actually.



95

00:06:50,220 --> 00:07:00,670

So we're going to see top color dot CEG color and then bottom color dot Siggi color.



96

00:07:00,950 --> 00:07:06,350

So now we have set up the colors that are going to be included in this gradient.



97

00:07:06,350 --> 00:07:11,840

Now we're going to set up the start and end point and talk about the start and end point.



98

00:07:11,840 --> 00:07:15,760

I created this little graph for you.



99

00:07:15,920 --> 00:07:22,760

So in Iowa as the UI views they have their own coordinate system OK.



100

00:07:23,000 --> 00:07:29,360

So you view the origin is 0 0 so x equals zero and y equals zero.



101

00:07:29,360 --> 00:07:32,810

And that's actually at the top left which might be a little bit counter-intuitive to you.



102

00:07:32,810 --> 00:07:33,420

Right.



103

00:07:33,440 --> 00:07:38,510

So in school you probably learn with graphs that the origin is down here and the bottom left not so



104

00:07:38,510 --> 00:07:46,190

with Iowas I don't know why but the origin is up here in the top left at 0 0 and the y axis grows more



105

00:07:46,190 --> 00:07:51,930

positive as you go down and the x axis grows more positive as you go to the right.



106

00:07:51,950 --> 00:07:59,390

So if you use the the numbers are normalized to 1 OK so 0 being the least and one being the most.



107

00:07:59,390 --> 00:08:06,830

All right so here at the top left we have we're at 0 0 and then here at the bottom right is 1 1 or here



108

00:08:06,830 --> 00:08:08,030

at the top right.



109

00:08:08,150 --> 00:08:09,720

X's 1.



110

00:08:09,740 --> 00:08:16,760

And why is 0 or here at the bottom left X is zero and y is one.



111

00:08:16,790 --> 00:08:24,080

So with that in mind if we wanted to add gradient that went cascading from the top left to the bottom



112

00:08:24,080 --> 00:08:30,040

right the starting point would be zero zero and the endpoint would be 1 1.



113

00:08:30,380 --> 00:08:39,740

And if we take a look at our designs it does indeed look like our gradient flows from the top left to



114

00:08:39,860 --> 00:08:41,020

the bottom right.



115

00:08:41,030 --> 00:08:46,370

So I'm thinking our start point needs to be here at 0 0 and our end point needs to be down here at 1



116

00:08:46,370 --> 00:08:47,450

1.



117

00:08:47,580 --> 00:08:47,740

Right.



118

00:08:47,780 --> 00:08:50,280

So let's go ahead and code that up.



119

00:08:50,420 --> 00:08:51,760

So that just looks like this.



120

00:08:51,760 --> 00:09:00,560

We're going to say gradient there Dot start point is equal to and if you check out right here what are



121

00:09:00,560 --> 00:09:02,040

we expecting.



122

00:09:02,290 --> 00:09:07,130

C'mon auto complete it looks like it's going to show me but it's expecting a C.G. point.



123

00:09:07,190 --> 00:09:07,700

OK.



124

00:09:08,030 --> 00:09:09,460

So a core graphics point.



125

00:09:09,500 --> 00:09:15,050

And so you just sort of see your point and then pull up a parentheses it'll give us some options for



126

00:09:15,440 --> 00:09:16,400

auto completion.



127

00:09:16,520 --> 00:09:17,650

So we're going to do.



128

00:09:17,700 --> 00:09:26,450

And here's how we're going to see the 0 0 is our start point and Preedy and laser dot and point is equal



129

00:09:26,450 --> 00:09:31,810

to see you point.



130

00:09:32,240 --> 00:09:42,150

And that is going to be one 1 and so now we need to tell it what size the view is going to be sorgen



131

00:09:42,150 --> 00:09:44,470

say ingredient layer dot



132

00:09:47,200 --> 00:09:49,720

frame is equal to.



133

00:09:49,810 --> 00:09:55,640

And for that we're just going to set it equal to the size of the view that it is a subclass of Spruance



134

00:09:55,720 --> 00:09:57,850

self-taught bounds.



135

00:09:58,480 --> 00:10:03,010

And then lastly we need to we've just created a layer we haven't added that to anything.



136

00:10:03,010 --> 00:10:10,200

So we're going to add this gradient layer which is a see a gradient layer to the UI views layers.



137

00:10:10,250 --> 00:10:19,480

It's once a self-taught layer dot insert some letters so this the specified layer into the receiver's



138

00:10:19,480 --> 00:10:22,150

list of layers at the specified index.



139

00:10:22,380 --> 00:10:29,840

So you can say insert Topes the layer that we are going to insert is of course our gradient layer and



140

00:10:29,890 --> 00:10:35,800

we are going to place it at zero meaning that it's at the first layer.



141

00:10:35,830 --> 00:10:36,030

All right.



142

00:10:36,040 --> 00:10:44,140

So we're going to see this and we're going to clean this up a little bit get rid of the empty space.



143

00:10:44,140 --> 00:10:45,060

Save that.



144

00:10:45,370 --> 00:10:47,860

And let's go over this just this whole entire file.



145

00:10:47,860 --> 00:10:49,200

Just one more time to start off.



146

00:10:49,210 --> 00:10:53,830

We have I design them all which means that it's going to be able to work in storyboard.



147

00:10:53,830 --> 00:11:01,720

We have our inspectable variables that we'll be able to change inside a storyboard dynamically and then



148

00:11:01,720 --> 00:11:08,380

we have our override function of layout subbie use which is called whenever we change one of our variables



149

00:11:08,380 --> 00:11:11,460

here and inside of that we create a layer.



150

00:11:11,500 --> 00:11:14,470

We set the layer colors.



151

00:11:14,560 --> 00:11:16,950

We set the start and end point and the frame.



152

00:11:16,990 --> 00:11:20,810

And lastly we insert that Sabliere to the view itself.



153

00:11:20,820 --> 00:11:21,300

OK.



154

00:11:21,640 --> 00:11:27,310

So that looks good we're going to save that and we're going to come back over here to our main story



155

00:11:27,330 --> 00:11:34,400

Borton and I'm going to select our channel Visi and I'm going to select our view here and we read it



156

00:11:34,410 --> 00:11:39,000

change its class to a greedy interview.



157

00:11:39,020 --> 00:11:40,830

Now check this out.



158

00:11:41,170 --> 00:11:45,790

This is going to do a little bit of work here because it's got to reset the storyboard but if everything



159

00:11:45,790 --> 00:11:50,950

goes according to plan we should see a nice gradient view right here.



160

00:11:53,690 --> 00:11:55,070

And what law.



161

00:11:55,070 --> 00:11:57,130

So you'll see here that we have.



162

00:11:57,260 --> 00:12:00,300

We're starting here at 0 0 and we're ending up here.



163

00:12:00,380 --> 00:12:06,440

So with these end start and end points you kind of think of it like you're drawing a string between



164

00:12:06,440 --> 00:12:15,220

those two points and the color gradient in lines has to be perpendicular to that line at any point.



165

00:12:15,230 --> 00:12:15,680

OK.



166

00:12:15,830 --> 00:12:19,500

So imagine a string from here to here.



167

00:12:19,610 --> 00:12:24,250

All of these gradient lines are perpendicular to that line OK.



168

00:12:24,530 --> 00:12:28,950

So you can do some pretty cool things with with these grating views.



169

00:12:29,000 --> 00:12:32,600

Just go ahead and just come over here and let's see if we can change these.



170

00:12:33,030 --> 00:12:38,210

So we can change this to read and yeah it should update automatically here and storyboards So that is



171

00:12:38,210 --> 00:12:39,330

pretty cool.



172

00:12:39,710 --> 00:12:45,800

And I just wanted to show you a couple of other cool things with the gradients you see here in our gradient



173

00:12:45,830 --> 00:12:47,690

layer dark colors.



174

00:12:47,690 --> 00:12:51,860

It doesn't have to be just who you can actually put as many greedy and colors in here as you want.



175

00:12:51,860 --> 00:12:57,260

So for instance I'm going to bring a sandwich the middle colors we're going to see a top color bottom



176

00:12:57,260 --> 00:13:01,490

color top color that Suji color.



177

00:13:01,700 --> 00:13:04,800

And then this jump back into storyboard and see what that looks like.



178

00:13:07,710 --> 00:13:12,050

So now you see that we have three different colors here in the gradient.



179

00:13:12,510 --> 00:13:17,830

And then let's go ahead and show you how you can switch up some of these other things here.



180

00:13:18,000 --> 00:13:22,590

I want to bring back my let's see here my coordinate system.



181

00:13:22,590 --> 00:13:27,270

So say you wanted a gradient that was you know just straight up and down.



182

00:13:27,450 --> 00:13:30,420

What would your start and end point need to be.



183

00:13:30,750 --> 00:13:35,370

Well your start point would need to be right here in the middle and your endpoint would need to be right



184

00:13:35,370 --> 00:13:36,790

here in the middle at the bottom.



185

00:13:37,110 --> 00:13:38,480

So what would that look like.



186

00:13:38,670 --> 00:13:42,850

Well why would be zero and your X would be 0.5 right.



187

00:13:42,890 --> 00:13:52,220

So you're going to say zero point five and then at the bottom needs to be all the way up the.



188

00:13:52,710 --> 00:13:53,400

I'm sorry.



189

00:13:53,430 --> 00:14:02,740

It should be 0.5 for X and 0 for y and then at the bottom why should be 1 and X should still be 0.5.



190

00:14:03,000 --> 00:14:09,110

Let's go and see what that looks and see that come back to our storyboard.



191

00:14:09,110 --> 00:14:09,430

There we go.



192

00:14:09,480 --> 00:14:15,840

So now we see that we have our grading just straight up and down and same thing if you wanted to be



193

00:14:16,530 --> 00:14:30,350

vertical looking gradient then you would just change it to 0.5 for the y 0 4 x and then the endpoint



194

00:14:30,390 --> 00:14:33,520

would be one for X and 0.5.



195

00:14:33,570 --> 00:14:38,070

Save that and come back to storyboard.



196

00:14:38,590 --> 00:14:39,460

And there you go.



197

00:14:39,640 --> 00:14:44,170

So we can do all sorts of cool things with with gradients.



198

00:14:44,830 --> 00:14:50,320

And then the last thing that we want to do is actually just set these to the right colors that we want



199

00:14:50,320 --> 00:14:57,820

to use because as you probably noticed this is nothing like the colors that we want to be seen here.



200

00:14:57,820 --> 00:14:58,390

All right.



201

00:14:58,390 --> 00:15:03,800

So what those cars actually are let's go back to our greeting view and switch things back.



202

00:15:04,060 --> 00:15:10,720

Just going to do a switch back to where we want them 0 0 and 1 1.



203

00:15:10,780 --> 00:15:16,100

Then when you get rid of this third color and then I'm going to show you something cool.



204

00:15:16,170 --> 00:15:24,370

So the old days you'd either have to use the standard colors that color comes with or could your own



205

00:15:24,370 --> 00:15:29,500

using the color initialize with the R G B components or.



206

00:15:29,550 --> 00:15:35,890

Now you can just do something with like this color literal and then you can double click on this and



207

00:15:35,890 --> 00:15:39,700

put in your own colors whatever you want them to be.



208

00:15:39,700 --> 00:15:44,720

All right so let me just pull up here the colors that we want this to be.



209

00:15:45,220 --> 00:15:46,270

Let's see here.



210

00:15:46,520 --> 00:15:55,350

So this purple is going to be right here next color for a for d d.



211

00:15:55,480 --> 00:15:56,000

Right.



212

00:15:56,020 --> 00:16:03,030

So that's our top color and our bottom color and do the same thing here color literal.



213

00:16:03,340 --> 00:16:13,700

Then double click on it to change it go to other and it's hecks color is 2 C D for d 8.



214

00:16:14,350 --> 00:16:14,700

Right.



215

00:16:14,830 --> 00:16:16,530

That looks good.



216

00:16:16,570 --> 00:16:23,900

I just want to say that come back over to our storyboard and there we go.



217

00:16:23,920 --> 00:16:24,430

All right.



218

00:16:24,700 --> 00:16:27,640

So we got our good looking great.



219

00:16:27,640 --> 00:16:30,150

And let's go ahead and compare this.



220

00:16:30,560 --> 00:16:33,830

That's looking was looking pretty good.



221

00:16:33,880 --> 00:16:34,110

All right.



222

00:16:34,110 --> 00:16:41,860

So this guy right here we can also change to be the greedy and view change as well.



223

00:16:41,860 --> 00:16:43,390

All right so that's looking good.



224

00:16:43,390 --> 00:16:47,130

All right so what's next here in our channel.



225

00:16:47,210 --> 00:16:48,280

See what do we got.



226

00:16:48,280 --> 00:16:50,590

We got a label up here.



227

00:16:50,590 --> 00:16:51,920

We got another label here.



228

00:16:52,000 --> 00:17:01,410

But a table view and a image view here and then a button down here.



229

00:17:02,010 --> 00:17:02,290

Right.



230

00:17:02,290 --> 00:17:05,200

So let's go ahead and get cracking on that.



231

00:17:05,200 --> 00:17:13,060

So here I'm going to go ahead and search for the label and drag you in here.



232

00:17:13,150 --> 00:17:15,980

I got another label in.



233

00:17:16,030 --> 00:17:20,280

We need a button up here.



234

00:17:20,660 --> 00:17:24,370

Hey button down here.



235

00:17:25,030 --> 00:17:30,180

And an image view you as well down here.



236

00:17:30,220 --> 00:17:32,180

All right let's go and get started up here.



237

00:17:32,350 --> 00:17:42,340

Let me grab both of these labels and change the color to white I you change the font to custom.



238

00:17:42,550 --> 00:17:44,400

And we're going to go with hell couldn't you.



239

00:17:44,770 --> 00:17:46,030

And that looks fine.



240

00:17:46,040 --> 00:17:48,000

Is it done.



241

00:17:48,550 --> 00:17:53,460

This top one though is actually going to be style bold.



242

00:17:54,050 --> 00:17:57,530

And we're going to bump that up a couple of sizes.



243

00:17:57,550 --> 00:17:59,050

So it looks good.



244

00:17:59,080 --> 00:18:07,900

I'm going to change the title to smack and then if you if you get like this where is truncated like



245

00:18:07,900 --> 00:18:08,330

them.



246

00:18:08,410 --> 00:18:13,470

If you click on it and just go a command equal it will fit it to its size height.



247

00:18:13,740 --> 00:18:17,250

And this guy right here we're going to call this channels right.



248

00:18:17,770 --> 00:18:23,830

And then we're going to decrease its size all the way down to 12 right here.



249

00:18:23,980 --> 00:18:27,360

And then we're going to say command equal on it again.



250

00:18:27,670 --> 00:18:29,720

And that looks pretty good.



251

00:18:29,950 --> 00:18:34,120

And this button over here this is the ad channel buttons so it's a plus sign.



252

00:18:34,120 --> 00:18:37,870

We don't need any any text there for the button.



253

00:18:38,230 --> 00:18:45,490

So I delete the text and then here I'm going to go to its image right here and this is add the channel



254

00:18:45,490 --> 00:18:46,290

button.



255

00:18:46,300 --> 00:18:48,030

All right so we got that right there.



256

00:18:48,090 --> 00:18:49,640

Let's go and zoom in on this.



257

00:18:51,230 --> 00:18:52,660

View Controller here.



258

00:18:53,110 --> 00:18:53,320

All right.



259

00:18:53,320 --> 00:18:55,410

So I started to take shape a little bit.



260

00:18:55,740 --> 00:18:58,510

So down here we have our image view.



261

00:18:58,900 --> 00:19:03,160

And so I'm just going to resize I was going through an image in there so that we can actually see it



262

00:19:03,700 --> 00:19:10,660

and the image that we want is called menue profile icon and that looks good.



263

00:19:10,700 --> 00:19:16,250

We need to resize it so the size is 75 by 75.



264

00:19:17,010 --> 00:19:19,940

I'm just going to drag this down here to the bottom



265

00:19:23,260 --> 00:19:32,780

that we go and then I'm going to track this guy right here and change its text color to white of course



266

00:19:33,170 --> 00:19:37,120

change the font to custom and how that it can new is fine.



267

00:19:37,130 --> 00:19:39,580

But this is going to be bold.



268

00:19:39,650 --> 00:19:41,270

That looks good.



269

00:19:41,270 --> 00:19:50,430

Going to change its title to log in right and then looks pretty good.



270

00:19:50,450 --> 00:19:53,210

Now go ahead and start adding some constraints here.



271

00:19:53,210 --> 00:20:03,360

All right so for this guy let's go zero from the left and 24 from the top and then for channels let's



272

00:20:03,420 --> 00:20:14,530

go zero from the left and 20 from the bottom of the SMAC And what does that look different.



273

00:20:15,630 --> 00:20:18,760

Let's see did I not do a left constraint leading space.



274

00:20:18,770 --> 00:20:23,840

Oh there should be zero leadings space should be zero.



275

00:20:23,860 --> 00:20:24,080

All right.



276

00:20:24,100 --> 00:20:31,570

And then for our button here we're going to go ahead and do a controlled drag to the channel's label



277

00:20:31,570 --> 00:20:38,830

and when I say center vertically and then we need to add a constraint and you may think that we should



278

00:20:38,830 --> 00:20:47,560

just do a standard spacing from the right of you know 20 but if we run this remember that we actually



279

00:20:47,560 --> 00:20:52,750

have a top view controller that doesn't disappear entirely.



280

00:20:52,780 --> 00:20:55,420

So that's probably going to be obstructed.



281

00:20:55,740 --> 00:20:56,510

Yep see.



282

00:20:56,590 --> 00:21:00,210

So you can even can't even really see it.



283

00:21:00,330 --> 00:21:03,060

You can see it for just a second but it's being covered up.



284

00:21:03,060 --> 00:21:10,500

So remember we made the we made we left 60 points on the right.



285

00:21:10,600 --> 00:21:16,210

So what we want to do is actually going if we have it selected we can go to it size constraint and then



286

00:21:16,210 --> 00:21:21,160

we can drag its trailing space people to 20 and I can just change this to.



287

00:21:21,160 --> 00:21:24,450

We want this to be 72.



288

00:21:24,460 --> 00:21:25,380

All right.



289

00:21:25,380 --> 00:21:27,550

So let's go ahead and run that again.



290

00:21:29,110 --> 00:21:31,810

And if we click on this now or we have it.



291

00:21:31,820 --> 00:21:34,840

And you know I think this is a 72 what I want to.



292

00:21:34,850 --> 00:21:40,170

But 72 without the constraint with the margins you see we have some constraints.



293

00:21:40,220 --> 00:21:45,080

The margins were here so I'm going to go and just delete this and then add it again.



294

00:21:45,080 --> 00:21:47,900

But uncheck the constraint margins right here.



295

00:21:47,900 --> 00:21:48,510

OK.



296

00:21:48,620 --> 00:21:55,700

So what I did I did that kind of quick but I deleted the old constraint that had the margin already



297

00:21:55,700 --> 00:21:56,740

built into it.



298

00:21:56,840 --> 00:22:03,120

Then I clicked on it again added a new constraint and made sure that the constraint to margins was unchecked.



299

00:22:03,200 --> 00:22:06,910

And I'm going to say add constraint and that should do it for us.



300

00:22:06,920 --> 00:22:09,760

All right so these are all constrained up here at the top.



301

00:22:09,800 --> 00:22:12,010

Let's go and do these guys down here at the bottom.



302

00:22:12,090 --> 00:22:19,700

So when I say zero from the left 20 from the bottom and width and height and for this carrot here we're



303

00:22:19,700 --> 00:22:26,900

going to control drag to the image here I'm going I say center vertically and then I'm going to give



304

00:22:26,900 --> 00:22:31,010

it 20 from the left.



305

00:22:31,020 --> 00:22:34,480

All right so that is now also fully constrained.



306

00:22:34,570 --> 00:22:44,020

And last but not least I'm going to throw a table with you in here and let's go ahead and just kind



307

00:22:44,020 --> 00:22:47,560

of throw you in here and drag you out.



308

00:22:47,740 --> 00:22:55,330

And I'm going to constrain that zero from the left 20 from the top zero from the right and 20 from the



309

00:22:55,330 --> 00:22:56,390

bottom.



310

00:22:56,400 --> 00:23:03,450

Say add four constraints and then I'm going to make sure that our background is clear on this guy's



311

00:23:03,520 --> 00:23:09,630

background here and say clear color and I'm going to save this and run it just to see how it looks.



312

00:23:10,000 --> 00:23:15,230

And voila there you go looking pretty snazzy.



313

00:23:15,250 --> 00:23:19,080

All right so we're making some great progress on our AUI right here.



314

00:23:19,110 --> 00:23:26,220

We created an awesome gradient file that you can reuse anywhere for anything that inherits from you



315

00:23:26,220 --> 00:23:27,380

I'd use.



316

00:23:27,400 --> 00:23:29,510

So you know we're making good progress.



317

00:23:29,600 --> 00:23:36,940

And yeah so next thing we're going to do is go ahead and save and commit hard changes because we are



318

00:23:37,270 --> 00:23:38,310

good little programmers.



319

00:23:38,330 --> 00:23:46,600

When I say get I make sure I'm on the right branch you for less than three minutes say get status say



320

00:23:46,600 --> 00:23:55,270

get and get commit dash em and this is less than three.



321

00:23:55,440 --> 00:24:03,720

And then I'm going to actually push this branch up to my depth slopes repose and I say get push.



322

00:24:03,780 --> 00:24:08,220

Origin lesson dash 0 3



323

00:24:11,400 --> 00:24:16,820

put in my password and that is pushed up to the online repo.



324

00:24:16,930 --> 00:24:18,120

And we are looking good.



325

00:24:18,130 --> 00:24:22,990

All right so and the next lesson we're going to continue working on the UI and hopefully we'll get to



326

00:24:22,990 --> 00:24:25,570

the log in view control all right.



327

00:24:25,780 --> 00:24:28,410

So if you guys are having fun and I will see you in the next one.