1
00:00:07,230 --> 00:00:11,430
Hey everybody what's going on this is callup with slopes dot com and in this video we're going to go

2
00:00:11,430 --> 00:00:16,030
ahead and build the subclass for our parallax cell which is pretty cool.

3
00:00:16,050 --> 00:00:20,920
We're going to go ahead and configure it with the proper information that we need.

4
00:00:20,940 --> 00:00:26,310
We're going to go ahead and connect it to the proper Iby outlets that it needs as well so go ahead and

5
00:00:26,310 --> 00:00:30,380
pull open your project here and what we're going to do let's create some groups.

6
00:00:30,480 --> 00:00:33,340
We need a group for our controller as well as our view folders.

7
00:00:33,360 --> 00:00:36,730
So click newgroup and type controller.

8
00:00:36,960 --> 00:00:43,610
Drag your view controller file in there should be in there and then create a new group and type view

9
00:00:44,410 --> 00:00:49,220
now inside view click and right click and then click new file.

10
00:00:49,340 --> 00:00:51,980
And this is going to be a Cocco touch class.

11
00:00:52,010 --> 00:00:54,580
It's going to be a subclass of UI table view cell.

12
00:00:54,590 --> 00:00:58,640
And we're just going to call it parallax cell.

13
00:00:58,660 --> 00:00:59,370
OK.

14
00:00:59,660 --> 00:01:02,570
So click next then click Create.

15
00:01:02,780 --> 00:01:04,070
And now we have a code file.

16
00:01:04,100 --> 00:01:10,580
So while we're at it let's go back to main storyboard let's select our table view click on the table

17
00:01:10,580 --> 00:01:17,060
view cell and let's go ahead and set up the parallax cell subclassed there type it and then press enter

18
00:01:17,750 --> 00:01:22,670
and then I'm actually going to copy the name there go back to the assistant editor and for the reuse

19
00:01:22,670 --> 00:01:28,070
identifier paste in parallax cell but drop the P at the front to be lowercase.

20
00:01:28,100 --> 00:01:28,670
OK.

21
00:01:29,060 --> 00:01:31,700
So awesome that is now properly linked.

22
00:01:31,700 --> 00:01:35,750
Get rid of the assistant editor here and get rid of set selected as well.

23
00:01:35,750 --> 00:01:43,220
So this is our subclass inside awake from NIB is where we're going to actually set up our parallax code

24
00:01:43,220 --> 00:01:46,260
later like that.

25
00:01:46,850 --> 00:01:51,400
And that's going to be in a function down here called phunk setup parallax.

26
00:01:51,800 --> 00:01:54,710
Without the two Rs they will fix that in just a second.

27
00:01:54,710 --> 00:01:55,400
There we go.

28
00:01:55,700 --> 00:02:00,560
And this is where we're going to go ahead and set up you know the amount that our screen will scroll

29
00:02:00,560 --> 00:02:04,040
and we can customize that however we want we can do a little bit or a lot.

30
00:02:04,040 --> 00:02:08,240
You can even set it up so that the user themselves could set up the amount of parallax which is kind

31
00:02:08,240 --> 00:02:09,360
of cool.

32
00:02:09,500 --> 00:02:14,390
We're going to set up the different kinds of motion and the different values that it's going to pay

33
00:02:14,390 --> 00:02:18,710
attention to and then add it to the UI image view in our cell.

34
00:02:18,740 --> 00:02:22,140
But we have not yet linked up that image view to our subclass.

35
00:02:22,160 --> 00:02:23,560
So let's do that now.

36
00:02:23,810 --> 00:02:28,710
Click on Main storyboard and pull open the assistant editor K..

37
00:02:29,240 --> 00:02:34,770
And if you click on parallax cell you should be able to go to automatic and it should appear here.

38
00:02:34,940 --> 00:02:38,370
But as you can see in my case it is not showing up.

39
00:02:38,390 --> 00:02:42,050
So you're going to have to maybe select it then go back in.

40
00:02:42,050 --> 00:02:44,560
Go to manual and try again.

41
00:02:44,570 --> 00:02:47,520
And if that doesn't work go back to your class.

42
00:02:47,630 --> 00:02:49,240
Go back to your story.

43
00:02:49,390 --> 00:02:55,710
Select it again and if it still doesn't appear you're gonna have to you know save and quit X code actually.

44
00:02:55,760 --> 00:03:05,030
This is a frustrating bug where the proper proper code does not show up or the I guess the proper access

45
00:03:05,030 --> 00:03:07,150
to what you want doesn't show up.

