1
00:00:07,110 --> 00:00:10,260
Hey buddy what's going on this is Caleb with Deb's slopes dot com.

2
00:00:10,260 --> 00:00:15,820
And in this video we're going to build out the interface for detail Visi which is the controller that

3
00:00:15,820 --> 00:00:23,800
we are going to present in order to show our data show our ads by our items and hide our ads.

4
00:00:23,800 --> 00:00:29,410
So let's go ahead and let's build it pull up an X code and in Interface Builder we're going to just

5
00:00:29,410 --> 00:00:38,110
drag on a UI view controller like so and we're going to start by dragging on some you I image first

6
00:00:38,110 --> 00:00:44,890
of all drag it on right there and we're going to just make it filled about this much of the screen.

7
00:00:45,050 --> 00:00:46,270
That looks pretty good.

8
00:00:46,540 --> 00:00:49,340
And let's go ahead and let's leave it like that.

9
00:00:49,690 --> 00:00:52,280
Then what do we want to do.

10
00:00:52,510 --> 00:00:55,070
Let's go ahead and let's pin it.

11
00:00:55,090 --> 00:00:58,670
First of all zero from the left top and right.

12
00:00:58,810 --> 00:01:03,430
And we're going to give it a fixed height let's do 400 So it's a nice even number.

13
00:01:03,430 --> 00:01:10,720
Next up we're going to go ahead and drag on a label like so and copy and paste because just like before

14
00:01:10,720 --> 00:01:14,600
we're going to have the name of the item as well as the price.

15
00:01:14,620 --> 00:01:15,510
All right.

16
00:01:15,550 --> 00:01:20,260
Next up we're going to drag on a view just like so.

17
00:01:20,350 --> 00:01:21,710
There we go.

18
00:01:21,760 --> 00:01:22,780
Whoops.

19
00:01:22,990 --> 00:01:25,890
You view and stretch it to fill the screen.

20
00:01:26,560 --> 00:01:27,930
That looks pretty good.

21
00:01:27,940 --> 00:01:32,410
And let's go ahead and let's give this a really obnoxious background color and we're going to drag on

22
00:01:32,410 --> 00:01:35,700
an obnoxious label as well to put in the center.

23
00:01:35,860 --> 00:01:40,980
Because remember this is going to be our ad or at least representing what an ad would be if you're using

24
00:01:41,000 --> 00:01:45,260
AdMob or another type of ad service.

25
00:01:45,460 --> 00:01:46,240
That's where this would be.

26
00:01:46,240 --> 00:01:51,370
So I just dragged on the label stretched it to be pretty big and centered the font.

27
00:01:51,370 --> 00:01:55,970
I'm also going to set the line to be too just because of the message I want to write and I'm going to

28
00:01:55,960 --> 00:01:56,970
up the font size.

29
00:01:56,980 --> 00:02:00,520
But I'll wait to set the set that until I set the font.

30
00:02:00,730 --> 00:02:07,840
Then beneath this we're going to add a button just like so and we're going to center it and then we're

31
00:02:07,840 --> 00:02:11,090
going to copy and paste and add that button right below.

32
00:02:11,320 --> 00:02:12,100
All right.

33
00:02:12,370 --> 00:02:16,970
So now what I want to do is I want to actually put all of these in a stack for you.

34
00:02:17,020 --> 00:02:19,510
So I'm going to hold shift and select all of them.

35
00:02:19,600 --> 00:02:23,020
Then click the stack button just like that.

36
00:02:23,040 --> 00:02:29,410
Now I'm going to go ahead and give it some spacing maybe of 10 between each item and you'll see it fits

37
00:02:29,410 --> 00:02:30,240
pretty nicely.

38
00:02:30,250 --> 00:02:39,090
So what I can do is I can go ahead and pin this just like so where it is 8 from the top 0 from the left

39
00:02:39,100 --> 00:02:40,040
0 from the right.

40
00:02:40,060 --> 00:02:45,830
And we're going to do eight from the bottom if it'll let us cool looks good.

41
00:02:46,140 --> 00:02:48,600
So now let's go ahead and let's update these accordingly.

42
00:02:48,630 --> 00:02:55,170
I'm going to select all of the chips all of the labels here like so you might have to use the document

43
00:02:55,220 --> 00:03:01,120
outline and I'm going to change the font from system to Avenir next.

44
00:03:01,130 --> 00:03:06,500
And now we're going to go ahead and make individual changes for the names so I'm going to make this

45
00:03:06,890 --> 00:03:14,390
bold like so and I'm going to make it a little bigger maybe size 24 going to make it blue the same blue

46
00:03:14,390 --> 00:03:19,940
color from before and I'm going to make this the same gray color from before the dark gray.

47
00:03:19,940 --> 00:03:22,260
Now this is going to be item name.

48
00:03:24,390 --> 00:03:27,090
Just like so this is going to be item price.

