1
00:00:01,550 --> 00:00:05,560
Although everything is working and this point here our no do is working fine.

2
00:00:05,570 --> 00:00:08,930
We can add items and they show up in the list.

3
00:00:08,990 --> 00:00:11,940
Now we are going to go and look at the user interface.

4
00:00:11,960 --> 00:00:15,230
Seems like that is the that is the most fun part.

5
00:00:15,350 --> 00:00:17,920
I think in the development part of things right.

6
00:00:17,930 --> 00:00:20,190
Because we can work with data and everything.

7
00:00:20,210 --> 00:00:26,000
As long as everything the data wise is working the user interface is the more fun name because it gives

8
00:00:26,000 --> 00:00:28,700
you the liberty of being creative and so forth.

9
00:00:28,700 --> 00:00:33,020
There's always a few guidelines here and there but usually the sky's the limit.

10
00:00:33,020 --> 00:00:33,360
Forget good.

11
00:00:33,380 --> 00:00:37,120
So what are we gonna do now is create a row and will look like this.

12
00:00:37,210 --> 00:00:40,030
And of course later we're going to add the just now.

13
00:00:40,040 --> 00:00:44,990
And of course we're going to add all these little trinkets that we have there and other functionality.

14
00:00:45,020 --> 00:00:48,130
Let's start by putting together a very nice row.

15
00:00:48,260 --> 00:00:54,950
At this point you should be able to create your own row because all we will be doing is to change this

16
00:00:54,950 --> 00:00:57,170
text to something better.

17
00:00:57,170 --> 00:01:03,640
OK so what I want you to do is if you can just pause this video and figure out a way to create a nice

18
00:01:03,640 --> 00:01:06,190
row like this shouldn't be that difficult.

19
00:01:06,200 --> 00:01:08,000
Go ahead and positivity and do that.

20
00:01:08,030 --> 00:01:11,810
It's nice to get some exercise so you can actually get better at coding.

21
00:01:11,900 --> 00:01:14,930
Pause the video and I'll see you in a little bit.

22
00:01:17,960 --> 00:01:18,740
I'm still here.

23
00:01:18,860 --> 00:01:19,500
Yes.

24
00:01:19,530 --> 00:01:21,080
Do you pause the video.

25
00:01:21,170 --> 00:01:24,390
Go ahead and do it all right.

26
00:01:24,390 --> 00:01:27,210
I hope you were able to at least get started here.

27
00:01:27,300 --> 00:01:27,500
All right.

28
00:01:27,510 --> 00:01:30,900
So we could go ahead and do all of it here right.

29
00:01:30,900 --> 00:01:36,720
Create our put base instead of a h stack or a group and start changing things.

30
00:01:36,720 --> 00:01:41,700
But we know better now that the best way to do this is to actually remove that code and put in sort

31
00:01:41,700 --> 00:01:43,450
of a different struct.

32
00:01:43,650 --> 00:01:44,640
So they struct here.

33
00:01:44,640 --> 00:01:51,520
I'm gonna call this struct a no do row like this.

34
00:01:51,960 --> 00:01:59,100
It's going to be it's going to inherit from a view obviously and the field here force wants can say

35
00:01:59,360 --> 00:02:00,790
far body.

36
00:02:01,140 --> 00:02:04,950
It's gonna be some view generic that we're gonna be adding there.

37
00:02:05,700 --> 00:02:10,770
But most importantly is that at the top here we have to pass the data that's going to be using because

38
00:02:10,770 --> 00:02:16,050
remember there's no do is going to be passing inside here which means we have to go and get a data which

39
00:02:16,050 --> 00:02:19,290
is in this case just an item from our node list.

40
00:02:19,470 --> 00:02:21,140
There simply can come up here.

41
00:02:21,150 --> 00:02:33,180
I'm going to say at state I'm going to call this just var item var no do item like this.

42
00:02:33,180 --> 00:02:42,260
It's gonna be a string which is going to be empty and I'm going to go ahead and say at State.

43
00:02:42,640 --> 00:02:45,520
And this is going to be var.

44
00:02:45,520 --> 00:02:48,860
No do list internal one.

45
00:02:49,000 --> 00:02:52,960
It's gonna be an array of strings.

46
00:02:52,960 --> 00:02:53,390
All right.

47
00:02:53,720 --> 00:02:53,970
OK.

48
00:02:53,980 --> 00:02:55,480
That is good for now.

49
00:02:55,510 --> 00:03:00,490
And of course everybody here that's where we're going to actually put a text and do all sort of things

50
00:03:00,490 --> 00:03:02,790
that we want for our row.

