Everybody this is Caleb with Dev slopestyle and in this video we're going to write a function to one
remove the spinner to add a progress label three remove a progress label and four we're going to add
a UI collection view programmatically to our pull up view.
It's going to be super cool.
Let's pull open that X code project and let's get started.
So in the last video we wrote a function that adds our spinner.
Now we need to write a function to remove it.
So to do that it's super easy.
Go ahead and just type phunk moves spinner.
That'll be the name of our function.
All right.
And what we're going to do is we're going to check to see if the spinner is not equal to nil meaning
if there is a spinner call spinner remove from Super view.
That's it.
If there's a spinner that function will remove it.
Now like I showed you in the last video when we pull open the simulator here if we double click we added
like 50 spinners all at once.
So I think as soon as this view shows if there's a spinner it should be removed.
And then we should call add spinner after that.
So right here in our drop pin function we remove the pins so we should also remove the spinner.
Remembering that that only is going to remove the spinner if there is a spinner there.
OK.
So we'll we'll go back and check that in a second.
But for now let's add that UI label.
Remember it's called progress label so let's write the functions to add it and then remove it.
So go ahead and type phunk add progress label.
And in this function what we're going to do is we're going to instantiate progress label.
If you remember from the last video up here we created a variable to hold this but we have not yet instantiated
it.
So here we're going to do that.
Progress label equals UI label.
OK.
And we can just give it an empty instantiation because we're going to set it up exactly how we want
it.
So let's give it a frame so that we know how big we want it.
Progress label frame and you know what let me put that more on the center that's easier to see for you.
The frame needs to be of type C-g rect.
And so if we give a parentheses here we're going to choose the one with an x y width and height value.
Now for the X we want it to be in the center of the frame just like before.
So let's go ahead and type screen size width divided by two.
But remember that only is going to put the start of the label here.
The rest of it will extend past the middle.
So we actually need to subtract 50 percent of the label to pull it to be exactly in the center.
Now we do not yet know what that will be.
So let's go ahead and let's give it a with let's say maybe 200 points wide in order to get to the middle.
We're going to encapsulate this in parentheses and then subtract 100 because that is half of the width
k we have programmatically set a value so it's OK for us to use a programmatic value like that k the
y value.
We don't want it to quite be exactly in the center because remember our spinner is at 150.
If we put 175 that will put it 25 below the spinner.
Now you might think well it's a bigger number so why would it not be above it the way it works is actually
when you're looking at a view the very tippy top is zero and the further down you go the numbers go
up.
So 175 is going to be 25 points below 150.
So that's perfect.
The height of course we can set it to just be 40 or so that'll fit just fine.
So now we have a frame we've told it exactly where we want it to go.
Now let's give it a font.
So let's go ahead and type progress label dot font and that's going to be equal to UI font.
And there's an option here to give it a name and a size that's exactly what we're going to do.
We're going to set it to be of type wups Avenir.
Next my favorite font and size 18 now a font is not much good if it doesn't have a color so you can
see what color it is.
So go ahead and type progress label dot color text color actually.
And we're going to go ahead and set that to be a color literal and we are going to make it yet dark
grey will be cool.
That's perfect.
And now we want our label to also be centered k not left aligned or right aligned.
So when anti-progress label dot text alignment and there is actually an ina of an S text alignment just
to center.
Easy peasy.
All right.
Next up we're going to go ahead and add this to our pull up view as a sub view.
Make sure you don't add it to the constraint because a constraint cannot have a sub view case so yeah
that's it.
Add the label and unwrap it because it now has been properly instantiated so it's safe to do that.
And that's that.
We've added a progress label.
Let's go back down to drop pin and let's add that progress label here.
But the same problem as before will happen we'll have 100 labels if we open the menu 100 times.
So let's write a function to remove the progress label and it's basically the same exact thing as remove
spinner so phunk remove progress label and in here we're going to check to see if the progress label
is not nil if progress label is not equal to nil.
We're going to go ahead and call a progress label.
Remove from Super view.
Easy peasy.
And we're going to call that as soon as we open the menu and drop a pin.
Remove progress label.
So if there is one it will be removed and then a new one will be added.
This is just a safe way to ensure that we don't have like 100 labels because nobody needs 100 labels.
All right let's go ahead and build and run this.
And then after that we're going to add our UI collection view which would be super cool.
Really excited to get that working and showing images soon.
So double tap.
Oh you know what it would be helpful if we actually set some text for Labor because right now we can't
see it but we can at least check to see if our spinner is getting removed.
OK so if I click.
Looks like there's a little stutter there that's where it's being removed and added good so it looks
like there is only one no matter how many times I click.
Very cool.
Let's hide it lips and then open it again good.
Yes so there's only one that's perfect.
We're not going to leave this here but let's go ahead and just set some text.
Text equals maybe 12 out of 40 photos.
Load it.
OK let's go ahead and build and run this.
I just want to see if the label is in the right position if it's in the right spot.
So I added some text for now.
All right.
Awesome.
That looks great but it seems like perhaps our label is cutting off some of the words and so that's
not what we want.
Let's let's maybe give it a little bit bigger with maybe 240 and that means we have to change this number
to 120 which is half.
Let's try to again build and run.
And a lot of app building is doing this kind of trouble shooting and fixing these little teeny tiny
issues.
OK.
There we go.
Awesome.
12 out of 40 photos loaded.
And we're going to set this later so that it can update as soon as the photos are going in.
Very cool.
Get rid of that which was our setting of text.
We don't need it.
And now what we're going to do is add a UI collection view programmatically.
And then we're going to add it as a sub view of pull view.
OK.
So scroll up to the top and beneath this right here beneath progress label we're going to create a collection
view.
So go ahead and type.
Var collection view of Type II collection view and give a little question mark there because we are
not yet instantiating that.
Now something you need to know when you do this programmatically you need to give a programmatic collection
view flow layout as well and I'll show you what that is in just a minute.
So let's do that by just typing var flow layout equals UI collection.
View flow layout we can instantiate it because we're not actually going to use it.
It's empty.
We're not going to set any special features of it or anything.
But in order to create a collection view programmatically you need one.
So we're going to use just flow layout from here.
OK that's totally fine.
So now we need to set up all of the features of the collection view we need to register a cell for it
to use.
And we also are going to need to add it as a sub view of our pull up view.
So let's do that by instantiating it type collection view equals UI collection view.
And when you put a parentheses you can see that it requires a collection view layout.
Now we can give it just a frame but you have to set the flow layout later.
So let's just go ahead and call the one that we can pass in here.
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
layout.
We're just going to pass in flow layout.
Again we're not really going to use it but that's fine.
So now that it is instantiated we need to register a cell for it to use.
So go ahead and type collection view that register cell class and we don't yet have a cell class for
it to use so we need to create one in the view folder right click new file Cocco touch class and this
is going to be of tight UI collection.
View cell.
We'll just call this photocell because it will be used for displaying photos.
Ok tap next tap create.
And great.
Now we have a photocell and in order to use this photocell we're actually going to need to override
whip's the initializer of the frame.
Then we need to call super dot in it and pass it the frame from the initializer.
OK.
Now it's also going to ask us to use the required in it.
And we're going to basically just call fatal error with message and the message is wups init coder has
not been implemented.
OK so these are what are required to use a custom UI collection to sell.
And we're going to use this now.
So go back to map the sea and the cell class we're going to use photo whoopsies photo cell and in order
to use this as a class we need to call photo cell not self and that lets us use it as a class object.
Now the identifier we're just going to use photocell as a string and this is going to allow us to dequeue
this cell later in our collection view.
So now we have a cell register that we can use.
And you know what interface builder handles lots of this for you already.
But I wanted to show you how to do it programmatically.
So next up we need to actually give it a delegate.
Just like always that's going to be self and collection view data source just like using a collection
view any other time is also going to be self.
Ok but you'll notice if I try to build this it's going to give me some issues because we have not yet
conformed to the proper delegates so scroll down and at the very bottom we're going to write an extension.
Let's get some more space here.
Right in the center.
And let's go call extension Matt the C a collection view.
Delegate comma UI collection view data source.
OK.
And inside of this there are three required functions that you probably know if you use collection to
use it all cell for item index path.
OK that's one I like to put that at the bottom number of sections in collection view and number of items
in section.
OK.
There's three number of sections in collection view.
Number of items in Section and sell for item at index path K number of sections we can just return one
case we just need one section number of items in section later.
This will be coming from a number of items.
Number of items in array will use an array later but for now we're just going return for just to give
it a number and sell for item and index path.
We're just going to return a collection view cell.
OK a blank one.
Very cool.
So now we have properly inherited or sorry conformed to the proper delegates and now if I go back up
here you'll notice that error is gone.
The show is pink meaning that it is properly set.
And last but not least we need to set this as a sub view of our pull up view.
So go ahead and type pull up view add sub view and of course collection view.
Unwrap it because we have properly set it up and instantiated it and you know what.
Right now the default background color is white.
So I think I'm going to set a custom color so we can tell if it actually showed up properly if it's
there.
So go ahead and type wups collection view background color and let's give it a color literal How about
green and we'll remove that as soon as we can tell that it's in the proper place.
But we should have a collection view.
Now one thing I want to think about though is when I add the spinner and the progress label I add that
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
pulled up view because the collection view is covering up all of those.
I want these to be on top of the collection view.
So instead of making these a sub view of pull up view I'm going to make them a sub view of the collection
view.
Now the label is the same as the spinner in that it needs to be on the collection view.
So change that collection view.
And now when we build and run we should have some errors of course.
What is the deal.
We didn't put a question mark there showing that it is optional.
That's just the way that ex-coach forces us to be safe.
Boring anyway.
No it's actually a really good thing.
So let's go see if the collection view shows up.
It should be green.
And of course look at that.
We get an error the cell returned from collection view sell for item at index path does not have a reuse
identifier cells must be retrieved by calling dequeue reusable cell identifier.
OK.
So there is a problem we forgot to do something we just sent a blank collection view cell.
We need to actually do something different.
Let's go ahead and create a cell by typing let cell equals collection view.
Dequeue reusable cell with identifier which of course if you remember was photo cell for index path.
OK.
And we're going to cast that as a photocell.
OK.
Now we don't need to initialize anything yet but we do need to return that cell.
Let's see.
Oh and we're going to force on wrap it because it's optionally cast as a photocell.
Go ahead and build and run.
And now when we build this it should properly be able to utilize the cell that it created with the identifier.
That's why it's there let's try it by double click beautiful.
We get a collection view remember we set the background to be green.
The text is not showing up because we removed the text property but that's fine.
We know it's there.
So it looks like this is working.
We have properly added a collection view a label a spinner and we've also set when they should be removed
and added at will that's amazing.
Super super good.
In the next video we're going to start using the flicker API.
We're going to get our API key.
We're going to go ahead and see how the API you are Ellas formatted and we're going to create a swift
file that will enable us to properly download photos from the u r l.
Very very cool.
So awesome job with this video.
And we'll head over to the next video now and let's get started on accessing the flicker API.