1

00:00:08,020 --> 00:00:10,570

Everybody this is Caleb with Deb's slopes.



2

00:00:10,690 --> 00:00:17,140

And in this video we're going to read a function to one remove the spinner to add a progress label three



3

00:00:17,200 --> 00:00:24,070

remove a progress label and four we're going to add a UI collection view programmatically to our pull



4

00:00:24,070 --> 00:00:25,020

up view.



5

00:00:25,170 --> 00:00:26,450

It's going to be super cool.



6

00:00:26,500 --> 00:00:30,600

Let's pull open that X code project and let's get started.



7

00:00:30,610 --> 00:00:35,070

So in the last video we wrote a function that adds our spinner.



8

00:00:35,140 --> 00:00:37,310

Now we need to write a function to remove it.



9

00:00:37,330 --> 00:00:39,190

So to do that it's super easy.



10

00:00:39,190 --> 00:00:44,730

Go ahead and just type phunk move spinner that will be the name of our function.



11

00:00:44,740 --> 00:00:45,320

All right.



12

00:00:45,430 --> 00:00:51,910

And what we're going to do is we're going to check to see if the spinner is not equal to nil meaning



13

00:00:51,910 --> 00:00:57,280

if there is a spinner call spinner remove from Super view.



14

00:00:57,760 --> 00:00:58,450

That's it.



15

00:00:58,600 --> 00:01:01,380

If there's a spinner that function will remove it.



16

00:01:01,440 --> 00:01:08,890

Now like I showed you in the last video when we pull open the simulator here if we double click we added



17

00:01:08,890 --> 00:01:10,900

like 50 spinners all at once.



18

00:01:10,900 --> 00:01:16,090

So I think as soon as this view shows if there's a spinner should be removed and then we should call



19

00:01:16,090 --> 00:01:17,380

add spinner after that.



20

00:01:17,380 --> 00:01:24,580

So right here in our drop pin function we remove the pins so we should also remove the spinner remembering



21

00:01:24,600 --> 00:01:26,610

that that only is going to remove the spinner.



22

00:01:26,610 --> 00:01:28,180

If there is a spinner there.



23

00:01:28,410 --> 00:01:28,920

OK.



24

00:01:29,110 --> 00:01:31,230

So we'll we'll go back and check that in a second.



25

00:01:31,240 --> 00:01:34,150

But for now let's add that label.



26

00:01:34,300 --> 00:01:39,140

Remember it's called progress label so let's write the functions to add it and then remove it.



27

00:01:39,160 --> 00:01:43,760

So go ahead and type phunk add progress label.



28

00:01:44,380 --> 00:01:49,000

And in this function what we're going to do is we're going to instantiate progress label.



29

00:01:49,000 --> 00:01:55,210

If you remember from the last video up here we created a variable to hold this but we have not yet instantiated



30

00:01:55,210 --> 00:01:55,760

it.



31

00:01:55,780 --> 00:01:57,410

So here we're going to do that.



32

00:01:57,490 --> 00:01:59,760

Progress label equals UI label.



33

00:01:59,940 --> 00:02:00,470

OK.



34

00:02:00,700 --> 00:02:05,590

And we can just give it an empty instantiation because we're going to set it up exactly how we want



35

00:02:05,590 --> 00:02:05,740

it.



36

00:02:05,740 --> 00:02:09,530

So let's give it a frame so that we know how big we want it.



37

00:02:09,580 --> 00:02:16,270

Progress label frame and you know what let me put that more in the center that's easier to see for you.



38

00:02:16,510 --> 00:02:19,320

The frame needs to be of type Siggi rect.



39

00:02:19,480 --> 00:02:24,820

And so if we give a parentheses here we're going to choose the one with an x y width and height value.



40

00:02:25,120 --> 00:02:30,010

Now for the X we want it to be in the center of the frame just like before.



41

00:02:30,010 --> 00:02:33,980

So let's go ahead and type screen size dot with divided by two.



42

00:02:34,090 --> 00:02:38,230

But remember that only is going to put the start of the label here.



43

00:02:38,260 --> 00:02:40,510

The rest of it looks then past the middle.



44

00:02:40,510 --> 00:02:46,150

