1
00:00:07,000 --> 00:00:11,920
Hello again this is Caleb with Deb's slopes dot com and in this video we're going to go ahead and create

2
00:00:12,100 --> 00:00:14,760
some dummy data to load into our table view.

3
00:00:14,800 --> 00:00:20,260
We're going to create six instances of you image load in our images from our assets and then we're going

4
00:00:20,260 --> 00:00:24,900
to create an array of names to go with each cell based on the item in the picture.

5
00:00:24,940 --> 00:00:32,030
So go ahead and pull open your project right click on accelerometers on and click new file.

6
00:00:32,200 --> 00:00:34,160
This can be a swift file.

7
00:00:34,210 --> 00:00:34,970
Click next.

8
00:00:34,990 --> 00:00:41,280
And I'm just going to call this maybe images plus names.

9
00:00:41,290 --> 00:00:42,190
OK.

10
00:00:42,370 --> 00:00:47,890
And that will create a nice file here images plus names got swift and I just closed my assistant editor

11
00:00:47,890 --> 00:00:49,680
there because I don't need it.

12
00:00:49,930 --> 00:00:55,940
And so now we're going to create six instances of UI image passing in the data from our assets.

13
00:00:56,150 --> 00:01:02,650
And so because of that we're going to need UI kit to deal with UI image so passen you ikat And now go

14
00:01:02,650 --> 00:01:04,630
ahead and create some properties.

15
00:01:04,900 --> 00:01:06,660
Var camera.

16
00:01:06,790 --> 00:01:08,890
OK if you remember we have an image of a camera.

17
00:01:09,130 --> 00:01:14,800
And I know this but you don't necessarily need to have this memorized but the file name for the camera

18
00:01:14,830 --> 00:01:15,790
image is one.

19
00:01:15,820 --> 00:01:21,480
So we can type you image and there is a way to create a UI image from its file name.

20
00:01:21,520 --> 00:01:24,400
So go ahead and type UI image named.

21
00:01:24,550 --> 00:01:26,720
And we're going to just pass in the Name one.

22
00:01:26,940 --> 00:01:27,270
OK.

23
00:01:27,280 --> 00:01:33,760
Now this is a way to make an optional UI image but since we know for sure that we have a file with that

24
00:01:33,760 --> 00:01:35,850
name we're going to force unwrap it.

25
00:01:36,040 --> 00:01:39,420
We're going to do the same thing here I'm actually going to copy and paste this five times.

26
00:01:39,610 --> 00:01:44,760
One two three four five and I'm just going to update the name and the number with the proper image.

27
00:01:44,750 --> 00:01:46,800
So number two was city.

28
00:01:47,050 --> 00:01:50,930
OK so let's replace city there with number two animal.

29
00:01:51,070 --> 00:01:52,910
I'll just say that maybe animals.

30
00:01:53,120 --> 00:02:02,090
OK that will be number three flowers was number four the next one was the standard the flower Stansel.

31
00:02:02,110 --> 00:02:06,050
Just call it stand and number six was the urban scene.

32
00:02:06,100 --> 00:02:08,850
And that's Number Six kind of an inner city basketball scene.

33
00:02:08,860 --> 00:02:10,270
Pretty cool.

34
00:02:10,270 --> 00:02:14,370
Now what we're going to do is we're going to create an array and just pass in all these images so type

35
00:02:14,420 --> 00:02:28,030
var image array equals and go ahead and pass them all in camera city animals flowers stand and urban.

36
00:02:28,740 --> 00:02:29,000
OK.

37
00:02:29,020 --> 00:02:34,930
Now since this is declared outside of any class we have access to it all throughout our project which

38
00:02:34,930 --> 00:02:36,300
is pretty amazing.

39
00:02:36,310 --> 00:02:41,200
Next we're going to go ahead and create an array of strings that are capitalized that go with each of

40
00:02:41,200 --> 00:02:46,390
these technically I guess we could use the variable names but I'd rather just use string values.