49
00:03:27,120 --> 00:03:33,000
So I keep having that duplicate t problem with my keyboard and for the label I'm going to make say I

50
00:03:33,000 --> 00:03:41,480
am an ad a very annoying ad cool.

51
00:03:42,210 --> 00:03:47,280
And when I press enter it you'll see it takes up one line there I'm going to actually make it take up

52
00:03:47,280 --> 00:03:54,010
to like so make it a little bigger a little beefier and let's go ahead and let's center this actually

53
00:03:54,640 --> 00:03:59,270
the way it is and we're going to set a with constraint of 300.

54
00:03:59,290 --> 00:04:00,270
Let's try that out.

55
00:04:01,330 --> 00:04:02,950
It doesn't seem to want to.

56
00:04:02,970 --> 00:04:05,910
Oh maybe that was exactly the same with let's try 200.

57
00:04:05,910 --> 00:04:07,050
There we go.

58
00:04:07,050 --> 00:04:07,680
Beautiful.

59
00:04:07,710 --> 00:04:11,420
And I'm going to change the font to something even more obnoxious like heavy.

60
00:04:11,530 --> 00:04:14,900
And let's try 36 now 36 is way too big.

61
00:04:15,120 --> 00:04:16,960
Let's try.

62
00:04:18,090 --> 00:04:19,290
Well let's just do it until it fits.

63
00:04:19,290 --> 00:04:19,790
There we go.

64
00:04:19,920 --> 00:04:20,790
18 is good.

65
00:04:20,790 --> 00:04:24,730
And I'm going to make this bright red just because it's ugly.

66
00:04:24,930 --> 00:04:27,250
D2 5 0 4 e.

67
00:04:27,430 --> 00:04:37,380
There's an ad and for the button we're going to say buy this item for four and we're going to say whatever

68
00:04:37,380 --> 00:04:40,160
the dollar amount is.

69
00:04:40,830 --> 00:04:43,440
Obviously this will be changed as soon as we open the app.

70
00:04:43,680 --> 00:04:53,150
And this one is going to be hide ads for 99 cents there we go.

71
00:04:53,410 --> 00:04:54,500
So let's let's change.

72
00:04:54,520 --> 00:04:56,070
I just cannot stand that system.

73
00:04:56,140 --> 00:04:59,830
The going to change this to Avenir next.

74
00:05:00,070 --> 00:05:07,180
And we're going to make the blue color the same as well just because I mean I really hate that blue

75
00:05:07,180 --> 00:05:08,500
color.

76
00:05:08,500 --> 00:05:09,690
There we go.

77
00:05:09,700 --> 00:05:12,050
Looks a little bit better.

78
00:05:12,400 --> 00:05:14,980
You know what I'm going to change the height of this.

79
00:05:15,010 --> 00:05:17,410
I'm going to make it a little smaller.

80
00:05:17,530 --> 00:05:20,450
And now everything fits very very cool.

81
00:05:20,680 --> 00:05:27,520
So the reason I put this in a stack view is actually because when this ad goes away everything will

82
00:05:27,520 --> 00:05:32,440
kind of automatically scooch up as soon as this is hidden which is pretty neat.

83
00:05:32,470 --> 00:05:37,930
But I'm going to actually have to remove the bottom space constraint so that it actually can slide up

84
00:05:37,930 --> 00:05:40,300
the way we want just like so.

85
00:05:40,300 --> 00:05:45,980
So we have trailing top and that'll work for now.

86
00:05:46,990 --> 00:05:47,890
Yeah that's good.

87
00:05:48,040 --> 00:05:48,340
OK.

88
00:05:48,370 --> 00:05:54,480
So now let's go ahead let's create the view controller file and we're going to use a touch class.

89
00:05:54,490 --> 00:05:57,680
We're going to call this detail visi.

90
00:05:57,880 --> 00:06:03,850
We're going to add it to our project and there we go let's get rid of this boilerplate nonsense and

91
00:06:03,850 --> 00:06:05,500
this comment as well.

92
00:06:05,860 --> 00:06:11,890
And now let's go set the identity of this controller and make that storyboard so click on that click

93
00:06:11,890 --> 00:06:15,030
on your view controller and click on the identity inspector.

94
00:06:15,310 --> 00:06:17,200
Choose detail ABC and press enter.

95
00:06:17,200 --> 00:06:21,430
And now this is inexplicably linked to detail B see the subclass.

96
00:06:21,430 --> 00:06:27,960
So let's go ahead and let's set this up by selecting detail Visi selecting automatic.

97
00:06:27,960 --> 00:06:32,710
And you'll notice it pops up just like so and we're going to go ahead and start making some connections

98
00:06:32,710 --> 00:06:32,890
here.

99
00:06:32,890 --> 00:06:41,270
So right click and drag and we'll call this item image view with only one item image view.