So we actually need to subtract 50 percent of the label to pull it to be exactly in the center.



45

00:02:46,150 --> 00:02:48,860

Now we do not yet know what that will be.



46

00:02:48,880 --> 00:02:50,400

So let's go ahead and let's give it a whip.



47

00:02:50,440 --> 00:02:55,640

Let's say maybe 200 points too wide in order to get to the middle.



48

00:02:55,660 --> 00:03:01,100

We're going to encapsulate this in parentheses and then subtract 100 because that is half of the with



49

00:03:01,190 --> 00:03:07,180

k we have programmatically set of value so it's OK for us to use a programmatic value like that k the



50

00:03:07,180 --> 00:03:08,590

y value.



51

00:03:08,710 --> 00:03:15,000

We don't want it to quite be exactly in the center because remember our spinner is at one hundred fifty.



52

00:03:15,160 --> 00:03:20,290

If we put one hundred seventy five that will put it 25 below the spinner.



53

00:03:20,290 --> 00:03:25,300

Now you might think well it's a bigger number so why would it not be above it the way it works is actually



54

00:03:25,510 --> 00:03:31,060

when you're looking at a view the very tippy top is 0 and the further down you go the numbers go up.



55

00:03:31,060 --> 00:03:36,700

So 175 is going to be 25 points below 150.



56

00:03:36,850 --> 00:03:38,500

So that's perfect the height.



57

00:03:38,500 --> 00:03:43,740

Of course we can set it to just be 40 or so that'll fit just fine.



58

00:03:43,990 --> 00:03:47,230

So now we have a frame we've told it exactly where we want it to go.



59

00:03:47,230 --> 00:03:48,560

Now let's give it a font.



60

00:03:48,700 --> 00:03:54,370

So let's go ahead and type progress label dot font and that's going to be equal to UI font.



61

00:03:54,730 --> 00:03:57,360

And there's an option here to give it a name and a size.



62

00:03:57,370 --> 00:03:59,040

That's exactly what we're going to do.



63

00:03:59,290 --> 00:04:03,170

We're going to set it to be of type wups Avenir.



64

00:04:03,310 --> 00:04:10,220

Next my favorite font and size 18 now a font is not much good if it doesn't have a color.



65

00:04:10,240 --> 00:04:11,740

You can see what color it is.



66

00:04:11,740 --> 00:04:16,730

So go ahead and type progress label dot color text color actually.



67

00:04:16,870 --> 00:04:19,780

And we're going to go ahead and set that to be a color literal.



68

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

And we are going to make it yet dark grey will be cool.



69

00:04:25,270 --> 00:04:26,420

That's perfect.



70

00:04:26,440 --> 00:04:31,960

And now we want our label to also be centered k not left aligned or right aligned.



71

00:04:31,960 --> 00:04:38,830

So had anti-progress label dot text alignment and there there's actually an ina of an S text alignment



72

00:04:38,950 --> 00:04:39,960

just to center.



73

00:04:40,030 --> 00:04:41,260

Easy peasy.



74

00:04:41,260 --> 00:04:41,500

All right.



75

00:04:41,500 --> 00:04:46,600

Next up we're going to go ahead and add this to our pull up view as a sub view.



76

00:04:47,320 --> 00:04:50,840

Make sure you don't add it to the constraint because a constraint cannot have a sub view.



77

00:04:51,250 --> 00:04:52,510

OK so yeah that's it.



78

00:04:52,540 --> 00:04:59,380

Add the label and unwrap it because it now has been properly instantiated so it's safe to do that and



79

00:04:59,380 --> 00:05:00,120

that's that.



80

00:05:00,160 --> 00:05:01,740

We've added a progress label.



81

00:05:02,020 --> 00:05:06,810

Let's go back down to drop pin and let's add that progress label here.



82

00:05:07,000 --> 00:05:12,740

But the same problem as before will happen we'll have 100 labels if we open the menu 100 times.



83

00:05:12,790 --> 00:05:18,130

So let's write a function to remove the progress label and it's basically the same exact thing as remove



84

00:05:18,140 --> 00:05:26,230

spinner so phunk remove progress label and in here we're going to check to see if the progress label



85

00:05:26,230 --> 00:05:30,940

