Hey everybody what's going on this is Caleb with slopes dot com.
And in this video what we're going to do is we're going to begin by creating our code project.
After that we're going to import all of the assets we're going to need for this project and then we're
going to set up some dummy data.
OK.
Now there is a very particular way that our project is going to be set up and there's going to be a
change or another change but something that you might not expect in the app delegate and we're going
to look at that to figure out you know what's going on.
So pull open X code and select Create new X good project but instead of using a single view app like
we usually do.
We're going to actually create what's called a master detail app.
OK.
And I'll show you what that means in just a moment.
If you don't already know.
So go ahead and give it a name.
I'm going to name this one.
Maybe splits.
OK.
Give it a name.
Click next and then go ahead and just save it to your desktop or wherever and go ahead and pull it open
full screen.
OK.
So this is our application now.
You'll notice there are two View Controller files here where in normal X code project you just have
one and the storyboard is where things get really interesting.
So take a look.
I'm going to try to zoom out here so you can see everything that's going on.
Basically what we have out of the box is a master view controller.
And that is actually of type split view controller or split view controller.
Now split obviously indicates that there are two controllers that go with it and there's a new navigation
controller here and another navigation controller here.
Now one navigation controller is linked to a table view.
And when a cell is selected from that table view it pushes it on to a view controller on the next navigation
controller and that's how these two things talk to the one split view controller.
So for instance if I tapped on this title cell here it would present this view controller or the Detail
View Controller which you can see here it's named detail.
Now the thing that I wanted to show you in the delegate is way down at the bottom.
And actually we're going to look here first.
But basically what we have done is we have set up a split view controller in our app delegate and we
have set that to be the route view controller so that is the route.
Then what we do is basically upon the split view controller we basically call split view controller
drop view controllers and we pass in split view controller view controllers count minus one as a UI
navigation controller.
OK.
Because simply by creating this in the storyboard here we have linked these up into the controllers
array.
So we're pulling out the count right.
So let's see that again in the delegate.
We're taking the count of all of the controllers we're subtracting 1 to get the second to last.
Or start to get the very last controller in this array which just so happens to be a navigation controller.
Then what we do is we call the navigation controller top view controller navigation item left bar button
item K equals the display mode button item and we'll talk about what that is and a second I'll just
give you a hint.
It's that full screen button.
And then we set the delegate of the split controller to be the delegate which is right here.
So all of our split controller stuff is being handled by the app delegate.
So let's scroll down and let's see what's going on.
We have a little function here called split controller collapse secondary controller onto primary view
controller and we basically create two properties here one of type UI navigation controller and we're
setting that as the secondary controller then we are saying the top detail controller is going to be
detailed view controller.
That's the one that had that label where the text is displayed.
So then what we are saying is if the top detail view controller if the detail item is equal to nil and
we will explore that in a future video if that's equal to nil we're going to return true here meaning
collapse the secondary view controller onto the primary view controller.
OK.
Now the primary view controller is going to be our navigation controller.
That means if we don't have a detail item if we don't have information for that label we're going to
go ahead and return true.
And it's going to go ahead and collapse that second view controller to basically show the table view
instead of the detail visi.
Otherwise if the detail item is not equal to nil we're going to return false and show that view controller.
OK.
Now this is called Basically when the app runs for the first time when we open it the detail Visi has
not yet been instantiated because we have not selected a cell and pass it in the information.
So we're going to go ahead and collapse that top view controller and show the table view.
OK so that's what's going on behind the scenes here.
You could do this all by yourself like you could drag in a split controller or you could link up all
the table views create all the segues.
Call this function set up all the view controllers blah blah blah.
Or alternatively you can create a master detail project and it just sort of modify it a little bit to
fit your needs.
And I thought that was a much more appropriate way to introduce us controllers to you guys.
So that's the app delegate that's how it's working now.
We need to drag in our assets.
Those six images that will be displayed in the detail view controller.
So go ahead and pull open your assets folder here.
And by the way in the intro to video there's a little download folder with a download arrow and it has
all the source code and all the assets you're going to need so select all of those.
Drag them in and a release.
And then of course you'll be able to see that we have all kinds of cool photos here.
Just these beautiful photos and we're going to use these in our app when we tap on a cell.
OK.
So there's our assets.
That's great.
But now we want to go ahead and set up our dummy data right.
We have UI image views or sorry UI images rather we also have names and we have colors that we want
our cells to display.
So we're going to do that all in one file and I'm going to go ahead and just create a new file right
now.
OK new Swift file and we're going to name this images plus names plus colors.
OK.
Go ahead and create that.
And now we're going to go ahead and import you I can't because UI image comes from you I get following
that we're going to go ahead and create an instance of UI image but it's going to be for each of the
images so we're going to say let camera equals you image.
And when you instantiate a UI image what you can do is you can call a UI image named which is right
here and you can pass in the string name of the file.
And I named it just one that was simple.
So we need to force unwrap it because this is optional like this name could be incorrect and that would
cause a crash but we know that it's not.
So we're going to go ahead and force on it.
Now I am going to copy and paste this a few times because we don't need to type that thing over and
over again and we have just six images so one two three four five six and it looks like I created one
extra and we need to rename these the appropriate names.
So in the assets folder here what do we got we've got.
Sorry where was I.
OK.
There we go.
We've got the first image which was a camera.
The second image which is the city second or third image here which is the buffalo I should say Buffalo.
There we go.
The next one was the flowers.
Let's just say bouquet.
Bu K the next one.
Whoops my bad.
The next one here is the flower stands foolishest say stand and the sixth one I believe is like a urban
basketball scenes so I'll just say urban.
So that's going to be for the images.
OK.
So next we're going to go ahead and actually just create one array that has all the names of those images.
So let's just save our names array equal as an array of course of type string.
And there's going to be a couple of items in here so I'm going to go ahead and just copy and paste this
about six times I don't know if that's right again.
But anyway these are going to be all caps.
So I'm going to say camera because that is the first item then city then let's just say animals instead
of Buffalo maybe flowers stands and then urban.
And I had one extra again.
Looks like I can't count.
So anyway next I forgot we need to create an array of images so let's just say let's image array equals
and we're just going to type in all the names of the images that we have.
So camera City Buffalo.
OK.
Oh you stand and urban OK.
And this could also be a letter since it's not going to change.
And basically we're going to use these to access all of these files using the index path dot row of
the table view.
So yeah now we have names and images.
Next we need an array for colors.
OK.
So we're just going to go ahead and say let's colour's array equals and we'll just use color literals
here and a comma and you know what I'm going to make a bunch of these so I'm going to go ahead and basically
select them and then just copy and paste it a bunch of times.
That's six.
Look at that I didn't count one extra that time.
And let's just choose some great colors here so let's just do you know red.
How about blue green yellowish purple ish that's good and then how about an orange.
Yeah that'll work.
OK so what we're going to do is we're going to use the index path of our table view and we're going
to basically use that to tell you know OK.
Index path one is going to be the camera image with the camera name red color.
We're going to talk about that later but now we have all of our data here ready for us to use in our
table view.
OK so just to recap we have looked in our project.
We've seen the layout in the storyboard we looked in the app delegate to see how all of it's being set
up and worked and displayed then we imported our assets and what we did was we created some static data
here that we're going to call in order to essentially you know display these and use them in our application.
So let's head over to the next video where we're going to build out the master view controller.
Let's do it now see there.