1

00:00:08,110 --> 00:00:13,140

Everybody this is Caleb again with devah slopes dot com and in this video we're going to build goals



2

00:00:13,140 --> 00:00:14,010

VC.



3

00:00:14,010 --> 00:00:18,660

This is like the homescreen of our app that will show all of the different goals that we have set and



4

00:00:18,660 --> 00:00:22,050

saved we're going to create the subclass.



5

00:00:22,050 --> 00:00:26,550

The code file that goes along with this view controller and we're also going to link up the Iby actions



6

00:00:26,550 --> 00:00:28,620

and IAB outlets for this view controller.



7

00:00:28,620 --> 00:00:31,000

So let's dive into it now.



8

00:00:31,080 --> 00:00:37,200

Pull open your X code project and what we're going to do is first we're going to go ahead and modify



9

00:00:37,200 --> 00:00:40,950

the view subclass or The View Controller subclass rather.



10

00:00:41,160 --> 00:00:43,140

And we're going to rename this goals.



11

00:00:43,170 --> 00:00:47,090

VC OK because that's what it is it's the homescreen that shows our goals.



12

00:00:47,130 --> 00:00:51,120

So we're going to rename the class goals Visi as well.



13

00:00:51,180 --> 00:00:55,400

And you know what it still says View Controller here so I'm going to change it to say goals.



14

00:00:55,490 --> 00:00:57,080

VC that's great.



15

00:00:57,090 --> 00:01:02,670

But now we need to go into the storyboard and we also need to set the identity because this is still



16

00:01:02,670 --> 00:01:08,370

referencing that view controller file but it's no longer added in our in our project so click on the



17

00:01:08,370 --> 00:01:13,770

View Controller click on the identity inspector remove View Controller and change it to gols.



18

00:01:13,860 --> 00:01:16,200

VC press enter to save it.



19

00:01:16,200 --> 00:01:17,760

And we're now good to go.



20

00:01:18,090 --> 00:01:21,870

So supercool Let's go ahead and let's build it out.



21

00:01:21,870 --> 00:01:24,730

So we're going to start with a UI view.



22

00:01:24,950 --> 00:01:28,590

Drag one on and we're going to make it.



23

00:01:28,620 --> 00:01:30,660

Let's see we're going to stretch it out like so.



24

00:01:30,660 --> 00:01:34,380

And let's make it maybe 70 high.



25

00:01:34,440 --> 00:01:35,690

Hey that looks pretty good.



26

00:01:36,990 --> 00:01:38,060

Nice.



27

00:01:38,100 --> 00:01:40,170

And let's go ahead and give it some constraints.



28

00:01:40,170 --> 00:01:45,540

Click the pin button and let's pinnate zero from the left to zero from the top and zero from the right.



29

00:01:45,540 --> 00:01:48,800

Of course we need to give it a fixed height of 70.



30

00:01:48,900 --> 00:01:50,460

Click Add four constraints.



31

00:01:50,790 --> 00:01:53,760

Then we're going to go ahead and give it a background color.



32

00:01:53,760 --> 00:02:01,340

Now I've been using this nice green color and that green color just so you know the hex value is 6 db.



33

00:02:01,520 --> 00:02:02,810

C 63.



34

00:02:03,000 --> 00:02:08,370

So if you want to use the same one you can you can borrow this code and paste it in there and you will



35

00:02:08,370 --> 00:02:10,060

be good to go.



36

00:02:10,110 --> 00:02:10,790

Cool.



37

00:02:10,860 --> 00:02:16,880

So we're going to make this look like a UI navigation controller by adding a button here and we're going



38

00:02:16,870 --> 00:02:19,380

to put a title up at the top so to do that.



39

00:02:19,380 --> 00:02:22,320

Let's go ahead let's do the title first.



40

00:02:22,320 --> 00:02:25,810

Go ahead and type you I label and drag on a label.



41

00:02:25,830 --> 00:02:28,230

Now if you know anything about me you know that I love the font.



42

00:02:28,230 --> 00:02:29,130

Avenir next.



43

00:02:29,130 --> 00:02:30,360

So I'm going to use that.



44

00:02:30,510 --> 00:02:34,570

But you are more than welcome to use whatever font you want in your next.



45

00:02:34,570 --> 00:02:37,490

Just my personal favorite now to change that sorry.



46

00:02:37,500 --> 00:02:40,730

I went from system to custom and then to Avenir next.



47