is not nil if progress label is not equal to nil.



86

00:05:30,940 --> 00:05:35,100

We're going to go ahead and call progress label dot remove from Super view.



87

00:05:35,470 --> 00:05:36,880

Easy peasy.



88

00:05:36,880 --> 00:05:41,550

And we're going to call that as soon as we open the menu and drop a pin.



89

00:05:41,570 --> 00:05:43,190

Remove progress label.



90

00:05:43,190 --> 00:05:46,360

So if there is one it will be removed and then a new one will be added.



91

00:05:46,360 --> 00:05:51,760

This is just a safe way to ensure that we don't have like 100 labels because nobody needs 100 labels.



92

00:05:51,820 --> 00:05:53,320

All right let's go ahead and build and run this.



93

00:05:53,320 --> 00:05:58,250

And then after that we're going to add our UI collection view which would be super cool.



94

00:05:58,540 --> 00:06:02,450

Really excited to get that working and showing images soon.



95

00:06:02,660 --> 00:06:04,190

So double tap.



96

00:06:04,810 --> 00:06:09,430

Oh you know what it would be helpful if we actually set some text for Labor because right now we can't



97

00:06:09,430 --> 00:06:15,440

see it but we can at least check to see if our spinner is getting removed.



98

00:06:15,970 --> 00:06:17,480

OK so if I click.



99

00:06:17,770 --> 00:06:22,720

Looks like there's a little stutter there that's where it's being removed and re-added good so it looks



100

00:06:22,720 --> 00:06:25,530

like there's only one no matter how many times I click.



101

00:06:25,540 --> 00:06:26,100

Very cool.



102

00:06:26,110 --> 00:06:30,790

Let's hide it loops and then open it again good.



103

00:06:30,810 --> 00:06:31,100

Yes.



104

00:06:31,130 --> 00:06:33,400

There's only one that's perfect.



105

00:06:33,530 --> 00:06:37,870

We're not going to leave this here but let's go ahead and just set some text.



106

00:06:38,180 --> 00:06:39,130

Whoops.



107

00:06:39,160 --> 00:06:44,440

Text equals maybe 12 out of 40 photos.



108

00:06:44,440 --> 00:06:45,400

Load it.



109

00:06:45,800 --> 00:06:47,480

OK let's go ahead and build and run this.



110

00:06:47,480 --> 00:06:51,500

I just want to see if the label is in the right position if it's in the right spot.



111

00:06:51,560 --> 00:06:53,560

So I added some text for now.



112

00:06:54,450 --> 00:06:54,750

All right.



113

00:06:54,750 --> 00:06:55,110

Awesome.



114

00:06:55,110 --> 00:07:05,220

That looks great but it seems like perhaps our label is cutting off some of the words and so that's



115

00:07:05,220 --> 00:07:06,270

not what we want.



116

00:07:06,270 --> 00:07:10,560

Let's let's maybe give it a little bit bigger with maybe 240.



117

00:07:10,710 --> 00:07:14,670

And that means we have to change this number to 120 which is half.



118

00:07:14,730 --> 00:07:16,980

Let's try it again build and run.



119

00:07:18,240 --> 00:07:22,890

And a lot of app building is doing this kind of trouble shooting and fixing these little teeny tiny



120

00:07:22,890 --> 00:07:23,200

issues.



121

00:07:23,220 --> 00:07:24,050

OK.



122

00:07:24,360 --> 00:07:24,810

There we go.



123

00:07:24,810 --> 00:07:25,560

Awesome.



124

00:07:25,650 --> 00:07:31,230

12 out of 40 photos loaded and we're going to set this later so that it can update as soon as the photos



125

00:07:31,230 --> 00:07:32,520

are going in.



126

00:07:32,520 --> 00:07:33,450

Very cool.



127

00:07:33,480 --> 00:07:36,510

Get rid of that which was our setting of text.



128

00:07:36,510 --> 00:07:37,410

We don't need it.



129

00:07:37,680 --> 00:07:41,880

And now what we're going to do is add a collection view programmatically.



130

00:07:41,880 --> 00:07:44,710

And then we're going to add it as a sub view of pull up.



131

00:07:44,850 --> 00:07:51,960

