1 00:00:00,390 --> 00:00:03,880 All right, so in a detail controller, we managed to get most 2 00:00:03,880 --> 00:00:08,210 of the important information up but we're missing two very obvious data points. 3 00:00:08,210 --> 00:00:12,270 There is no indication of the contact's name or their profile picture. 4 00:00:12,270 --> 00:00:15,790 This is a silly omission because if it weren't for this email address giving us 5 00:00:15,790 --> 00:00:20,760 some clue as to who it is, we would have no idea which contact we're looking at. 6 00:00:20,760 --> 00:00:22,585 So let's add that information in. 7 00:00:22,585 --> 00:00:26,060 Now, one way we could go about it is to add another section up at the top 8 00:00:26,060 --> 00:00:28,330 here with a profile picture and name. 9 00:00:28,330 --> 00:00:30,800 But we want it to be pretty obvious. 10 00:00:30,800 --> 00:00:34,390 The actual context app on our iPhones displays it top and 11 00:00:34,390 --> 00:00:36,580 center seemingly above the table view. 12 00:00:36,580 --> 00:00:37,880 How does it do this? 13 00:00:37,880 --> 00:00:40,670 There are three ways that we can achieve that look. 14 00:00:40,670 --> 00:00:44,400 The first two are possible within the scope of this course. 15 00:00:44,400 --> 00:00:47,970 Every table view has a property named table header view, 16 00:00:47,970 --> 00:00:50,960 that takes an instance of UI view to display. 17 00:00:50,960 --> 00:00:55,710 This accessory view is displayed above the table right over here somewhere. 18 00:00:55,710 --> 00:00:57,570 And since it's a regular view, 19 00:00:57,570 --> 00:01:00,850 we can add any number of sub-views to display that we want. 20 00:01:00,850 --> 00:01:02,110 So that's option one. 21 00:01:02,110 --> 00:01:05,100 Option two is to use section header views. 22 00:01:05,100 --> 00:01:07,790 Now, every table view section has a header and 23 00:01:07,790 --> 00:01:11,070 a footer view that we can, again, use to display content. 24 00:01:11,070 --> 00:01:13,430 So header goes above, footer goes right below. 25 00:01:13,430 --> 00:01:16,460 Typically, this is used to display additional information about 26 00:01:16,460 --> 00:01:17,960 a particular section. 27 00:01:17,960 --> 00:01:20,970 Going this route would mean providing implementations for 28 00:01:20,970 --> 00:01:25,110 a couple methods in the UI table view delegate protocol. 29 00:01:25,110 --> 00:01:29,750 The information we want to show, profile picture and name, aren't related to any of 30 00:01:29,750 --> 00:01:34,840 these existing sections so it doesn't make sense to add it as a header view. 31 00:01:34,840 --> 00:01:39,060 Option three really isn't an option here, but I want to throw it out anyway. 32 00:01:39,060 --> 00:01:42,320 Now, we've used table views in conjunction with a UI 33 00:01:42,320 --> 00:01:46,250 table view controller in this app which is the usual way to use this. 34 00:01:46,250 --> 00:01:49,890 So here we have a table view controller that has an embedded table view. 35 00:01:49,890 --> 00:01:54,250 At the end of the day, though, UI table view is simply a specialized view. 36 00:01:54,250 --> 00:01:58,130 It inherits from UI scroll view, which inherits from UI view. 37 00:01:58,130 --> 00:02:00,270 This means that, in a standard view controller, 38 00:02:00,270 --> 00:02:04,630 we can display the view up at the top with the name and profile picture. 39 00:02:04,630 --> 00:02:08,360 And below that, we can insert a table view like a normal view 40 00:02:08,360 --> 00:02:10,860 to display the rest of the contact information. 41 00:02:10,860 --> 00:02:12,975 In fact, if you search for table view, 42 00:02:12,975 --> 00:02:17,500 you'll notice that you both have the controller and regular view as well. 43 00:02:17,500 --> 00:02:19,670 So let's go with option one. 44 00:02:19,670 --> 00:02:22,680 This is pretty easy to do because you can actually implement it 45 00:02:22,680 --> 00:02:24,510 in a story board scene. 46 00:02:24,510 --> 00:02:27,190 So drag out a view from the object library. 47 00:02:27,190 --> 00:02:31,306 I always find it easier to type UI View to get it to come up over here and 48 00:02:31,306 --> 00:02:34,220 then insert it at the very top of the table view. 49 00:02:34,220 --> 00:02:38,875 Now, this is a bit tricky and you wanna move around till you get this thin 50 00:02:38,875 --> 00:02:41,606 blue line and then [SOUND] mistake drop it. 51 00:02:41,606 --> 00:02:43,830 So drop it at the thin blue line. 52 00:02:43,830 --> 00:02:44,690 There we go. 53 00:02:44,690 --> 00:02:47,120 Now, unlike Standard View stuff, 54 00:02:47,120 --> 00:02:50,740 we're not gonna add any constraints to position this header view. 55 00:02:50,740 --> 00:02:53,360 Instead, it just occupies that full space and 56 00:02:53,360 --> 00:02:55,500 we can modify the height if we want to. 57 00:02:55,500 --> 00:02:57,770 So we're going to set the height explicitly and 58 00:02:57,770 --> 00:03:00,690 the Table View is going to stick to using that height. 59 00:03:00,690 --> 00:03:03,880 Now, this is the view right here, can't really differentiate between that and 60 00:03:03,880 --> 00:03:06,670 the row, but we'll make some changes in a second. 61 00:03:06,670 --> 00:03:11,360 So if it's easier, you can select it in the document outline here, 62 00:03:11,360 --> 00:03:13,351 so it's right here as View. 63 00:03:13,351 --> 00:03:18,015 And in the size inspector we're going to change the height from 44 to 200 points. 64 00:03:18,015 --> 00:03:21,350 We're also gonna fake it a bit and 65 00:03:21,350 --> 00:03:25,310 make it look like this is part of the Table View itself. 66 00:03:25,310 --> 00:03:28,480 And we're gonna do that by changing the background color 67 00:03:28,480 --> 00:03:32,080 to match the Table Views background color exactly. 68 00:03:32,080 --> 00:03:36,570 So, select the View again and in the attributes inspector, 69 00:03:36,570 --> 00:03:39,123 go to color, background color and 70 00:03:39,123 --> 00:03:44,597 here there's a special color called groupTableViewBackgroundColor. 71 00:03:44,597 --> 00:03:46,030 And you select that. 72 00:03:46,030 --> 00:03:48,430 Look at that, looks like part of the tableView. 73 00:03:48,430 --> 00:03:51,160 From here, it looks like all standard stuff. 74 00:03:51,160 --> 00:03:55,540 Let's next add an image view, drag and 75 00:03:55,540 --> 00:03:58,768 drop and we've added this as a regular sub views. 76 00:03:58,768 --> 00:04:02,630 So, now we're gonna set a few constraints to position it inside this 77 00:04:02,630 --> 00:04:04,400 header view that we added. 78 00:04:04,400 --> 00:04:07,094 So, we'll keep the height and 79 00:04:07,094 --> 00:04:13,300 width fixed at 100 points each, so add those constraints. 80 00:04:13,300 --> 00:04:17,050 We're going to center it horizontally, and 81 00:04:17,050 --> 00:04:22,350 then I want to space it 32 points from the top. 82 00:04:22,350 --> 00:04:26,000 Now, I'm gonna hit Update Frames to get that into position, there we go. 83 00:04:26,000 --> 00:04:28,770 Let's also add a label for the name. 84 00:04:28,770 --> 00:04:31,480 So look for a label, drag it out. 85 00:04:33,280 --> 00:04:37,648 Let's change the text to John Doe. 86 00:04:37,648 --> 00:04:44,177 We're going to give it a system bold style of 22 points and 87 00:04:44,177 --> 00:04:48,233 then we're gonna center line this. 88 00:04:48,233 --> 00:04:51,100 Gonna make sure we could see that, okay? 89 00:04:51,100 --> 00:04:55,850 We want to horizontally center it in the view and 90 00:04:55,850 --> 00:04:59,790 set it 16 points from the bottom of the image view. 91 00:05:02,220 --> 00:05:06,470 Now, now that we have these views, all that's left to do is create outlets and 92 00:05:06,470 --> 00:05:10,350 assign the information stored in the contact instance. 93 00:05:10,350 --> 00:05:17,000 So make some room, switch to the standard editor, and we're add these to the top. 94 00:05:18,210 --> 00:05:23,986 So, we'll call this one profile view and, 95 00:05:26,274 --> 00:05:34,605 We'll call this the name label, And now, down in the configure view method, 96 00:05:34,605 --> 00:05:39,220 we'll add the configuration code and we'll just keep it all in one place. 97 00:05:39,220 --> 00:05:45,342 So, the top will say profileView.image = contact.image. 98 00:05:45,342 --> 00:05:50,050 And then nameLabel.text = and we're 99 00:05:50,050 --> 00:05:55,120 going to use the contact's full name, so we'll have to use string interpolation. 100 00:05:55,120 --> 00:06:01,388 And get the context first name and then the context last name together. 101 00:06:04,009 --> 00:06:09,564 Let's run the app, And look at that beautiful 102 00:06:09,564 --> 00:06:14,360 detailed page, it looks nice and works perfectly. 103 00:06:15,570 --> 00:06:20,140 Okay, so the important point here is to introduce you to the concept of 104 00:06:20,140 --> 00:06:21,650 table view headers. 105 00:06:21,650 --> 00:06:23,130 Now, you know they exist. 106 00:06:23,130 --> 00:06:26,650 So if you need to display some information at the top of the table, 107 00:06:26,650 --> 00:06:28,270 you know what to use. 108 00:06:28,270 --> 00:06:28,860 Okay? 109 00:06:28,860 --> 00:06:29,680 On to the next topic.