100
00:06:42,190 --> 00:06:48,520
Let's go ahead and let's do item label or maybe item name label.

101
00:06:48,610 --> 00:06:49,860
It's a little more specific.

102
00:06:50,670 --> 00:06:51,200
Hello.

103
00:06:51,210 --> 00:06:51,870
Hello.

104
00:06:51,900 --> 00:06:53,370
Did not mean to drag that.

105
00:06:53,700 --> 00:06:54,800
Let's go ahead and.

106
00:06:54,830 --> 00:07:03,570
Right click from here and we're going to do item price label OK.

107
00:07:03,740 --> 00:07:06,370
This is just going to be it we're going to do the view not the label.

108
00:07:06,370 --> 00:07:13,020
I'm going to right click and drag and call this ugly ad view because it's pretty ugly.

109
00:07:13,040 --> 00:07:23,320
Next it's going to be let's say an outlet for how about by item button.

110
00:07:23,810 --> 00:07:26,900
And then we're going to go ahead and do hide

111
00:07:29,630 --> 00:07:32,250
hide and button.

112
00:07:32,270 --> 00:07:36,500
The reason we're doing outlets for these is because we're going to need to hide some of them or modify

113
00:07:36,500 --> 00:07:39,050
the title based on the price of the item.

114
00:07:39,050 --> 00:07:40,460
And so that's that.

115
00:07:40,490 --> 00:07:43,810
Now we need to go ahead and set up our button Iby actions.

116
00:07:43,820 --> 00:07:49,850
So right click and drag and we're going to just go ahead and change to action and just call by button

117
00:07:49,850 --> 00:07:50,950
was pressed.

118
00:07:50,960 --> 00:07:55,080
Of course I want to get that second tier out of there and click connect.

119
00:07:55,640 --> 00:07:55,960
OK.

120
00:07:55,970 --> 00:08:00,170
Next make an IB action for the hide ads button.

121
00:08:00,920 --> 00:08:09,350
Go ahead and say hide ads button was pressed and make sure you change it to an action.

122
00:08:09,350 --> 00:08:10,850
I always do that.

123
00:08:10,850 --> 00:08:11,590
There we go.

124
00:08:11,600 --> 00:08:15,090
I'm going to make some space for my codes.

125
00:08:15,090 --> 00:08:16,400
And we're almost done.

126
00:08:16,400 --> 00:08:19,100
We only forgot to add our close button.

127
00:08:19,130 --> 00:08:24,230
So go ahead and click a button drag it onto your view controller right above the image of you there

128
00:08:24,770 --> 00:08:27,100
and go ahead and drop it in place.

129
00:08:27,110 --> 00:08:31,760
Now we're going to change the image from where we don't have an image but we're going to delete the

130
00:08:31,760 --> 00:08:35,850
text and we're going to go ahead and find close button.

131
00:08:36,140 --> 00:08:37,110
That looks pretty good.

132
00:08:37,370 --> 00:08:39,870
So go ahead and set it here.

133
00:08:39,920 --> 00:08:47,150
We're going to go ahead and pinnate zero from the top 16 from the left and it already has a set height

134
00:08:47,180 --> 00:08:51,140
and width so I'm just going to go ahead and pin it there and leave it there.

135
00:08:51,140 --> 00:08:53,510
So let's think did we miss anything.

136
00:08:53,510 --> 00:08:54,760
We have all of our connections.

137
00:08:54,770 --> 00:08:56,430
Oh we didn't connect our close button.

138
00:08:56,450 --> 00:08:57,500
Hello.

139
00:08:57,740 --> 00:08:59,250
Right click and drag.

140
00:08:59,360 --> 00:09:06,580
Go ahead and create an action here and just call Close button was press to ours.

141
00:09:06,590 --> 00:09:07,260
OK.

142
00:09:07,700 --> 00:09:09,340
There we go connect that.

143
00:09:09,620 --> 00:09:18,210
And with this button we can just go ahead and call dismiss animated true and completion is nil.

144
00:09:18,740 --> 00:09:21,810
Super awesome and super easy as well.

145
00:09:21,830 --> 00:09:26,540
We're not going to be able to present this and test that the dismissal just yet.

146
00:09:26,540 --> 00:09:27,680
We will be able to.

147
00:09:27,710 --> 00:09:32,930
But we're going to go ahead and move on to the next video where we're going to set up our table view

148
00:09:32,930 --> 00:09:37,370
here or a collection view I mean to present some static data.

149
00:09:37,400 --> 00:09:44,040
We're also going to basically use that static data to fill our collection view and we're going to set

150
00:09:44,040 --> 00:09:49,400
up did select item an index path so that we can present that view controller with our information.

151
00:09:49,460 --> 00:09:50,520
Very very cool.

152
00:09:50,540 --> 00:09:54,000
Let's head over to the next video and let's get started on that process.