You so scroll up to the top and beneath this right here beneath progress label we're going to create



132

00:07:51,990 --> 00:07:52,980

a collection view.



133

00:07:52,980 --> 00:08:00,480

So go ahead and type var collection view of type II collection view and give a little question mark



134

00:08:00,480 --> 00:08:03,360

there because we are not yet instantiating that.



135

00:08:03,540 --> 00:08:06,650

Now something you need to know when you do this programmatically.



136

00:08:06,690 --> 00:08:14,010

You need to give a programmatic collection view flow layout as well and I'll show you what that is in



137

00:08:14,010 --> 00:08:14,480

just a minute.



138

00:08:14,480 --> 00:08:23,280

So let's do that by just typing var flow layout equals UI collection view flow layout.



139

00:08:23,280 --> 00:08:26,820

We can instantiate it because we're not actually going to use it.



140

00:08:27,000 --> 00:08:27,780

It's empty.



141

00:08:27,780 --> 00:08:32,700

We're not going to set any special features of it or anything but in order to create a collection view



142

00:08:32,700 --> 00:08:34,610

programmatically you need one.



143

00:08:34,620 --> 00:08:36,890

So we're going to use just flow out from here.



144

00:08:36,960 --> 00:08:38,590

OK that's totally fine.



145

00:08:39,030 --> 00:08:45,420

So now we need to set up all of the features of the collection view we need to register a cell for it



146

00:08:45,420 --> 00:08:46,160

to use.



147

00:08:46,320 --> 00:08:52,090

And we also are going to need to add it as a sub view of our pull up view.



148

00:08:52,110 --> 00:08:59,030

So let's do that by instantiating it type collection view equals UI collection view.



149

00:08:59,340 --> 00:09:04,860

And when you put a parentheses you can see that it requires a collection view layout.



150

00:09:04,860 --> 00:09:09,960

Now we can give it just a frame but you have to set the flow layout later so let's just go ahead and



151

00:09:09,960 --> 00:09:12,900

call the one that we can pass in here.



152

00:09:12,930 --> 00:09:19,650

Now the frame is going to be just the view bounds OK it's going to be as big as the view and the flow



153

00:09:19,650 --> 00:09:20,000

layout.



154

00:09:20,010 --> 00:09:22,000

We're just going to pass in flow layout.



155

00:09:22,110 --> 00:09:25,670

Again we're not really going to use it but that's fine.



156

00:09:25,770 --> 00:09:31,290

So now that it is instantiated we need to register a cell for it to use.



157

00:09:31,290 --> 00:09:39,400

So go ahead and type collection view dot register cell class and we don't yet have a cell class for



158

00:09:39,400 --> 00:09:46,300

it to use so we need to create one in the view folder right click new file Cocco touch class.



159

00:09:46,350 --> 00:09:49,170

And this is going to be of tight UI collection.



160

00:09:49,350 --> 00:09:51,210

View cell.



161

00:09:51,330 --> 00:09:55,650

We'll just call this photocell because it will be used for displaying photos.



162

00:09:56,030 --> 00:09:59,690

Ok tap next tap create.



163

00:09:59,990 --> 00:10:00,450

And great.



164

00:10:00,450 --> 00:10:06,270

Now we have a photocell and in order to use this photocell we're actually going to need to override



165

00:10:06,900 --> 00:10:09,430

whip's the initializer of the frame.



166

00:10:09,690 --> 00:10:15,660

Then we need to call super dot in it and pass it the frame from the initialiser.



167

00:10:15,660 --> 00:10:15,950

OK.



168

00:10:15,960 --> 00:10:22,410

Now it's also going to ask us to use the required in it and we're going to basically just call fatal



169

00:10:22,410 --> 00:10:34,680

error with message and the message is Whoops init coder has not been implemented.



170

00:10:35,590 --> 00:10:36,370

OK.



171

00:10:36,660 --> 00:10:41,370

So these are what are required to use a custom UI collection to sell.



172

00:10:41,550 --> 00:10:43,590

And we're going to use this now.



173

00:10:43,590 --> 00:10:51,870

So go back to map the sea and the cell class we're going to use photo whoopsies photo cell and in order



174

00:10:51,870 --> 00:10:58,730

