1 00:00:07,080 --> 00:00:10,320 Hey everybody what's going on this is Caleb with slopes dot com. 2 00:00:10,330 --> 00:00:15,550 And in this video what we're going to do is we're going to begin by creating our code project. 3 00:00:15,550 --> 00:00:20,140 After that we're going to import all of the assets we're going to need for this project and then we're 4 00:00:20,140 --> 00:00:21,640 going to set up some dummy data. 5 00:00:21,760 --> 00:00:22,410 OK. 6 00:00:22,420 --> 00:00:26,680 Now there is a very particular way that our project is going to be set up and there's going to be a 7 00:00:26,680 --> 00:00:31,540 change or another change but something that you might not expect in the app delegate and we're going 8 00:00:31,540 --> 00:00:34,090 to look at that to figure out you know what's going on. 9 00:00:34,090 --> 00:00:40,930 So pull open X code and select Create new X good project but instead of using a single view app like 10 00:00:41,050 --> 00:00:41,990 we usually do. 11 00:00:42,160 --> 00:00:45,480 We're going to actually create what's called a master detail app. 12 00:00:45,480 --> 00:00:45,710 OK. 13 00:00:45,720 --> 00:00:47,750 And I'll show you what that means in just a moment. 14 00:00:47,950 --> 00:00:49,220 If you don't already know. 15 00:00:49,450 --> 00:00:51,310 So go ahead and give it a name. 16 00:00:51,310 --> 00:00:53,650 I'm going to name this one. 17 00:00:53,860 --> 00:00:55,700 Maybe splits. 18 00:00:56,130 --> 00:00:56,850 OK. 19 00:00:57,220 --> 00:00:58,080 Give it a name. 20 00:00:58,120 --> 00:01:04,420 Click next and then go ahead and just save it to your desktop or wherever and go ahead and pull it open 21 00:01:04,450 --> 00:01:05,360 full screen. 22 00:01:05,620 --> 00:01:06,170 OK. 23 00:01:06,640 --> 00:01:09,480 So this is our application now. 24 00:01:09,490 --> 00:01:14,080 You'll notice there are two View Controller files here where in normal X code project you just have 25 00:01:14,080 --> 00:01:18,070 one and the storyboard is where things get really interesting. 26 00:01:18,100 --> 00:01:19,150 So take a look. 27 00:01:19,180 --> 00:01:22,240 I'm going to try to zoom out here so you can see everything that's going on. 28 00:01:22,690 --> 00:01:27,360 Basically what we have out of the box is a master view controller. 29 00:01:27,550 --> 00:01:32,280 And that is actually of type split view controller or split view controller. 30 00:01:32,410 --> 00:01:39,220 Now split obviously indicates that there are two controllers that go with it and there's a new navigation 31 00:01:39,220 --> 00:01:42,760 controller here and another navigation controller here. 32 00:01:42,820 --> 00:01:46,970 Now one navigation controller is linked to a table view. 33 00:01:47,170 --> 00:01:53,470 And when a cell is selected from that table view it pushes it on to a view controller on the next navigation 34 00:01:53,470 --> 00:01:58,510 controller and that's how these two things talk to the one split view controller. 35 00:01:58,510 --> 00:02:04,570 So for instance if I tapped on this title cell here it would present this view controller or the Detail 36 00:02:04,630 --> 00:02:07,960 View Controller which you can see here it's named detail. 37 00:02:07,960 --> 00:02:12,810 Now the thing that I wanted to show you in the delegate is way down at the bottom. 38 00:02:12,820 --> 00:02:14,520 And actually we're going to look here first. 39 00:02:14,530 --> 00:02:20,620 But basically what we have done is we have set up a split view controller in our app delegate and we 40 00:02:20,620 --> 00:02:24,940 have set that to be the route view controller so that is the route. 41 00:02:24,940 --> 00:02:32,470 Then what we do is basically upon the split view controller we basically call split view controller 42 00:02:32,470 --> 00:02:40,780 drop view controllers and we pass in split view controller view controllers count minus one as a UI 43 00:02:40,780 --> 00:02:42,060 navigation controller. 44 00:02:42,250 --> 00:02:42,940 OK. 45 00:02:42,950 --> 00:02:50,350 Because simply by creating this in the storyboard here we have linked these up into the controllers 46 00:02:50,350 --> 00:02:50,710 array. 47 00:02:50,710 --> 00:02:54,640 So we're pulling out the count right. 48 00:02:54,640 --> 00:02:56,750 So let's see that again in the delegate. 49 00:02:56,890 --> 00:03:03,480 We're taking the count of all of the controllers we're subtracting 1 to get the second to last. 50 00:03:03,550 --> 00:03:09,680 Or start to get the very last controller in this array which just so happens to be a navigation controller. 51 00:03:09,860 --> 00:03:17,680 Then what we do is we call the navigation controller top view controller navigation item left bar button 52 00:03:17,680 --> 00:03:22,600 item K equals the display mode button item and we'll talk about what that is and a second I'll just 53 00:03:22,600 --> 00:03:23,270 give you a hint. 54 00:03:23,320 --> 00:03:24,830 It's that full screen button. 55 00:03:25,090 --> 00:03:29,500 And then we set the delegate of the split controller to be the delegate which is right here. 56 00:03:29,500 --> 00:03:33,850 So all of our split controller stuff is being handled by the app delegate. 57 00:03:33,850 --> 00:03:36,520 So let's scroll down and let's see what's going on. 58 00:03:36,700 --> 00:03:42,310 We have a little function here called split controller collapse secondary controller onto primary view 59 00:03:42,310 --> 00:03:48,970 controller and we basically create two properties here one of type UI navigation controller and we're 60 00:03:48,970 --> 00:03:56,230 setting that as the secondary controller then we are saying the top detail controller is going to be 61 00:03:56,590 --> 00:03:57,740 detailed view controller. 62 00:03:57,760 --> 00:04:00,720 That's the one that had that label where the text is displayed. 63 00:04:01,030 --> 00:04:08,620 So then what we are saying is if the top detail view controller if the detail item is equal to nil and 64 00:04:08,620 --> 00:04:14,500 we will explore that in a future video if that's equal to nil we're going to return true here meaning 65 00:04:14,680 --> 00:04:20,370 collapse the secondary view controller onto the primary view controller. 66 00:04:20,370 --> 00:04:20,910 OK. 67 00:04:21,040 --> 00:04:24,630 Now the primary view controller is going to be our navigation controller. 68 00:04:24,670 --> 00:04:30,640 That means if we don't have a detail item if we don't have information for that label we're going to 69 00:04:30,640 --> 00:04:32,020 go ahead and return true. 70 00:04:32,140 --> 00:04:37,930 And it's going to go ahead and collapse that second view controller to basically show the table view 71 00:04:38,350 --> 00:04:40,330 instead of the detail visi. 72 00:04:40,450 --> 00:04:47,950 Otherwise if the detail item is not equal to nil we're going to return false and show that view controller. 73 00:04:48,040 --> 00:04:48,590 OK. 74 00:04:48,880 --> 00:04:55,090 Now this is called Basically when the app runs for the first time when we open it the detail Visi has 75 00:04:55,090 --> 00:04:59,140 not yet been instantiated because we have not selected a cell and pass it in the information. 76 00:04:59,140 --> 00:05:05,640 So we're going to go ahead and collapse that top view controller and show the table view. 77 00:05:05,670 --> 00:05:07,880 OK so that's what's going on behind the scenes here. 78 00:05:07,900 --> 00:05:13,090 You could do this all by yourself like you could drag in a split controller or you could link up all 79 00:05:13,090 --> 00:05:15,550 the table views create all the segues. 80 00:05:15,550 --> 00:05:18,610 Call this function set up all the view controllers blah blah blah. 81 00:05:18,640 --> 00:05:25,060 Or alternatively you can create a master detail project and it just sort of modify it a little bit to 82 00:05:25,060 --> 00:05:25,620 fit your needs. 83 00:05:25,620 --> 00:05:30,850 And I thought that was a much more appropriate way to introduce us controllers to you guys. 84 00:05:30,850 --> 00:05:34,730 So that's the app delegate that's how it's working now. 85 00:05:34,750 --> 00:05:36,360 We need to drag in our assets. 86 00:05:36,610 --> 00:05:40,680 Those six images that will be displayed in the detail view controller. 87 00:05:40,810 --> 00:05:43,830 So go ahead and pull open your assets folder here. 88 00:05:43,840 --> 00:05:50,380 And by the way in the intro to video there's a little download folder with a download arrow and it has 89 00:05:50,470 --> 00:05:54,820 all the source code and all the assets you're going to need so select all of those. 90 00:05:54,910 --> 00:05:56,660 Drag them in and a release. 91 00:05:56,670 --> 00:06:00,800 And then of course you'll be able to see that we have all kinds of cool photos here. 92 00:06:01,120 --> 00:06:06,120 Just these beautiful photos and we're going to use these in our app when we tap on a cell. 93 00:06:06,310 --> 00:06:06,800 OK. 94 00:06:07,030 --> 00:06:07,990 So there's our assets. 95 00:06:07,990 --> 00:06:08,980 That's great. 96 00:06:08,980 --> 00:06:12,340 But now we want to go ahead and set up our dummy data right. 97 00:06:12,370 --> 00:06:18,340 We have UI image views or sorry UI images rather we also have names and we have colors that we want 98 00:06:18,430 --> 00:06:19,920 our cells to display. 99 00:06:19,990 --> 00:06:24,160 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 100 00:06:24,160 --> 00:06:24,800 now. 101 00:06:25,030 --> 00:06:31,940 OK new Swift file and we're going to name this images plus names plus colors. 102 00:06:32,290 --> 00:06:32,860 OK. 103 00:06:33,190 --> 00:06:34,780 Go ahead and create that. 104 00:06:34,900 --> 00:06:41,290 And now we're going to go ahead and import you I can't because UI image comes from you I get following 105 00:06:41,290 --> 00:06:45,520 that we're going to go ahead and create an instance of UI image but it's going to be for each of the 106 00:06:45,520 --> 00:06:50,710 images so we're going to say let camera equals you image. 107 00:06:50,950 --> 00:06:56,860 And when you instantiate a UI image what you can do is you can call a UI image named which is right 108 00:06:56,860 --> 00:07:00,040 here and you can pass in the string name of the file. 109 00:07:00,070 --> 00:07:02,460 And I named it just one that was simple. 110 00:07:02,740 --> 00:07:08,260 So we need to force unwrap it because this is optional like this name could be incorrect and that would 111 00:07:08,260 --> 00:07:10,620 cause a crash but we know that it's not. 112 00:07:10,630 --> 00:07:12,500 So we're going to go ahead and force on it. 113 00:07:12,520 --> 00:07:17,920 Now I am going to copy and paste this a few times because we don't need to type that thing over and 114 00:07:17,920 --> 00:07:24,010 over again and we have just six images so one two three four five six and it looks like I created one 115 00:07:24,010 --> 00:07:27,790 extra and we need to rename these the appropriate names. 116 00:07:27,790 --> 00:07:34,020 So in the assets folder here what do we got we've got. 117 00:07:34,120 --> 00:07:35,190 Sorry where was I. 118 00:07:35,230 --> 00:07:35,510 OK. 119 00:07:35,530 --> 00:07:36,430 There we go. 120 00:07:36,520 --> 00:07:39,170 We've got the first image which was a camera. 121 00:07:39,190 --> 00:07:49,750 The second image which is the city second or third image here which is the buffalo I should say Buffalo. 122 00:07:49,780 --> 00:07:51,160 There we go. 123 00:07:51,220 --> 00:07:53,740 The next one was the flowers. 124 00:07:53,740 --> 00:07:55,230 Let's just say bouquet. 125 00:07:56,650 --> 00:08:00,580 Bu K the next one. 126 00:08:00,600 --> 00:08:02,100 Whoops my bad. 127 00:08:02,130 --> 00:08:09,870 The next one here is the flower stands foolishest say stand and the sixth one I believe is like a urban 128 00:08:09,870 --> 00:08:11,910 basketball scenes so I'll just say urban. 129 00:08:12,180 --> 00:08:15,120 So that's going to be for the images. 130 00:08:15,150 --> 00:08:15,760 OK. 131 00:08:15,960 --> 00:08:21,460 So next we're going to go ahead and actually just create one array that has all the names of those images. 132 00:08:21,510 --> 00:08:28,550 So let's just save our names array equal as an array of course of type string. 133 00:08:28,800 --> 00:08:33,990 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 134 00:08:34,080 --> 00:08:35,730 about six times I don't know if that's right again. 135 00:08:35,730 --> 00:08:38,330 But anyway these are going to be all caps. 136 00:08:38,330 --> 00:08:46,680 So I'm going to say camera because that is the first item then city then let's just say animals instead 137 00:08:46,680 --> 00:08:53,090 of Buffalo maybe flowers stands and then urban. 138 00:08:53,250 --> 00:08:54,290 And I had one extra again. 139 00:08:54,360 --> 00:08:55,680 Looks like I can't count. 140 00:08:55,680 --> 00:09:03,120 So anyway next I forgot we need to create an array of images so let's just say let's image array equals 141 00:09:03,900 --> 00:09:06,770 and we're just going to type in all the names of the images that we have. 142 00:09:06,770 --> 00:09:12,220 So camera City Buffalo. 143 00:09:13,250 --> 00:09:14,930 OK. 144 00:09:15,180 --> 00:09:21,960 Oh you stand and urban OK. 145 00:09:22,320 --> 00:09:25,320 And this could also be a letter since it's not going to change. 146 00:09:25,470 --> 00:09:31,680 And basically we're going to use these to access all of these files using the index path dot row of 147 00:09:31,680 --> 00:09:32,640 the table view. 148 00:09:32,880 --> 00:09:36,200 So yeah now we have names and images. 149 00:09:36,210 --> 00:09:38,850 Next we need an array for colors. 150 00:09:39,050 --> 00:09:39,260 OK. 151 00:09:39,270 --> 00:09:47,700 So we're just going to go ahead and say let's colour's array equals and we'll just use color literals 152 00:09:47,700 --> 00:09:53,160 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 153 00:09:53,160 --> 00:09:58,430 select them and then just copy and paste it a bunch of times. 154 00:09:58,900 --> 00:09:59,850 That's six. 155 00:09:59,880 --> 00:10:01,970 Look at that I didn't count one extra that time. 156 00:10:02,070 --> 00:10:06,150 And let's just choose some great colors here so let's just do you know red. 157 00:10:06,330 --> 00:10:18,630 How about blue green yellowish purple ish that's good and then how about an orange. 158 00:10:18,850 --> 00:10:20,290 Yeah that'll work. 159 00:10:20,290 --> 00:10:24,880 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 160 00:10:24,880 --> 00:10:27,620 to basically use that to tell you know OK. 161 00:10:27,680 --> 00:10:31,480 Index path one is going to be the camera image with the camera name red color. 162 00:10:31,570 --> 00:10:38,020 We're going to talk about that later but now we have all of our data here ready for us to use in our 163 00:10:38,020 --> 00:10:38,730 table view. 164 00:10:38,800 --> 00:10:41,670 OK so just to recap we have looked in our project. 165 00:10:41,680 --> 00:10:46,730 We've seen the layout in the storyboard we looked in the app delegate to see how all of it's being set 166 00:10:46,730 --> 00:10:53,200 up and worked and displayed then we imported our assets and what we did was we created some static data 167 00:10:53,200 --> 00:10:59,350 here that we're going to call in order to essentially you know display these and use them in our application. 168 00:10:59,350 --> 00:11:03,510 So let's head over to the next video where we're going to build out the master view controller. 169 00:11:03,610 --> 00:11:04,660 Let's do it now see there.