46
00:03:07,190 --> 00:03:08,780
And so we have to go back in.

47
00:03:08,900 --> 00:03:16,330
Reopen it Resul Act are parallax cell and wow and we still do not have access to the project.

48
00:03:16,430 --> 00:03:18,210
That's really frustrating.

49
00:03:19,580 --> 00:03:22,640
So as you can see there it is boom.

50
00:03:22,640 --> 00:03:28,670
So select parallax sell then what we're going to do is we're going to go ahead and right click on our

51
00:03:28,670 --> 00:03:34,970
image view and drag into our parallax cell and just call this image view because no need to really name

52
00:03:34,970 --> 00:03:36,960
it anything else.

53
00:03:37,010 --> 00:03:40,560
Then we need to go ahead and create an outlet for our label as well.

54
00:03:40,610 --> 00:03:46,380
So go ahead and just call this maybe a description label and I'm going to get rid of that.

55
00:03:46,400 --> 00:03:50,520
Second our description label and connected.

56
00:03:50,690 --> 00:03:51,300
OK.

57
00:03:51,680 --> 00:03:53,700
So what we're going to do.

58
00:03:53,810 --> 00:03:54,760
Oh you know what.

59
00:03:54,890 --> 00:03:56,400
It is not like the name image.

60
00:03:56,420 --> 00:04:02,630
I believe that a table view cell already has a property called Image view so we need to name something

61
00:04:02,630 --> 00:04:02,810
else.

62
00:04:02,810 --> 00:04:05,070
How about item image view.

63
00:04:06,600 --> 00:04:09,780
Cool but this is still linked to that old outlet.

64
00:04:09,780 --> 00:04:15,180
So right click on it and get rid of it then go ahead and drag and link that to the image there.

65
00:04:15,180 --> 00:04:18,580
Now it's called item image view and it's referencing the proper outlet.

66
00:04:18,660 --> 00:04:20,730
So that's great.

67
00:04:20,730 --> 00:04:25,290
Our cell is set up now with the proper outlets.

68
00:04:25,380 --> 00:04:32,310
We can then set up parallax and now we just need to actually feed some data into these cells to get

69
00:04:32,310 --> 00:04:35,370
them showing up in our table view at the moment.

70
00:04:35,370 --> 00:04:40,210
We're not actually you know returning anything to our table view so the cells aren't going to show up.

71
00:04:40,230 --> 00:04:45,180
So in the next video we're going to go ahead and create a helper file and in that help file We're going

72
00:04:45,180 --> 00:04:51,700
to actually create an array of images and an array of names that goes with this hand and hand.

73
00:04:51,810 --> 00:04:54,580
And then we're going to be able to configure our cell.

74
00:04:54,690 --> 00:04:57,500
So we're going to head over to that video in just a second.

75
00:04:57,510 --> 00:05:01,970
But before we do that let's go ahead and let's configure our cell with a function.

76
00:05:02,130 --> 00:05:13,260
So in parallax cell type phunk configure cell K and a cell is going to have an image so with image Canham

77
00:05:13,490 --> 00:05:18,780
to are used to an internal predator image meaning we can use the word image in our function.

78
00:05:18,780 --> 00:05:24,080
We don't have to use with image but when we call our function with images the parameter that will show.

79
00:05:24,120 --> 00:05:26,080
So that makes more sense when we're calling it.

80
00:05:26,250 --> 00:05:29,410
But when we're actually implementing it image makes more sense.

81
00:05:29,630 --> 00:05:29,910
OK.

82
00:05:29,940 --> 00:05:36,810
So configure cell with image and description can we'll just do desk for description.

83
00:05:36,810 --> 00:05:43,980
And that's going to be a string then inside the function go ahead and set item image view item image

84
00:05:43,980 --> 00:05:48,500
view image and use our internal parameter of image.

85
00:05:48,750 --> 00:05:56,280
Then go ahead and type description label text and pass in description.

86
00:05:56,280 --> 00:06:01,550
So then back in our table view here when we create our instance of our cell we'll be able to pass in

87
00:06:01,560 --> 00:06:06,850
an image and a description for our label and then we can show all that data dynamically so let's head

88
00:06:06,850 --> 00:06:08,440
to head over to the next.

89
00:06:08,460 --> 00:06:14,040
So let's head over to the next video where we're going to go ahead and create an array of images and

90
00:06:14,040 --> 00:06:15,540
an array of names to go with ourselves.

91
00:06:15,540 --> 00:06:16,750
Just static data.

92
00:06:16,850 --> 00:06:17,930
I'll see you there.