to use this as a class we need to call photo cell self and that lets us use it as a class object.



175

00:10:58,740 --> 00:11:03,170

Now the identifier we're just going to use photocell as a string.



176

00:11:03,390 --> 00:11:08,730

And this is going to allow us to dequeue this cell later in our collection view case so now we have



177

00:11:08,730 --> 00:11:11,290

a cell register that we can use.



178

00:11:11,700 --> 00:11:14,860

And you know what interface builder handles lots of this for you already.



179

00:11:15,120 --> 00:11:18,030

But I wanted to show you how to do it programmatically.



180

00:11:18,030 --> 00:11:24,690

So next up we need to actually give it a delegate just like always that's going to be self and collection



181

00:11:24,690 --> 00:11:30,950

view data source just like using a collection view any other time is also going to be self ok.



182

00:11:31,350 --> 00:11:36,390

But you'll notice if I try to build this it's going to give me some issues because we have not yet conformed



183

00:11:36,390 --> 00:11:42,320

to the proper delegates so scroll down and at the very bottom we're going to write an extension.



184

00:11:42,330 --> 00:11:44,280

Let's get some more space here.



185

00:11:44,880 --> 00:11:46,120

Right in the center.



186

00:11:46,140 --> 00:11:52,840

And let's go call extension not the C collection view.



187

00:11:54,470 --> 00:12:00,530

Delegate comma UI collection view data source.



188

00:12:00,880 --> 00:12:01,960

OK.



189

00:12:02,150 --> 00:12:07,190

And inside of this there are three required functions OK that you probably know if you use collection



190

00:12:07,190 --> 00:12:10,150

to use it all cell for item index path.



191

00:12:10,150 --> 00:12:21,590

OK that's one I like to put that at the bottom number of sections in collection view and number of items



192

00:12:21,590 --> 00:12:22,460

in section.



193

00:12:22,770 --> 00:12:23,060

OK.



194

00:12:23,090 --> 00:12:25,860

There's three number of sections in collection view.



195

00:12:25,970 --> 00:12:33,840

Number of items in Section and cell for item at index path K number of sections we can just return one.



196

00:12:33,870 --> 00:12:37,880

We just need one section number of items in section later.



197

00:12:38,000 --> 00:12:42,350

This will be coming from a number of items.



198

00:12:42,650 --> 00:12:49,490

Number of items in array will use an array later but for now we're just going return for just to give



199

00:12:49,490 --> 00:12:52,220

it a number and sell for item and index path.



200

00:12:52,220 --> 00:12:56,010

We're just going to return a unique collection view cell.



201

00:12:56,110 --> 00:12:58,390

OK a blank one.



202

00:12:58,400 --> 00:12:58,850

Very cool.



203

00:12:58,850 --> 00:13:07,550

So now we have properly inherited or sorry I conformed to the proper delegates and now if I go back



204

00:13:07,550 --> 00:13:09,470

up here you'll notice that error is gone.



205

00:13:09,470 --> 00:13:16,910

The show is pink meaning that it is properly set and last but not least we need to set this as a sub



206

00:13:16,910 --> 00:13:18,380

view of our pull up view.



207

00:13:18,530 --> 00:13:25,790

So go ahead and type pull up view add sub view and of course collection view.



208

00:13:25,790 --> 00:13:30,560

Unwrap it because we have properly set it up and instantiated it and you know what.



209

00:13:30,590 --> 00:13:32,820

Right now the default background color is white.



210

00:13:32,870 --> 00:13:37,130

So I think I'm going to set a custom color so we can tell if it actually showed up properly if it's



211

00:13:37,130 --> 00:13:37,730

there.



212

00:13:37,880 --> 00:13:47,110

So go ahead and type wups collection view background color and let's give it a color literal How about



213

00:13:47,110 --> 00:13:52,080

green and we'll remove that as soon as we can tell that it's in the proper place.



214

00:13:52,120 --> 00:13:53,700

But we should have a collection view.



215

00:13:53,710 --> 00:14:00,370

Now one thing I want to think about though is when I add the spinner and the progress label I add that



216

00:14:00,370 --> 00:14:07,500

as a sub view of progress label you know what I don't want that to be the case I don't want it to be



217