00:02:40,740 --> 00:02:44,200

Now the first word is going to be goal.



48

00:02:44,300 --> 00:02:49,420

And that's going to be in regular weight font size 18 I think looks good.



49

00:02:49,560 --> 00:02:52,650

Then the second label is going to be in bold.



50

00:02:52,650 --> 00:02:54,450

So for now just click done.



51

00:02:54,450 --> 00:02:59,430

Change the color to white and stretch it out a little bit.



52

00:02:59,430 --> 00:03:00,630

Very cool.



53

00:03:00,630 --> 00:03:06,420

Now what I'm going to do is I'm going to go ahead and just type goal in all caps and I'm going to go



54

00:03:06,420 --> 00:03:08,150

ahead and center this as well.



55

00:03:08,400 --> 00:03:09,930

Then I'm going to duplicate it.



56

00:03:09,930 --> 00:03:16,770

So click on the label press command d to duplicate and I'm going to change this from regular to bold



57

00:03:17,340 --> 00:03:18,750

just like that.



58

00:03:18,780 --> 00:03:22,920

Now I'm going to make this save post and these together just look kind of cool.



59

00:03:22,920 --> 00:03:25,700

It's a cool combo goalpost and.



60

00:03:25,790 --> 00:03:26,150

Yeah.



61

00:03:26,160 --> 00:03:27,630

So that's the that's the title.



62

00:03:27,630 --> 00:03:29,460

But these are not going to stay in place.



63

00:03:29,640 --> 00:03:33,390

And we actually want them to stay right next to each other so we may as well just throw them into a



64

00:03:33,390 --> 00:03:34,190

stack view.



65

00:03:34,380 --> 00:03:39,990

So with both selected go ahead and click the stack button down at the bottom and there you go.



66

00:03:39,990 --> 00:03:42,690

Look at that it looks like one label but it's not.



67

00:03:42,750 --> 00:03:46,110

So with that in mind go ahead and click on the stack view.



68

00:03:46,350 --> 00:03:53,940

And we're going to just drag it to center it and we're going to move it so that it's a little bit above



69

00:03:54,030 --> 00:03:56,190

the or a little bit below the midline.



70

00:03:56,190 --> 00:04:00,600

We don't want it to be exactly in the middle because then it might appear too close and if you click



71

00:04:00,600 --> 00:04:03,920

on the safe area you can see where the top bar goes.



72

00:04:04,050 --> 00:04:08,630

And as it is right now that's pretty much in the middle of the safe area that we can see on the green



73

00:04:08,640 --> 00:04:10,160

you I've used That's great.



74

00:04:10,230 --> 00:04:11,720

Let's go ahead and pin it in place.



75

00:04:11,850 --> 00:04:17,610

So select the stack you click the pin button and we're going to go ahead and pin this eight from the



76

00:04:17,610 --> 00:04:20,420

bottom and add one constraint.



77

00:04:20,430 --> 00:04:25,200

Now we're going to go ahead and select the alignment button and we're going to pin it horizontally in



78

00:04:25,200 --> 00:04:27,740

the container and we're going to add one constraint.



79

00:04:27,780 --> 00:04:30,180

So now we'll stay there perfectly.



80

00:04:30,180 --> 00:04:35,850

Next we're going to go ahead and add a UI button and this is the button you'll press to open the next



81

00:04:35,850 --> 00:04:37,160

screen to create a goal.



82

00:04:37,160 --> 00:04:43,410

So go ahead and search for a UI button and drag one onto the view.



83

00:04:43,410 --> 00:04:44,610

Very cool.



84

00:04:44,610 --> 00:04:50,640

Now we're going to get rid of the label like so by pressing delete and then enter to to lock it in place.



85

00:04:50,760 --> 00:04:55,190

And now we need an image but we have not yet imported our assets.



86

00:04:55,200 --> 00:05:01,320

And so to do that I'm going to go ahead and I'm going to pull open an asset folder that you can download



87

00:05:01,320 --> 00:05:05,910

if you use the airdropped feature of the envelopes app you can download the assets and when you open



88

00:05:05,910 --> 00:05:11,820

them you will be able to drag in these elements into your assets folder.



89

00:05:11,820 --> 00:05:19,110

So open the assets the assets folder and drag in these elements and you'll see there are three different



90

00:05:19,350 --> 00:05:21,450

images that we can use now.



91

00:05:21,450 --> 00:05:21,830

Cool.



92

