1 00:00:08,050 --> 00:00:11,180 Hey buddy what's going on this is Caleb with slopestyle. 2 00:00:11,290 --> 00:00:15,610 And in this video we're going to start building the user interface of our application. 3 00:00:15,610 --> 00:00:20,680 We're going to set up a UI Tabar controller and we're also going to import all of the assets you're 4 00:00:20,680 --> 00:00:26,560 going to need in order to build this app all of the graphical assets for icons and images and everything 5 00:00:26,560 --> 00:00:26,950 like that. 6 00:00:26,950 --> 00:00:33,340 So let's go ahead and let's pull open our storyboard here in our project and to begin what we're actually 7 00:00:33,340 --> 00:00:39,670 going to do is go up to the editor tab in the menu bar and go down to embed in. 8 00:00:39,760 --> 00:00:45,400 And you can see right there tab bar controller but it's not accessible unless we select a view controller 9 00:00:45,430 --> 00:00:52,540 to embedded into first so select that you controller select editor embed in and choose tab bar controller 10 00:00:53,320 --> 00:00:54,450 and watch what happens. 11 00:00:54,550 --> 00:00:57,640 It turns it into a tab bar controller. 12 00:00:57,640 --> 00:01:02,750 Now you'll notice there's only one view controller but in the finished project there were two. 13 00:01:02,890 --> 00:01:05,560 So let's go ahead and let's zoom out and let's set that up. 14 00:01:05,560 --> 00:01:12,460 Now go ahead and drag in another view controller like so and you know what let's move this up and out 15 00:01:12,460 --> 00:01:15,160 of the way let's bring this up a little ways. 16 00:01:15,250 --> 00:01:19,660 And what we're going to do is we're going to right click and drag from the Tabar controller to this 17 00:01:19,660 --> 00:01:24,890 view controller and we're going to go down to relationship segues OK. 18 00:01:25,120 --> 00:01:31,840 Click on View controllers and it's going to add this Visi into the list of new controllers that this 19 00:01:31,840 --> 00:01:33,350 Tabar controller manages. 20 00:01:33,370 --> 00:01:34,990 OK that's really easy. 21 00:01:35,290 --> 00:01:37,670 And with that believe it or not we're done. 22 00:01:37,700 --> 00:01:43,810 Our Tabar controller is set up and now this Tabar controller can switch between these two controllers 23 00:01:43,810 --> 00:01:46,490 simply by tapping on the tab bar button. 24 00:01:46,930 --> 00:01:53,950 Now this view controller if I'm not mistaken is inheriting from are initially created view controller 25 00:01:53,950 --> 00:02:01,580 class K we're actually going to rename this trending feed Visi like so. 26 00:02:01,840 --> 00:02:03,600 And I'm going to go ahead and just copy that. 27 00:02:03,610 --> 00:02:10,750 We're going to need to paste it here pasted here and go back to my storyboard and for the identity of 28 00:02:10,750 --> 00:02:14,650 this view controller we're going to replace trending feed visi. 29 00:02:15,010 --> 00:02:21,130 Now we need to set up a view controller file for this because as you can see it doesn't have an identity 30 00:02:21,200 --> 00:02:22,950 doesn't know who it is. 31 00:02:23,020 --> 00:02:23,930 So let's do that now. 32 00:02:24,100 --> 00:02:30,940 So go ahead and right click on controller click new file Cocco touch class and it's going to be a subclass 33 00:02:30,940 --> 00:02:32,810 of view controller obviously. 34 00:02:33,040 --> 00:02:35,290 And this is going to be our search view controller. 35 00:02:35,290 --> 00:02:40,240 So go ahead and type search Visi and that's all we got to do press. 36 00:02:40,240 --> 00:02:47,330 Next make sure that it is added to the proper target and click Create just like that. 37 00:02:47,350 --> 00:02:49,820 Now go back to main storyboard. 38 00:02:49,840 --> 00:02:54,470 Select this controller for the identity we're gonna set search the seat. 39 00:02:54,790 --> 00:02:56,200 So that is that. 40 00:02:56,200 --> 00:03:02,550 Now we have a trending feed VC and we also have a search Visi which is really neat. 41 00:03:02,560 --> 00:03:05,500 Now of course these are squares. 42 00:03:05,500 --> 00:03:06,960 They're not the images we want. 43 00:03:06,970 --> 00:03:12,790 And so with that in mind we're going to go ahead and import our assets now so click on the assets folder 44 00:03:13,120 --> 00:03:17,920 and then pull open the assets you download it in the source code which you should have downloaded at 45 00:03:17,920 --> 00:03:25,270 the very beginning of this section and go ahead and select all of them drag them in and you'll see that 46 00:03:25,270 --> 00:03:27,700 we get all kinds of cool images. 47 00:03:27,820 --> 00:03:34,960 For instance we get a cancel button we get the contributor's icon downloads icon language the search 48 00:03:34,960 --> 00:03:35,710 icon. 49 00:03:35,830 --> 00:03:39,890 The small search icon and the trending icon there's all kinds it's really neat. 50 00:03:40,030 --> 00:03:45,970 And we can go back to main storyboard and I'm just going to show you that we can access these if I go 51 00:03:45,970 --> 00:03:51,950 into this Tabar controller and go to the attributes Inspector I can change the image when it's selected. 52 00:03:52,000 --> 00:03:55,660 I can set well which one is this yet trending feed. 53 00:03:55,660 --> 00:04:00,670 See I can choose trending icon and as you notice the trending icon shows up right there. 54 00:04:00,680 --> 00:04:01,380 That's pretty neat. 55 00:04:01,390 --> 00:04:02,380 Right. 56 00:04:02,380 --> 00:04:04,080 We can do the same thing with this one. 57 00:04:04,080 --> 00:04:10,060 We can change this to the search icon small and you'll notice it updates to the search icon which is 58 00:04:10,060 --> 00:04:11,160 perfect. 59 00:04:11,200 --> 00:04:16,240 Now of course we need to change the name for these so let's just go ahead and use all caps because that's 60 00:04:16,240 --> 00:04:21,410 kind of trendy right now and we're just going to say trending OK. 61 00:04:21,430 --> 00:04:22,690 That's great. 62 00:04:22,690 --> 00:04:28,880 And let's go ahead and scroll all the way down to our search icon here and let's just say search. 63 00:04:28,990 --> 00:04:30,030 Very cool. 64 00:04:30,490 --> 00:04:35,860 And you know what it looks like the words are a little bit low so we can do a custom offset for the 65 00:04:35,860 --> 00:04:36,990 title. 66 00:04:37,180 --> 00:04:41,670 And let's set a vertical set of maybe minus minus four. 67 00:04:41,680 --> 00:04:44,570 That looks good that way they're nice and snug to one another. 68 00:04:44,650 --> 00:04:47,640 We'll do a custom offset here of minus four as well. 69 00:04:47,650 --> 00:04:49,180 Really cool. 70 00:04:49,180 --> 00:04:50,230 And you know what. 71 00:04:50,260 --> 00:04:51,720 This is pretty good. 72 00:04:51,730 --> 00:04:55,620 Now I'm noticing this is the selected image right. 73 00:04:55,630 --> 00:04:59,580 Meaning when the actual tab is selected it's going to show this. 74 00:04:59,770 --> 00:05:02,790 But we need to set a default image as well. 75 00:05:02,920 --> 00:05:07,490 So select trending icon and you'll notice that updates the icon over here. 76 00:05:07,500 --> 00:05:09,760 OK so that's when it is not selected. 77 00:05:09,780 --> 00:05:15,720 Now we need to do the same thing with this new controller set search icons small and you'll notice since 78 00:05:15,740 --> 00:05:21,030 it's de-selected by default it's going to show up gray which is exactly what we want when it is selected 79 00:05:21,030 --> 00:05:25,830 it's going to be blue when it's not selected it's going to be gray and that's pretty neat. 80 00:05:25,830 --> 00:05:30,140 So as far as we're concerned this looks pretty good. 81 00:05:30,270 --> 00:05:36,080 Let's go ahead and let's build and run this to a simulator device and let's see how it looks. 82 00:05:36,220 --> 00:05:41,560 We should be able to select both of these and change the view controller independently. 83 00:05:41,710 --> 00:05:45,630 Oh you know what why don't we change the background color here so we can actually tell. 84 00:05:45,640 --> 00:05:49,120 I'll do blue here and yellow for this one. 85 00:05:49,360 --> 00:05:51,730 Let's stop that and let's build it again. 86 00:05:51,730 --> 00:05:52,110 Here we go. 87 00:05:52,110 --> 00:05:56,420 It's got to compile all of the cocoa pod so that might take a little while but Aliko can speed up the 88 00:05:56,420 --> 00:05:59,290 section and then when it's done building we're going to check it out in the simulator 89 00:06:04,610 --> 00:06:06,560 ok cool build is succeeded. 90 00:06:06,560 --> 00:06:09,280 That is a good sign and here's our simulator. 91 00:06:09,410 --> 00:06:14,790 It's going to go ahead and load up and we will be able to tell if what we did worked. 92 00:06:14,930 --> 00:06:16,690 OK let's check it out. 93 00:06:16,700 --> 00:06:18,060 Here we go. 94 00:06:18,110 --> 00:06:22,080 Should load trending Visi from the get go. 95 00:06:22,160 --> 00:06:28,520 There we go we've got our blue background and when I click on search should load up our yellow visi. 96 00:06:28,610 --> 00:06:29,090 There we go. 97 00:06:29,090 --> 00:06:29,790 Look at that. 98 00:06:29,930 --> 00:06:31,310 When it's selected it's blue. 99 00:06:31,520 --> 00:06:36,530 When it's not selected it's gray and we can alternate between our view controllers just like that. 100 00:06:36,530 --> 00:06:37,900 It's that easy. 101 00:06:37,910 --> 00:06:39,340 Amazing job guys. 102 00:06:39,350 --> 00:06:43,970 And in the next video so hadn't quit the simulator here in the next video we're going to start building 103 00:06:43,970 --> 00:06:45,080 out our trending feed. 104 00:06:45,080 --> 00:06:46,710 We see this blue on here. 105 00:06:46,730 --> 00:06:48,650 We're going to go ahead an ad on the table view. 106 00:06:48,650 --> 00:06:50,360 We're going to drag on a cell. 107 00:06:50,360 --> 00:06:55,210 We're going to connect all the IP outlets and get it all set up to go with our swift. 108 00:06:55,310 --> 00:06:59,870 I'm really excited so let's go ahead and head over to the next video and let's get started right now.