00:14:07,500 --> 00:14:11,020

on pull up view because the collection view is covering up all of those.



218

00:14:11,080 --> 00:14:13,020

I want these to be on top of the collection view.



219

00:14:13,030 --> 00:14:18,970

So instead of making these a sub view of pull up view I'm going to make them a sub view of the collection



220

00:14:18,970 --> 00:14:19,690

view.



221

00:14:19,770 --> 00:14:24,720

Now the label is the same as the spinner in that it needs to be on the collection view.



222

00:14:24,730 --> 00:14:26,730

So change that collection view.



223

00:14:27,160 --> 00:14:31,570

And now when we build and run we should have some errors of course.



224

00:14:31,570 --> 00:14:33,350

What is the deal.



225

00:14:33,760 --> 00:14:37,410

We didn't put a question mark there showing that it is optional.



226

00:14:37,690 --> 00:14:40,500

That's just the way that ex-coach forces us to be safe.



227

00:14:40,500 --> 00:14:41,940

Boring anyway.



228

00:14:41,950 --> 00:14:43,420

No it's actually a really good thing.



229

00:14:43,450 --> 00:14:46,320

So let's go see if the collection view shows up.



230

00:14:46,330 --> 00:14:49,860

It should be green and of course look at that.



231

00:14:50,020 --> 00:14:57,190

We get an error the cell returned from collection view sell for item at index path does not have a reduced



232

00:14:57,200 --> 00:15:01,810

identifier cells must be retrieved by calling dequeue reusable cell identifier.



233

00:15:02,140 --> 00:15:02,640

OK.



234

00:15:02,780 --> 00:15:10,180

So there is a problem we forgot to do something we just sent a blank collection to sell.



235

00:15:10,220 --> 00:15:12,290

We need to actually do something different.



236

00:15:12,290 --> 00:15:17,930

Let's go ahead and create a cell by typing left cell equals collection view.



237

00:15:18,080 --> 00:15:26,900

Dequeue reusable cell with identifier which of course if you remember was photo cell for index path.



238

00:15:26,960 --> 00:15:27,740

OK.



239

00:15:28,220 --> 00:15:31,110

And we're going to cast that as a photo cell.



240

00:15:31,610 --> 00:15:32,170

OK.



241

00:15:32,480 --> 00:15:39,410

Now we don't need to initialize anything yet but we do need to return that cell.



242

00:15:39,440 --> 00:15:39,980

Let's see.



243

00:15:39,990 --> 00:15:44,360

Oh and we're going to force unwrap it because it's optionally cast as a photocell.



244

00:15:44,810 --> 00:15:46,190

Go ahead and build and run.



245

00:15:46,310 --> 00:15:52,220

And now when we build this it should properly be able to utilize the cell that it created with the identifier.



246

00:15:52,220 --> 00:15:57,230

That's why it's there let's try it by double click beautiful.



247

00:15:57,230 --> 00:15:58,550

We get a collection view.



248

00:15:58,550 --> 00:16:01,190

Remember we set the background to be green.



249

00:16:01,280 --> 00:16:05,870

The text is not showing up because we removed the text property but that's fine.



250

00:16:05,870 --> 00:16:06,900

We know it's there.



251

00:16:06,980 --> 00:16:08,660

So it looks like this is working.



252

00:16:08,750 --> 00:16:14,960

We have properly added a collection view a label a spinner and we've also set when they should be removed



253

00:16:14,960 --> 00:16:17,510

and added at will that's amazing.



254

00:16:17,510 --> 00:16:18,980

Super super good.



255

00:16:19,070 --> 00:16:22,110

In the next video we're going to start using the flicker API.



256

00:16:22,130 --> 00:16:23,770

We're going to get our API key.



257

00:16:23,810 --> 00:16:29,120

We're going to go ahead and see how the API you are Ellas formatted and we're going to create a swift



258

00:16:29,120 --> 00:16:34,000

file that will enable us to properly download photos from the u r l.



259

00:16:34,130 --> 00:16:35,450

Very very cool.



260

00:16:35,450 --> 00:16:37,160

So awesome job with this video.



261

00:16:37,310 --> 00:16:41,660

And we'll head over to the next video now and let's get started on accessing the flicker API.