51
00:03:02,860 --> 00:03:06,900
First of all I'm going to say v stack because I love v stacks.

52
00:03:06,910 --> 00:03:10,870
And in this case I'm going to put it alignment.

53
00:03:10,900 --> 00:03:11,640
Let's see.

54
00:03:11,680 --> 00:03:18,850
I want the alignment to be dots Center and for spacing just give it about two and content.

55
00:03:18,850 --> 00:03:20,140
I don't need anything there.

56
00:03:20,230 --> 00:03:21,460
Very good.

57
00:03:21,580 --> 00:03:23,780
And what are we gonna be doing next here.

58
00:03:23,810 --> 00:03:29,220
When I get rid of this because we don't need since we're not using the preview.

59
00:03:29,220 --> 00:03:38,170
So next I'm going to add a group here and in this group it will put an H stack and I'm going to put

60
00:03:38,170 --> 00:03:43,770
a text inside here which will have something obviously.

61
00:03:43,900 --> 00:03:51,430
In this case I want to pass the item name or in this case here I'm going to pass it out no do item like

62
00:03:51,430 --> 00:04:04,040
this and I'm going to say the color is going to be white and I want to make sure that the multi

63
00:04:06,750 --> 00:04:12,450
line text alignment it's not helping a lot.

64
00:04:12,450 --> 00:04:14,480
It's just gonna be dots leading.

65
00:04:14,490 --> 00:04:14,760
Okay.

66
00:04:14,780 --> 00:04:22,380
I just to make sure that as more lines we end up adding into our view we want to make sure that is always

67
00:04:22,380 --> 00:04:25,220
leading if there's more than one line.

68
00:04:25,680 --> 00:04:27,900
And of course it's always nice when we dealing with text.

69
00:04:27,890 --> 00:04:34,510
Some people have very long to do or no dos in this case to say the line limit.

70
00:04:35,550 --> 00:04:43,790
Give it about two just two lines that limit looks like right.

71
00:04:43,800 --> 00:04:46,860
I should have said equal like that.

72
00:04:47,090 --> 00:04:47,370
All right.

73
00:04:47,370 --> 00:04:50,750
To this point I think we don't even need that right.

74
00:04:50,760 --> 00:04:55,140
So I'm gonna get rid of that because you're just passing the actual item from our list.

75
00:04:55,500 --> 00:04:58,410
But it get so if I take this I'm going to call.

76
00:04:58,410 --> 00:05:01,150
Copy this and come down here.

77
00:05:01,230 --> 00:05:05,300
Just call it there of course I have to pass the actual no do item in this case.

78
00:05:05,310 --> 00:05:06,670
Just gonna be our item.

79
00:05:06,690 --> 00:05:14,950
As such save and run we should be able to hopefully see something a little bit better.

80
00:05:14,970 --> 00:05:15,960
Let's go ahead and add

81
00:05:19,210 --> 00:05:25,090
laugh too much and ah looks like we're not seeing anything.

82
00:05:25,120 --> 00:05:27,160
What is going on.

83
00:05:27,190 --> 00:05:30,750
Something was added I think I made it.

84
00:05:30,990 --> 00:05:31,680
Why.

85
00:05:31,770 --> 00:05:33,430
Let's make a different color here.

86
00:05:34,110 --> 00:05:37,680
Let's say Fred that was very naive of me.

87
00:05:37,680 --> 00:05:39,710
Let's go ahead and run again and see.

88
00:05:39,720 --> 00:05:41,430
We should be able to see things right now.

89
00:05:41,460 --> 00:05:41,720
OK.

90
00:05:41,760 --> 00:05:42,480
Let's.

91
00:05:43,010 --> 00:05:43,570
Let's see.

92
00:05:43,590 --> 00:05:45,180
Bye cars.

93
00:05:45,180 --> 00:05:45,570
There we go.

94
00:05:45,570 --> 00:05:47,650
Now you can see there is red.

95
00:05:47,690 --> 00:05:48,990
You can say something else.

96
00:05:48,990 --> 00:05:51,250
And the thing is are actually being added.

97
00:05:51,840 --> 00:05:57,660
But the main goal here is of course to make sure that the actual row has a nice background something

98
00:05:57,660 --> 00:05:58,230
like this.

99
00:05:58,230 --> 00:06:02,450
That this is the main item that we're going to be creating.

100
00:06:02,450 --> 00:06:08,460
To do that is very simple We can either go to our group and start adjusting things with modifiers or

101
00:06:08,460 --> 00:06:12,840
we can just go to our H stack depends on what is is that it will trying to do here.

