Hey everybody what's going on this is Caleb with Deb's slopes dot com in this video.
We're going to go ahead and pass our images from our table view into our image presentation visi.
It's going to be super easy.
We're actually just using static data so it's not really dependent on any loading or any you know passing
from a certain subclass.
We're just going to actually load it directly from our image array using the index path.
So it's going to be really easy.
So go ahead and pull open your project here and actually let's go into master view controller.
Now we need to go ahead and select or call the delegate method call did select row at index path and
let me make some more space here for you guys.
This is the function that is called whenever a table view cell is selected.
So what we're going to do is we're actually just going to call a function in here that's going to animate
the selection back down.
We're going to actually de-select the row and you're probably wondering why are we doing that.
Mainly for us that x.
But the cool thing if you look here if we select a table view cell there's already a Segway called show
detail.
OK.
And that segue is going to go ahead and actually present this view controller upon our secondary navigation
controller.
So this is already linked up.
But what we're going to do is we're actually going to go ahead and copy this Segway ID ok and go back
into master view controller.
Now like I said when we select our row we're going to go ahead and actually call table view de-select
row and you're probably thinking this is done.
This is like the most you know non-intuitive thing you'll see why in a second.
So go ahead and pass in the index path and go hadn't set true for animated.
OK we'll talk about this in just a second.
But for now we need to go ahead and set up prepare for Segway.
All right.
Now let's go ahead and uncomment this we already had it commented before like so.
Whoops that's the wrong button.
Like so there we go.
And as you can see.
Show detail is already being used in the Segway identifier but where we're going to run into trouble
is here in our object and here in our control or because we don't have an object's array that was from
the initial project so delete that and go ahead and we're going to modify our view controller here.
So we have controller but it's not of type detailed controller anymore.
It's now of type image presentation Visi just like before our controller does not have a detail item
but it does have an image.
OK.
Now the cool thing is we can get the index path because we're calling table view dot index path for
selected row.
That will give us the index path of whatever cell we've tapped and we set that here the way we're going
to get our image is the same exact way that we are getting our names and our colors.
We're going to call that particular array and pull out the index path that row.
So for images we're going to call image array.
Then like I said we're going to call index path dot row and that'll pull out the exact image for the
particular cell we selected.
Because remember in this everything matches up the camera image goes with the camera word and the red
color everything is lined up the way it should be.
And in a good app you would have that data aligned properly.
Now this was also already a piece of our app.
But what we're going to do is comment that out and then run on our app and then I want to uncomment
it and show you what it actually does.
So first let's run it let's test our selection to see if it actually properly passes the image into
our image presentation.
VC okay.
It will set our image here then in view that load is going to actually load it into the image view.
So let's go ahead let's stay in here so that we can uncomment this to see what it does.
But we're going to go ahead and build this to an iPhone 8 plus and as soon as the simulator pops open
we'll be able to select a table view cell and hopefully load an image into our visi.
So here's our sim beautiful k cool loading loading.
All right.
So we have our cells here with our names and everything that's great but we need to go ahead and select
one.
Let's see if it works.
If I select a camera it should load the camera image look at that it does very very cool.
So let's try animals and it loads the picture of the animal.
How about flowers.
Yeah.
Right on.
OK so since this is a split view controller let's rotate the device by pressing command and then left
or right on the directional keys and look at that we get a camera.
We get a city we get flowers whenever we select it the image loads in full screen.
But you're probably expecting to see a button here usually in really good apps that utilize UI split
view controller.
You'll see an image here that looks like two diagonal arrows pointing away from each other.
And what that's going to do is it's going to collapse this second view controller to make this controller
full screen.
That's actually what these this code does here.
So if you uncomment it says controller the navigation item K which means the navigation item is this
button here.
Dot left bar button item OK this button is equal to split view controller.
OK because remember we can access this property.
Thanks to just iOS it's out of the box for us and we can go ahead and access display mode button item.
OK.
So if you select this and you actually see what it means.
This is a button that changes the display mode of the view controller.
OK.
It's going to allow the user to explicitly pull it open in full screen.
And what we're doing here is we're setting controller that navigation item dot left items supplement
back button is true.
And instead of going back.
So instead of tapping it it goes back to this new controller like it does when we are right side up.
OK it's back button.
When we are in a split view controller mode it's going to supplement the back button with the display
button that we want which is the display mode full screen button.
OK.
Now let's go ahead and build and run it with this in place and let's see how that changes the interaction
in our application.
It's going to launch here.
OK let's test it.
Camera that looks normal.
Very cool.
That looks good.
OK.
Let's rotate it and look at that we get this nice full screen button and watch what happens when I click
on it.
It zooms up in full screen.
That's so cool.
So do you see that I can actually open it in full screen and it will independently scroll.
Thanks to our constraints which is really really neat.
So we can do all that cool stuff.
And you know what I told you I would talk about this later and I haven't yet.
So when we select a row we get that animation right.
It becomes gray.
And when we release it fades away that's only because we're calling de-select row.
Now if we were to not do that when we select it it would get stuck in this gray and it doesn't look
very good.
So I wanted to make it nice and engaging where you click and it kind of flashes and then goes back to
its original color.
Hence why I called Table View.
De-select row.
So this is looking really good although something that I don't like about it is that we can't actually
see every cell when we rotate.
And I think that we should.
So let's set up that configuration now by actually calling another delegate method of our table view
called height for row at index path and that's going to ask the delegate for a specific height for each
cell k.
So what we're going to do is we're going to return a value for the height of each cell.
So return but now we need to think we want the height of the table view and we want to divide that by
the amount of items in the table V right.
So if we have 6 items we want to take the height and divide it by 6 to get a perfect height for each
cell so we can say table view frame height divided by image array K Dot count because that means we
have 6 images 6 6 items to divide by.
But if you build this we're going to get an error saying that we can't divide C.G. float which is this
value the height of the table view.
And int k which is the the count of the array.
So what we can do is call C.G. float and we can actually cast the count as a C.G. float.
All right.
Now let's go ahead and head into the storyboard really quick.
We need to dissect a few things.
So select the table view and then go into the size inspector.
Go ahead and delete that 120 and set it to automatic.
Then select the cell itself.
Either clicking here or in the storyboard and also get rid of that custom height and it's going to shrink
up here.
But the cool thing is that thanks to this code that we just wrote we're going to have the proper height
so let's build and run it again and let's make sure everything looks good.
OK.
Very cool.
Let's see.
All right.
Interesting.
So it appears that the height is good but look it's only accounting for the whole table view that's
behind here.
And you know what.
I guess that's fine but if we rotate Let's see if it actually updates the height like it's supposed
to.
OK.
Very cool.
Look at that so it.
Whoops that's the top thing there.
So look at that it actually shrinks down when we rotate.
And then when we go back it is the appropriate height.
That's super cool.
So that's exactly as I'm expecting it to be let's say.
Well let's see if there is a way that we can access maybe the view or oh you know what let's try a table
view up background view.
OK let's see if we can actually use the frame height of the background view.
Oh we have to unwrap it here.
Whoops OK there we go.
BuildOn run let's see if that is the right size because what I'm trying to do is I'm trying to make
it so that the cells fit beautifully in the table view without actually being oh yeah no that's not
good.
We don't actually have a background view to access I guess.
Well I do know that the top bar is.
Yeah.
Okay.
And the top bar is 50.
So let's actually just go ahead and subtract 50 then divide.
So we'll do let's see our order of operations here we should be doing this table view minus 50 and then
divided by the C-g float value.
So build and run it one more time we're just subtracting the the amount of space that there is hidden.
And oh yeah look at that.
That looks great.
So we get a little bit of overhang.
Maybe it's 60.
I thought it was 50 let's try 60 and let's see if that helps we should have no whitespace on the bottom
and a nice even table view that's going to be you know nice to look at.
OK.
Very cool.
That looks great.
If I go up or down you're going to notice there's no issues and if I rotate we do have a problem.
Ooh.
That's not good.
Because it appears that the top bar becomes more narrow.
So you know what.
Let's actually go ahead and say minus navigation controller dot navigation bar dot frame dot height
so that we can actually subtract the height of the navigation bar.
No matter no matter what and it looks like we're going to have to unwrap this.
Yeah.
Well let's be safe.
Let's go ahead and cut this and then let's just say guard let nav bar height equals and paste that in.
Else return basically.
So if there is no nav bar height will just return and let's go ahead and do that.
Build and run.
There we go.
We're getting an issue here.
Should return a value.
OK so maybe.
Well you know what.
Maybe guard lead is not the best option because I don't want to actually have to return that let's just
do if left and then yeah really cool if let nav bar equals navigation controller or BAARDA height.
We're going to go ahead.
OK.
So let's return return what we were going to.
Otherwise we're going to go ahead and return the same thing.
But let's just do 60.
You know that was pretty good.
It's not perfect but for some reason we can't access that nav bar height.
We will will use 60 as a static value.
OK so look at that nice and even it uses the nav bar height.
Let's rotate and look at that.
It looks like we are using the nav bar height for when the app originally loads.
So we could do some work in here to make it so that when you rotate it reloads the table view and updates
the height.
But guys this is good enough.
This is a.
OK.
And in that case I think it's actually too much work to do this in general so sorry I'm going to go
ahead and delete this and just stick with 60 because 60 was good enough even though when we rotate it
looks a little funky.
We're going to go ahead and stick with 60 for now.
You could do more to make this better but we've already spent enough time on this.
So the height for the rose is good but when we rotate the font just looks a little bit too big.
So I think I want to set it so that when we rotate the device the font gets smaller and when we rotate
back the font is its normal size and we can use something in here in storyboard check it out.
If I select this title here let's go into the content view and select the title go into the attributes
inspector and check it out guys.
I can go ahead and on the font property I can go ahead and click this plus sign and I can introduce
a variation.
Now if we rotate our device to the side that makes it have a compact height and a regular width.
OK.
Now regular width is usually reserved for I-pads only and most I-phones have a compact height and width.
But the iPhone 8 plus K has a compact compact with and a regular height since the is a little bit bigger.
So since I split view controller is used on the bigger phones we can go ahead and add this variation.
And then for compact width and regular height we can go ahead and actually lower the font size like
so and I'm actually going to bump it down quite substantially so that when we rotate we can see that
it actually is the right way.
Now with this compact and the oh you know what guys know I have this backwards.
Let's get rid of this.
I was I was thinking the wrong thing.
The width will be regular and the height will be compact because when we're sideways it's much different.
So if we add this variation we can take the font from size 48 down to maybe size.
I don't know how about 30.
And you'll notice nothing changes here.
But if I rotate.
You'll see that the font is going to be smaller.
OK it's going to allow us to use that smaller font that we want and we can't see it at the moment because
we're not actually running the app but let's go ahead and let's set it to be 30.
And now let's go ahead and build and run.
OK.
Like so.
Oh and we are seeing this on an iPhone 8.
That's also why we can't see the variation.
But watch this guy's big font.
When I rotated the font should get smaller and it doesn't.
Interesting.
So let's think about what is going on here.
We have a cell k we have a title here.
When the width is regular and the height is compact we should get smaller.
Let's view this as an 8 plus and let's put it sideways OK so that appears to actually be doing what
it's supposed to.
Big fat here.
When we rotate we get a little fun.
Let's make it extra small maybe I just can't tell when that's working so let's make it 24.
Now let's build and run it and let's go see how it looks.
Because these height variations should help us to make a better user experience.
Ok cool.
Big font.
When we are in portrait mode landscape the font is still not becoming smaller.
So this is interesting.
I wonder why it shows up properly here.
But when I run it on my 8 plus the font is not shrinking the way it's supposed to.
Now I want to make sure that our height has been set to default.
OK that's good.
Same with our table view set to automatic.
OK that's that's all fine.
That's the way it's supposed to be.
So let's think what could the problem be.
We have a constraint here.
We're setting it.
So when it is well let's let's look at it again
anywhere.
OK we want it to be regular with with a compact height and we add that variation then we're going to
go ahead and when it's in that way we're going to set it to be size 24.
Then if it goes back to its normal rotation it's going to have its big fun.
OK.
That looks good.
Let's go ahead and build and run it again and see if that helps to solve our problem here.
So here we go we are running the app.
It's going to pop open here.
Very cool.
And let's go ahead and let's see what we get.
Interesting.
So it does not appear to be working the way that it's supposed to that's really strange.
I'm going to try setting maybe compact height and compact with oh you know what I wonder.
Yeah.
OK.
So since this rotates the width of the screen is regular But this view controller has a compact with
and a compact height.
At the same time.
So I'm going to go ahead and actually introduce a size variation for compact width and height.
So select title select the variation button and do compact with and compact height.
Then go ahead and set it to a smaller font size like so.
And then we can go ahead and build and run again and test to see if this is looking the way it's supposed
to.
When you deal with two view controllers on the screen it starts to get a little confusing.
So this looks good.
Big font.
When I rotate small font that is what I was looking for people.
Amazing.
So when we rotate we have nice big font when we rotate.
We have small font but still matching the same ratio of font to sell.
So that was what I was going for.
The size classes there can be a little confusing especially if you're working with two VCs So that's
just something to look out for when you have when you have two VCs in the same controller.
It can get a little bit tricky.
So thank you guys so much for going through this video.
This means we are one step closer to perfecting our U.S. but Wii U controller app.
Awesome work guys.
In the next video we're going to go ahead and just kind of test out and tweak the functionality of splitter.
And I'm also going to go ahead and give you a challenge to make this app even better so I'll see in
the next video.
Great job with this one.