1
00:00:07,250 --> 00:00:10,160
Everybody what's going on this is Caleb with slopes slopestyle.

2
00:00:10,290 --> 00:00:14,730
And in this video we're going to create our X code project we're going to build the user interface of

3
00:00:14,730 --> 00:00:18,480
our application and we're going to wire it up to the appropriate code files.

4
00:00:18,660 --> 00:00:24,930
So go ahead and pull open X code click Create new project and click single view app.

5
00:00:24,950 --> 00:00:25,850
All right.

6
00:00:25,850 --> 00:00:30,230
Now let's go ahead and name this accelerometer Tron.

7
00:00:30,270 --> 00:00:31,470
That sounds fun.

8
00:00:31,500 --> 00:00:32,220
Boom.

9
00:00:32,220 --> 00:00:32,940
Click next.

10
00:00:32,970 --> 00:00:35,870
Click create and boom you've got yourself a project.

11
00:00:35,870 --> 00:00:41,250
So go ahead and uncheck landscape left landscape right just because that's kind of what I want to do

12
00:00:41,250 --> 00:00:47,970
in this app to ensure that we don't rotate and then lose our our accelerometer data or have to deal

13
00:00:47,970 --> 00:00:49,480
with any kind of rotation.

14
00:00:49,570 --> 00:00:50,610
But yeah that's fine.

15
00:00:50,610 --> 00:00:57,150
So go ahead and open maynt storyboard and I'm going to actually delete the View Controller and replace

16
00:00:57,150 --> 00:00:59,920
it with a table view controller so we just have one built in.

17
00:00:59,910 --> 00:01:03,280
Because that's what we're using is a table view controller.

18
00:01:03,420 --> 00:01:10,560
So in order to actually reflect these changes we should change this to say UI Table View Controller.

19
00:01:10,770 --> 00:01:15,730
And I'll just name this list Table View Controller.

20
00:01:16,050 --> 00:01:16,410
OK.

21
00:01:16,470 --> 00:01:21,690
We're going to take that name and we're going to replace it in all of the required places like here

22
00:01:21,690 --> 00:01:22,720
here and here.

23
00:01:22,950 --> 00:01:29,130
And then if we go into main storyboard we can actually choose this and set its identity to our custom

24
00:01:29,130 --> 00:01:30,380
subclass.

25
00:01:31,140 --> 00:01:31,800
Beautiful.

26
00:01:31,800 --> 00:01:36,980
So now what we're going to do is we're going to go ahead and pull this cell down a ways.

27
00:01:36,980 --> 00:01:43,350
Actually let's just do it manually by making this 120 pixels high and then selecting the table view

28
00:01:43,380 --> 00:01:46,640
and setting the row height to match 120 as well.

29
00:01:47,840 --> 00:01:53,630
And now for each cell what we have to do is we actually need to drive drag in a UI image.

30
00:01:53,670 --> 00:01:56,180
OK so dragging a UI image like so.

31
00:01:56,780 --> 00:02:01,760
And go ahead and leave it at that.

32
00:02:02,150 --> 00:02:03,920
OK that looks great.

33
00:02:04,010 --> 00:02:05,770
And go ahead and constrain it.

34
00:02:05,990 --> 00:02:10,780
Like this zero from the top left right and bottom.

35
00:02:11,240 --> 00:02:14,220
And you know that's looking pretty good.

36
00:02:14,390 --> 00:02:16,520
Now we need a label to go on top of that.

37
00:02:16,520 --> 00:02:21,740
So go ahead and type UI label and drag it on top of the image view there.

38
00:02:21,980 --> 00:02:26,960
Well no let's drag it up to the top corner and we're going to actually extend this label the entire

39
00:02:26,960 --> 00:02:34,670
width of the cell and we're going to zero from all sides like so then go ahead and click on the Assistant

40
00:02:34,670 --> 00:02:40,820
Editor center the text there and we're going to change the font to look much cooler.

41
00:02:40,910 --> 00:02:45,530
So I'm going to choose Avenir next and I'm actually going to go ahead and choose heavy italic because

42
00:02:45,530 --> 00:02:52,220
it's a cool looking font and I'm going to set it up to be maybe something like 50 points and it looks

43
00:02:52,220 --> 00:02:53,090
pretty good.

44
00:02:53,480 --> 00:02:59,090
Let's let's go ahead and set a background color of black and we're going to set the opacity down to

45
00:02:59,090 --> 00:03:05,100
maybe 30 percent or so just to give us kind of like a peek behind the image behind it.

46
00:03:05,390 --> 00:03:08,730
And we're going to set the font color actually to be white.

47
00:03:08,870 --> 00:03:14,660
OK and let's just set this to say cameras and that's going to actually go in line with what we're about

48
00:03:14,660 --> 00:03:15,160
to do.