102
00:06:13,140 --> 00:06:20,700
I'm actually going to go a level up to our v stack and click here you can see the highlights there and

103
00:06:20,730 --> 00:06:22,080
I'm going to add a few things here.

104
00:06:22,080 --> 00:06:29,700
So the first thing I'm going to do and say that background and when I see color pink like this if you

105
00:06:29,700 --> 00:06:37,160
save this and give it a run we should be able hopefully to see something better just as gibberish there

106
00:06:37,160 --> 00:06:38,560
and you can see it's looking good too.

107
00:06:38,570 --> 00:06:49,440
Now it's time for us to change this to white because now we have that nice contrast the background there.

108
00:06:49,640 --> 00:06:50,210
Very good.

109
00:06:50,210 --> 00:06:52,190
It's looking nice.

110
00:06:52,610 --> 00:06:53,000
All right.

111
00:06:53,000 --> 00:06:55,610
Not what we are looking for real or expecting.

112
00:06:55,610 --> 00:07:03,040
What are we going to do next is we're going to add a rectangle clip shape there and when say dot clip

113
00:07:03,050 --> 00:07:04,120
shape.

114
00:07:04,130 --> 00:07:09,350
And when I pass a rounded rectangle that's very handy because it can just go ahead and pass our corner

115
00:07:09,350 --> 00:07:15,260
radius there to be about five again and let's save and run

116
00:07:22,580 --> 00:07:23,770
OK and enter.

117
00:07:23,780 --> 00:07:24,410
Very nice.

118
00:07:24,410 --> 00:07:28,730
It's very small but at least you can see that something is actually happening there.

119
00:07:28,880 --> 00:07:34,910
So let's go inside of our group now and walk a little bit more here.

120
00:07:34,910 --> 00:07:38,600
So we are wanting to have something that looks like this.

121
00:07:38,600 --> 00:07:41,010
So we're gonna have this item here which we've added.

122
00:07:41,110 --> 00:07:43,450
We're going to add later this added just now.

123
00:07:43,490 --> 00:07:45,900
And then of course we're going to add this image there.

124
00:07:45,920 --> 00:07:49,530
So let's go ahead and start putting that together in place at least.

125
00:07:49,580 --> 00:07:55,520
So right after our item there's no do here inside of our H stack there.

126
00:07:55,530 --> 00:08:01,820
I'm going to add a spacer because I'm going to add something else below that is spacer forces everything

127
00:08:01,820 --> 00:08:06,360
inside of this particular container group to spread out.

128
00:08:06,710 --> 00:08:09,110
So in this case here I'm going to go ahead and add image.

129
00:08:09,830 --> 00:08:18,530
So I'm going to also use a system image name here which I already know in this case here I want a square

130
00:08:20,790 --> 00:08:23,350
like that say padding.

131
00:08:23,450 --> 00:08:26,270
Just giving her general padding.

132
00:08:26,820 --> 00:08:32,940
And then while I'm here I'm going to add another spacer because there's three items here and then I'm

133
00:08:32,940 --> 00:08:37,500
gonna go ahead and add something else which is going to be time I go.

134
00:08:37,500 --> 00:08:39,220
So in this case here I just want to add.

135
00:08:39,360 --> 00:08:42,450
This time I go text.

136
00:08:42,450 --> 00:08:49,770
So for that I'm going to add a h stack here because I want to align things differently inside there

137
00:08:50,610 --> 00:08:58,270
and for alignment I'm want to make this center in for spacing about 3.

138
00:08:58,470 --> 00:09:01,360
And no need for content whatsoever.

139
00:09:01,360 --> 00:09:04,410
And inside here this is where I'm going to add something.

140
00:09:04,440 --> 00:09:13,660
What I'm going to add here is a text that will say something like time added like this.

141
00:09:14,140 --> 00:09:15,200
OK.

142
00:09:15,240 --> 00:09:17,100
And for this text here while I'm here.

143
00:09:17,130 --> 00:09:24,810
Let's go ahead and do a few things where I'm going to add a color that it's going to be not white.

144
00:09:25,110 --> 00:09:34,380
And I'm going to see a italic because I want this to be a italic and I want padding that all to be around

145
00:09:34,400 --> 00:09:39,100
for just adjusting things here and there.

146
00:09:39,120 --> 00:09:40,040
Very good.

147
00:09:40,080 --> 00:09:47,760
Let's save these and run and see why we'll conspire little world enter and voila.

148
00:09:47,760 --> 00:09:52,840
Now it looks looks much much better but things are not necessarily looking the way we want.

149
00:09:52,860 --> 00:09:55,980
We still have some issues here which we'll need to address.