41
00:02:46,390 --> 00:02:51,620
So go ahead and type var name array and go ahead and create an array like so.

42
00:02:51,970 --> 00:02:56,530
And we're going to create some strings so you can create the quotes there and a comma.

43
00:02:56,770 --> 00:03:01,760
And I'm actually just going to go ahead and copy and paste this five times just like I pasted the variables.

44
00:03:01,780 --> 00:03:02,470
OK.

45
00:03:02,830 --> 00:03:07,700
Now since the first item is camera that's going to be a cell that would show camera.

46
00:03:07,720 --> 00:03:17,950
Maybe if this was a shopping app cameras then maybe city than animals than flowers.

47
00:03:17,950 --> 00:03:23,020
After that we'll be stands like maybe we can show people the nearest flower stands.

48
00:03:23,050 --> 00:03:27,910
And then Urban looks like I added a little bit too many there.

49
00:03:28,270 --> 00:03:29,360
And beautiful.

50
00:03:29,500 --> 00:03:32,150
So now we have data.

51
00:03:32,230 --> 00:03:35,780
We have our images and we have the names that go along with them.

52
00:03:35,830 --> 00:03:39,880
So we're now at a great point to go ahead and set up our table view.

53
00:03:39,940 --> 00:03:46,810
So go into list table view controller and for the number of cells we can return the number of items

54
00:03:46,870 --> 00:03:47,940
in the image array.

55
00:03:47,950 --> 00:03:51,180
So go ahead and type return whip's return.

56
00:03:51,220 --> 00:03:51,790
Image array

57
00:03:54,520 --> 00:03:59,530
image array count and if you build and run you'll see that we do have access to that because it's not

58
00:03:59,530 --> 00:04:03,210
defined in any class so we have access to it universally.

59
00:04:03,250 --> 00:04:08,200
Now what we're going to do is we're going to go ahead and create a cell and we're going to go ahead

60
00:04:08,200 --> 00:04:12,490
and use our parallax cell reuse identifier to actually use that.

61
00:04:12,490 --> 00:04:18,630
So go ahead and safely create a cell by typing guard let sell equals table view.

62
00:04:18,640 --> 00:04:24,880
Dequeue reusable cell with identifier What's the identifier boom parallax cell.

63
00:04:24,940 --> 00:04:32,140
So go ahead and type that para lacks cell K for index path.

64
00:04:32,140 --> 00:04:33,820
We get that from our function.

65
00:04:33,820 --> 00:04:40,390
So pass in the index path for that cell and we need to actually explicitly cast this as an instance

66
00:04:40,750 --> 00:04:47,360
of parallax cell by using an optional unwrap or not unwrapping an optional casting there.

67
00:04:47,380 --> 00:04:56,200
So if for some reason this doesn't work we're going to go ahead and return an empty table view cell

68
00:04:57,220 --> 00:04:58,030
just like that.

69
00:04:58,330 --> 00:04:58,840
OK.

70
00:04:59,110 --> 00:05:05,050
So now we have an instance of parallax cell that's being reasonably Decoud from our table view which

71
00:05:05,050 --> 00:05:08,750
is want to learn more about that I would recommend that you go look it up it really really cool stuff.

72
00:05:09,070 --> 00:05:15,930
And now all we need to do is call sell and configure sell with you I image and description.

73
00:05:16,210 --> 00:05:16,620
Check it out.

74
00:05:16,620 --> 00:05:17,620
That's our function.

75
00:05:17,660 --> 00:05:19,670
Now where are we going to get the UI image.

76
00:05:19,690 --> 00:05:22,030
This this function here self-growth index path.

77
00:05:22,030 --> 00:05:27,460
If you don't remember basically what it's doing is it's looping through our table view we said hey there

78
00:05:27,460 --> 00:05:30,240
is as many cells as there are items in this array.

79
00:05:30,310 --> 00:05:33,640
So there are six items for each of those items.

80
00:05:33,640 --> 00:05:35,400
It's going to go ahead and create a cell.

