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.