150
00:09:55,980 --> 00:10:02,510
First of all these H stack here should be actually outside of our group because I wanted to be below

151
00:10:02,520 --> 00:10:07,990
so I'm going to cut this and put outside there.

152
00:10:07,990 --> 00:10:10,170
Let's save these and see what's going to happen.

153
00:10:11,320 --> 00:10:12,860
So it's gonna be below everything.

154
00:10:14,460 --> 00:10:14,940
And voila.

155
00:10:14,970 --> 00:10:16,110
This is exactly what I want.

156
00:10:16,170 --> 00:10:19,170
And notice that this guy here is in the middle there.

157
00:10:19,170 --> 00:10:21,810
I want both of them to actually be to the right.

158
00:10:22,060 --> 00:10:23,220
Well how do we do that.

159
00:10:23,220 --> 00:10:31,020
Well I'm gonna get rid of these spacer there because I don't want any spacer to do anything after the

160
00:10:31,020 --> 00:10:31,890
image.

161
00:10:31,920 --> 00:10:38,040
I do however inside of our H space here I want to put that spacer there which will force this text to

162
00:10:38,040 --> 00:10:39,050
go all the way to the right.

163
00:10:39,060 --> 00:10:47,990
In fact if I save this and run you'll see just that in Whyalla is all the way to the right.

164
00:10:47,990 --> 00:10:55,760
Exactly as I want and also it pushed in this case our image Square they're all way to the right as well

165
00:10:55,910 --> 00:11:00,020
because we have this spacer but it will so have this space spaces so it goes ahead and pushes everything

166
00:11:00,290 --> 00:11:01,670
to the other side.

167
00:11:01,670 --> 00:11:07,010
And what I'm going to do with this H stack here because I want to give some sort of padding at the bottom

168
00:11:07,010 --> 00:11:17,240
here just a little bit when I say dot padding and I want the actual bottom edge to have about five padding.

169
00:11:17,240 --> 00:11:22,910
So just the small things here nothing that would break your application of course but it's just going

170
00:11:22,910 --> 00:11:23,540
to help you a little bit.

171
00:11:23,540 --> 00:11:23,750
OK.

172
00:11:23,750 --> 00:11:25,040
You can see there's a little padding there.

173
00:11:25,040 --> 00:11:25,730
Very good.

174
00:11:25,740 --> 00:11:31,360
Now if I wanted to give it more padding around the entire view here I can come up.

175
00:11:31,400 --> 00:11:33,400
Let's see outside here.

176
00:11:33,410 --> 00:11:36,650
This is our v stack.

177
00:11:36,650 --> 00:11:47,200
I could come down here and say that padding like this and run should give us a general padding for everything.

178
00:11:47,340 --> 00:11:49,290
Now gave a general padding for everything.

179
00:11:49,320 --> 00:11:54,330
We don't want for everything because now notice that everything is constrained to the right into the

180
00:11:54,330 --> 00:11:55,140
left.

181
00:11:55,200 --> 00:12:02,730
What we can do actually can get rid of that and find where exactly I can just go ahead and give that

182
00:12:03,060 --> 00:12:13,600
padding their.

183
00:12:13,610 --> 00:12:14,120
There we go.

184
00:12:14,120 --> 00:12:20,960
He gave us some padding there maybe it's a little bit too much but I can also go ahead and say something

185
00:12:21,560 --> 00:12:25,150
that all and specify I want just a pattern of four.

186
00:12:25,810 --> 00:12:26,420
That's right.

187
00:12:26,450 --> 00:12:33,060
This we can always play around with this as you know by now.

188
00:12:33,090 --> 00:12:33,440
Nice.

189
00:12:33,480 --> 00:12:38,060
I like this much better because you can see now the edges are kind of little bit freer.

190
00:12:38,130 --> 00:12:38,670
Oh there we go.

191
00:12:38,670 --> 00:12:44,780
And just like that we're able to put together a very nice user interface here especially our row.

192
00:12:44,820 --> 00:12:50,310
It has a collar it has personality and it's looking looking much better and did take that long or that

193
00:12:50,310 --> 00:12:56,430
much in the next video we'll continue with our progress here so to finalize our user interface and hopefully

194
00:12:56,430 --> 00:13:03,600
start actually adding more functionality such as delete on swipe and also make sure that when they click

195
00:13:03,720 --> 00:13:04,580
each row.

196
00:13:04,710 --> 00:13:08,830
That would mean that they know dualist is actually checked or meaning it's done.

197
00:13:08,930 --> 00:13:09,390
All right.

198
00:13:09,430 --> 00:13:10,590
Gonna do that next time.