81
00:05:35,470 --> 00:05:41,170
It's going to loop through and it's going to go ahead and set a cell for each of those items that we

82
00:05:41,170 --> 00:05:42,270
said there is.

83
00:05:42,310 --> 00:05:48,400
So what we can do is actually we can use the same count let's say that our index path is zero.

84
00:05:48,470 --> 00:05:53,710
So the first item is that path 0 we want to pull out the image at path zero as well.

85
00:05:53,710 --> 00:05:55,630
And the description at path 0.

86
00:05:55,630 --> 00:06:01,330
So what we can do is we can say hey I want to go into the image array and I want to pull out the item

87
00:06:01,350 --> 00:06:07,290
an index path dot row because that's that's actually the numbers 0 for the image array.

88
00:06:07,540 --> 00:06:10,750
So I can pull out the for the cell at row 0.

89
00:06:10,780 --> 00:06:14,800
I can plot the image at row 0 and the name using name array.

90
00:06:14,800 --> 00:06:19,330
So go ahead and call name array and then type index path dot row.

91
00:06:19,630 --> 00:06:25,960
And now we have an image from the image array and we have a description from the name array at the exact

92
00:06:25,960 --> 00:06:28,120
right place for ourselves.

93
00:06:28,120 --> 00:06:30,000
Pretty cool stuff.

94
00:06:30,010 --> 00:06:36,400
So now all we need to do now that we have properly configured it is simply type return cell and check

95
00:06:36,400 --> 00:06:38,590
it out that air goes away it stops yelling at us.

96
00:06:38,590 --> 00:06:39,660
How rude.

97
00:06:40,000 --> 00:06:42,070
And now we can build our app and we can go check it out.

98
00:06:42,070 --> 00:06:47,890
So build and run the app is going to go ahead and build to my phone and I'll show you in quick time

99
00:06:47,890 --> 00:06:50,000
and just a moment as soon as it opens.

100
00:06:50,500 --> 00:06:54,940
But yeah guys we are super duper close in the next video we're going to write the function that's going

101
00:06:54,940 --> 00:07:01,180
to allow us to actually use our parallax effect with the accelerometer and gyroscopes.

102
00:07:01,180 --> 00:07:02,370
Very cool stuff.

103
00:07:02,410 --> 00:07:05,880
So pull it open here and we actually were just getting a black screen.

104
00:07:05,890 --> 00:07:07,140
I'm getting that on my phone too.

105
00:07:07,150 --> 00:07:10,690
And it appears that we have not set a starting visi.

106
00:07:10,750 --> 00:07:11,800
That's right.

107
00:07:11,800 --> 00:07:17,080
Remember at the beginning of this section we deleted the initial table or the initial view controller

108
00:07:17,080 --> 00:07:19,430
and replaced it with the table view controller.

109
00:07:19,480 --> 00:07:23,730
So to fix this problem just select the view controller and then tick the box.

110
00:07:23,730 --> 00:07:29,650
Initial view controller in the attributes inspector so ticked that box and you'll see that little arrow

111
00:07:29,650 --> 00:07:30,770
pops up there.

112
00:07:30,790 --> 00:07:37,490
Now we can build and run and pull open the simulator and see everything that we want to see hopefully.

113
00:07:37,520 --> 00:07:38,910
Let's let's check it out.

114
00:07:38,920 --> 00:07:42,270
So let's pull up in the simulator here and oh look at that.

115
00:07:42,280 --> 00:07:45,750
There's our images there is our labels.

116
00:07:46,030 --> 00:07:48,800
Everything looks amazing guys so good.

117
00:07:49,240 --> 00:07:49,590
All right.

118
00:07:49,600 --> 00:07:55,300
So we are super duper close to getting our parallax effect in there so let's actually head over to the

119
00:07:55,300 --> 00:07:56,080
next video.

120
00:07:56,320 --> 00:08:00,970
Let's write the parallax function and we're going to call it on all the image views in this cell.

121
00:08:00,970 --> 00:08:04,790
So let's head over to the next video and let's do that now.