49
00:03:15,170 --> 00:03:21,350
So now that we have our label and our image view properly in there we need to add our assets.

50
00:03:21,350 --> 00:03:25,630
I have six image files that you need to take from the source code.

51
00:03:25,700 --> 00:03:29,810
There is an assets folder download and you can drag in these six images.

52
00:03:29,990 --> 00:03:35,450
And if we want to look through them here we've got the first image here is a nice photo of a camera

53
00:03:36,230 --> 00:03:42,290
a city an animal or a buffalo or a bowl or something some flowers.

54
00:03:42,710 --> 00:03:46,970
We've got a nice flower stand in a city and a cool urban scene.

55
00:03:46,970 --> 00:03:52,280
So what we're going to do is we're going to go into our storyboard here and choose the imagery and just

56
00:03:52,280 --> 00:03:53,810
give it number one.

57
00:03:53,910 --> 00:03:55,220
OK the camera.

58
00:03:55,250 --> 00:03:58,180
But this is where things get interesting.

59
00:03:58,370 --> 00:04:04,970
If I set aspect Phil what it's going to do is it's going to pinch the image on the left and right sides

60
00:04:05,060 --> 00:04:08,150
and let it fill the whole frame of the cell.

61
00:04:08,390 --> 00:04:14,120
But what if I wanted to move my phone around right.

62
00:04:14,120 --> 00:04:15,730
I could only move it up and down.

63
00:04:15,740 --> 00:04:21,290
And the image would slide a parallax effect lets you move in any angle to view a different piece of

64
00:04:21,290 --> 00:04:22,030
the image.

65
00:04:22,220 --> 00:04:26,070
So instead of doing aspect Phil and actually going to do Center.

66
00:04:26,090 --> 00:04:28,070
And it does zoomed in quite a bit.

67
00:04:28,250 --> 00:04:33,230
If you want you could resize the images but if it's centered and zoomed in like this it's going to allow

68
00:04:33,230 --> 00:04:36,860
us to move in all directions and that's why we're doing that actually.

69
00:04:36,860 --> 00:04:43,370
So now what we need to do is we need to go into the subclass here list table view controller and we

70
00:04:43,370 --> 00:04:46,230
need to go ahead and link everything up with Iby outlets.

71
00:04:46,250 --> 00:04:53,000
So go ahead and open up your assistant editor get rid of did receive memory warning and you know what

72
00:04:53,000 --> 00:04:56,320
the cool thing is since this is a table view controller.

73
00:04:56,570 --> 00:05:01,520
We don't need to conform to table view delegate or table view data source.

74
00:05:01,610 --> 00:05:05,260
And we also don't need an outlet for our table view it's already here.

75
00:05:05,330 --> 00:05:14,660
But what I can do is I can go ahead and say hey table view delegate equals self table view data source

76
00:05:14,810 --> 00:05:23,390
equals self and if I do that it's not going to give me an error because I'm using the table view controller

77
00:05:23,420 --> 00:05:24,590
subclass.

78
00:05:24,590 --> 00:05:27,820
But if I want to use this table I'm going to need a few things right.

79
00:05:27,810 --> 00:05:30,690
I'm going to need a number of sections in table view.

80
00:05:30,920 --> 00:05:32,820
And we actually need to override that.

81
00:05:33,440 --> 00:05:40,140
And for our sections we're just going to have one K one section of row so return 1.

82
00:05:40,580 --> 00:05:50,300
Then we're going to have number of rows in section K and this is going to be a number of a number of

83
00:05:50,300 --> 00:05:51,030
cells.

84
00:05:51,050 --> 00:05:52,390
We'll get to that later.

85
00:05:52,610 --> 00:05:55,100
Then we're going to need cell frough an index path.

86
00:05:55,100 --> 00:06:01,600
And this is where we're going to return a configured cell with image and name.

87
00:06:01,760 --> 00:06:02,200
OK.

88
00:06:02,360 --> 00:06:06,020
So like we'll have an image and we'll return a name like cameras.

89
00:06:06,020 --> 00:06:06,360
OK.

90
00:06:06,470 --> 00:06:07,970
Very very cool.

91
00:06:07,970 --> 00:06:12,230
You know what guys this is all we need to do to set up this view controller but we need to go ahead

92
00:06:12,230 --> 00:06:17,630
and move on to the next video where we're going to go ahead and create the parallax cell subclass and

93
00:06:17,690 --> 00:06:21,410
we're going to go ahead and wire that up as well then configure it here on our table view.

94
00:06:21,410 --> 00:06:25,580
So let's go and head over to the next video where we're going to do that now let's build our parallax

95
00:06:25,580 --> 00:06:26,060
cell.

96
00:06:26,090 --> 00:06:26,600
I'll see you there.