00:05:21,840 --> 00:05:23,670

So let's go Adam.



93

00:05:23,670 --> 00:05:25,310

Click on main story board.



94

00:05:25,320 --> 00:05:29,390

And for this button we're going to change the image to add Gore.



95

00:05:29,720 --> 00:05:30,340

OK.



96

00:05:30,420 --> 00:05:31,950

And you'll notice it's a little squishy.



97

00:05:31,950 --> 00:05:35,340

If I move it and stretch it it kind of modifies the size.



98

00:05:35,340 --> 00:05:37,910

So we need to lock this to a fixed width and height.



99

00:05:37,950 --> 00:05:43,680

And we also need to center it with the goalpost button so to do that select the button click the pin



100

00:05:43,680 --> 00:05:52,140

button and we're going to pin this let's see how about 15 from the right and instead of pinning it to



101

00:05:52,140 --> 00:05:57,890

the bottom we're going to actually pin the center of this to the center of the stack view.



102

00:05:57,900 --> 00:06:04,770

But for now let's go ahead and give it a fixed width and height of 30 and 30 add three constraints and



103

00:06:04,800 --> 00:06:07,410

you'll see actually it does kind of squishes.



104

00:06:07,410 --> 00:06:09,430

So that's not what we want.



105

00:06:09,510 --> 00:06:14,820

Let's go ahead let's undo the with constraint and that should stretch out to the appropriate aspect



106

00:06:14,820 --> 00:06:16,780

ratio that looks good.



107

00:06:17,070 --> 00:06:23,620

So now what we're going to do is we're going to select both the stack and the button by holding Shift.



108

00:06:23,700 --> 00:06:30,780

And now in the alignment menu we can select vertical centers and we'll give them the same vertical center.



109

00:06:30,870 --> 00:06:33,810

Add one constraint and now it's going to stay in its place.



110

00:06:33,810 --> 00:06:35,220

Pretty cool.



111

00:06:35,280 --> 00:06:41,280

It's looking a little bit low so I think I'm actually going to move this stack you up a little ways



112

00:06:41,280 --> 00:06:42,750

like maybe 12.



113

00:06:43,020 --> 00:06:48,500

And I think that just gives it a little bit more space to look the way it's supposed to.



114

00:06:48,840 --> 00:06:52,810

But you know what if I zoom in that still look a little bit.



115

00:06:53,460 --> 00:06:54,160

Whoops.



116

00:06:55,570 --> 00:06:59,720

Because we can't zoom in that way it still looks a little bit squished to me.



117

00:06:59,770 --> 00:07:02,510

So let's let's get rid of the height constraint as well.



118

00:07:02,620 --> 00:07:04,620

And you know what I think actually it's fine.



119

00:07:04,630 --> 00:07:09,580

I think when we dragged it in for some reason it was getting squished it looks better now looks more



120

00:07:09,580 --> 00:07:10,840

like a perfect circle.



121

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

All right.



122

00:07:11,800 --> 00:07:13,550

Supercool So that is in place now.



123

00:07:13,570 --> 00:07:14,110

That's great.



124

00:07:14,110 --> 00:07:15,740

It's going to stay where it is.



125

00:07:15,880 --> 00:07:24,970

And now what we need to do is we basically need to create a label here that kind of is like a welcome



126

00:07:24,970 --> 00:07:27,030

to the app type message.



127

00:07:27,160 --> 00:07:32,200

And then we need to add a table view as well so let's go ahead and search for a UI label.



128

00:07:32,200 --> 00:07:33,540

Let's drag it on.



129

00:07:33,970 --> 00:07:37,210

And of course you know me we're going to make this Avenir next.



130

00:07:37,240 --> 00:07:39,370

My favorite font.



131

00:07:39,490 --> 00:07:40,690

Here we go Abbondio next.



132

00:07:40,690 --> 00:07:46,310

And I'm going to make this size 24 it can afford to be a little bit bigger.



133

00:07:46,330 --> 00:07:48,160

And now let's go ahead and type.



134

00:07:48,160 --> 00:07:51,060

Welcome to goalpost.



135

00:07:51,570 --> 00:07:51,990

OK.



136

00:07:52,060 --> 00:07:57,580

Just a little welcome message for our users and this is going to be displayed when a user first opens



137

00:07:57,580 --> 00:08:02,300

the app and it will be shown every time they have no goals set.



138

00:08:02,320 --> 00:08:07,730

So we're going to go ahead and just position this right about here and we're going to center that font.



139

00:08:07,810 --> 00:08:10,890

Next we're going to go ahead and give them some directions.



140

00:08:10,990 --> 00:08:17,170

So let's duplicate that label by pressing command D and we're going to lower this down to maybe size



141

00:08:17,230 --> 00:08:24,370

16 K and we're going to change this to say to begin create a goal.



142

00:08:24,520 --> 00:08:28,630

And that's just going to kind of give them the give them some directions tell them what to do and guide



143

00:08:28,630 --> 00:08:29,070

them.



144

00:08:29,080 --> 00:08:35,020

So go ahead and select both of these and just like the other text UI labels we're going to go ahead



145

00:08:35,050 --> 00:08:38,710

and put them in the stack view that keeps them in the same area.



146

00:08:38,710 --> 00:08:42,300

Keeps them nice and centered and beautiful which is what we want.



147

00:08:42,310 --> 00:08:48,460

So now let's go ahead and let's select the alignment button let's make sure that this stays horizontally



148

00:08:48,520 --> 00:08:51,480

in the container and add one constraint.



149

00:08:51,490 --> 00:08:58,110

Now we're going to go ahead and we're going to pin this may be 75 from the top and press enter.



150

00:08:58,120 --> 00:09:01,970

Now you'll see that it will stay right there in its place and that's exactly what we want.



151

00:09:02,050 --> 00:09:02,960

Really cool.



152

00:09:03,160 --> 00:09:07,460

So now what we need to do is add on AUI table view.



153

00:09:07,620 --> 00:09:12,980

OK let's do the search for UI table view and drag one on.



154

00:09:13,220 --> 00:09:13,520

OK.



155

00:09:13,540 --> 00:09:15,130

Really really cool.



156

00:09:15,130 --> 00:09:21,400

Now the thing that we need to think about is you can see this is dropping into our background view.



157

00:09:21,610 --> 00:09:28,390

OK that's fine but we need to remember this needs to actually go on top of our label here because if



158

00:09:28,390 --> 00:09:33,160

there are goals that have been saved this table view should be shown.



159

00:09:33,190 --> 00:09:39,260

So we're actually going to need to make sure that this is on top of the label here when we're done.



160

00:09:39,280 --> 00:09:41,920

So we're just going to drag this to fill the screen.



161

00:09:42,010 --> 00:09:44,740

And as you can see it definitely is covering it.



162

00:09:44,740 --> 00:09:45,450

So that's what we want.



163

00:09:45,450 --> 00:09:46,480

That's great.



164

00:09:46,480 --> 00:09:48,490

Now let's go ahead and pin it in place.



165

00:09:48,490 --> 00:09:53,160

So let's pinnate zero from the left to zero from the bottom zero from the right and we're going to pinnate



166

00:09:53,170 --> 00:09:54,150

zero from the top.



167

00:09:54,160 --> 00:09:59,520

But you're going to need to change that eight to zero so that it pulls up right next to the green you



168

00:09:59,650 --> 00:09:59,910

view.



169

00:09:59,920 --> 00:10:01,050

Nice and snug.



170

00:10:01,150 --> 00:10:04,090

So tap add four constraints and there you go.



171

00:10:04,270 --> 00:10:09,070

Now we can go ahead and drag on a table view cell just like we want and we can drop it into our table



172

00:10:09,070 --> 00:10:09,990

view.



173

00:10:10,090 --> 00:10:10,670

Awesome.



174

00:10:10,720 --> 00:10:12,450

Super duper cool.



175

00:10:12,520 --> 00:10:21,950

This is a really skinny little cell Let's go ahead and drag it down to maybe looks like 60 maybe 70.



176

00:10:21,970 --> 00:10:26,650

Let's let's set the row height to 70 and then so that it matches.



177

00:10:26,650 --> 00:10:32,350

We need to select the table view as well like so and then go into the row height and type 70 just to



178

00:10:32,350 --> 00:10:37,440

make sure that it stays with that 70 height for our table cell.



179

00:10:37,620 --> 00:10:41,860

And we're going to go ahead and build out this table for you cell later but for now we're going to go



180

00:10:41,860 --> 00:10:44,110

ahead and just go ahead.



181

00:10:44,110 --> 00:10:50,950

But for now we're just going to go ahead and hide this table view by default because we want our view



182

00:10:50,950 --> 00:10:58,060

back here to show if there is no goal set but for the most part we're going to be wanting to see this.



183

00:10:58,090 --> 00:11:04,690

So we're going to set it as hidden by default and show it if there definitely are goals saved.



184

00:11:04,750 --> 00:11:07,960

So to do this go ahead and click on the attributes and.



185

00:11:07,990 --> 00:11:10,400

Scroll down and select hidden.



186

00:11:10,690 --> 00:11:11,320

OK.



187

00:11:11,620 --> 00:11:16,800

Now let's go ahead and let's set up the outlets and actions so that we can interface with this in our



188

00:11:16,800 --> 00:11:18,190

view control or file.



189

00:11:18,250 --> 00:11:24,160

So to do that select the assistant editor and you'll see goals Visi shows up right away.



190

00:11:24,280 --> 00:11:29,560

Get rid of did receive memory warning and for now let's go ahead and let's think what we need to do.



191

00:11:29,560 --> 00:11:31,800

We need to create an outlet for Table View.



192

00:11:31,870 --> 00:11:32,940

Let's do that.



193

00:11:33,280 --> 00:11:36,270

Just call it Table View and click connect.



194

00:11:36,270 --> 00:11:36,640

All right.



195

00:11:36,640 --> 00:11:38,140

Very cool.



196

00:11:38,140 --> 00:11:42,770

We need to modify the button.



197

00:11:42,770 --> 00:11:47,590

Well we don't need to modify but we need to do something when we press it so let's right click and let's



198

00:11:47,590 --> 00:11:52,920

create an IB action called add gold button was pressed.



199

00:11:53,050 --> 00:11:54,500

And that's great.



200

00:11:54,510 --> 00:11:59,790

Now inside of this function we can call whatever we want and the button will do it and you know what



201

00:11:59,790 --> 00:12:00,830

for now.



202

00:12:00,900 --> 00:12:03,690

I think this is actually all we're going to need.



203

00:12:03,690 --> 00:12:08,910

We need an action from our button and we need an outlet to our table views that we can properly interface



204

00:12:08,910 --> 00:12:11,650

with it and display all of our goals that we've saved.



205

00:12:11,730 --> 00:12:14,070

We've not done that yet but we will.



206

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

Guys amazing work.



207

00:12:15,360 --> 00:12:20,100

Our first view controller is done and we can now appropriately interface with it.



208

00:12:20,100 --> 00:12:21,420

So that's amazing.



209

00:12:21,420 --> 00:12:29,690

But we should test it to make sure it works so I'm just going to go ahead and print button was pressed.



210

00:12:30,000 --> 00:12:30,570

OK.



211

00:12:30,780 --> 00:12:31,830

Just to make sure it works.



212

00:12:31,860 --> 00:12:33,520

And now let's go ahead and build it.



213

00:12:33,540 --> 00:12:34,680

So build and run.



214

00:12:34,800 --> 00:12:38,910

Let's make sure that our interface looks good the way it's supposed to.



215

00:12:39,300 --> 00:12:44,330

And then after it's done being built we're going to go ahead and move on to the next video but let's



216

00:12:44,340 --> 00:12:46,000

make sure everything's good to go first.



217

00:12:46,020 --> 00:12:51,110

It's really good that we build this along the way just to check and verify that everything is good.



218

00:12:51,510 --> 00:12:57,330

So here we go it's opening up and let's see how we did.



219

00:12:57,590 --> 00:12:58,780

All right look at that.



220

00:12:58,800 --> 00:12:59,460

That looks great.



221

00:12:59,460 --> 00:13:03,450

So our table to use hidden by default like it should be our labels are centered.



222

00:13:03,450 --> 00:13:04,660

Everything looks good.



223

00:13:04,860 --> 00:13:09,680

And when I click on my button button was pressed OK our action is firing properly.



224

00:13:09,690 --> 00:13:11,070

Very very cool.



225

00:13:11,070 --> 00:13:12,440

Amazing work guys.



226

00:13:12,540 --> 00:13:19,230

In the next video we're going to build out our our goal cell in the next video we're going to build



227

00:13:19,230 --> 00:13:20,870

out our goal cell.



228

00:13:20,880 --> 00:13:25,040

We're going to write the subclass and we're also going to set up the outlets and actions for that goal



229

00:13:25,040 --> 00:13:28,770

selves so that we can properly interface with it when the time is right.



230

00:13:28,770 --> 00:13:31,360

Very Great job guys and I'll see in the next video.