1
00:00:00,360 --> 00:00:02,230
We're almost done with this puzzle.

2
00:00:02,230 --> 00:00:06,480
There's just one piece missing and
that piece is the Tableau, but

3
00:00:06,480 --> 00:00:11,090
it won't be missing for long and after
it's done we'll have a full working UI for

4
00:00:11,090 --> 00:00:12,778
our Solitaire app.

5
00:00:12,778 --> 00:00:16,260
First things first,
we're going to need a new class.

6
00:00:16,260 --> 00:00:19,140
So let's create a new class
named Tableau Pile View.

7
00:00:21,000 --> 00:00:23,577
And this class is going
to be responsible for

8
00:00:23,577 --> 00:00:25,953
all the cards in a certain Tableau Pile.

9
00:00:28,978 --> 00:00:32,057
For constructor parameters,
we're going to need a context,

10
00:00:36,599 --> 00:00:40,611
And also an index to tell us which
of the seven Tableau Piles this is.

11
00:00:44,267 --> 00:00:46,429
And just like with foundation pile view,

12
00:00:46,429 --> 00:00:48,730
this index is going to
need to be a property.

13
00:00:51,160 --> 00:00:53,590
Then let's make this
extend relative layout,

14
00:00:59,649 --> 00:01:02,111
And we'll need to pass along
our context parameter.

15
00:01:05,868 --> 00:01:11,332
Next, iinside the class let's create
our init and update functions.

16
00:01:15,740 --> 00:01:20,680
Our TableauPileViews are going to work
a bit differently than our other views.

17
00:01:20,680 --> 00:01:23,200
Instead of actually updating the views,

18
00:01:23,200 --> 00:01:27,051
we're just going to remove all the views
and then rebuild the Tableau from scratch.

19
00:01:28,300 --> 00:01:32,622
So inside our init function let's call
a function that doesn't exist yet

20
00:01:32,622 --> 00:01:33,676
named addViews.

21
00:01:36,199 --> 00:01:38,303
And let's use Alt+Enter to create it.

22
00:01:41,310 --> 00:01:43,283
And then put it below our update function.

23
00:01:53,008 --> 00:01:55,426
Now, in the update function,

24
00:01:55,426 --> 00:02:00,550
let's just call removeAllViews,
which removes all the views.

25
00:02:01,680 --> 00:02:04,015
And follow that up with
a call to to addViews.

26
00:02:05,240 --> 00:02:10,290
And now, the only problem we need
to solve is this addViews function.

27
00:02:10,290 --> 00:02:11,878
Inside the addViews function,

28
00:02:11,878 --> 00:02:15,360
let's start by getting a reference
to the cards in this Tableau Pile.

29
00:02:16,530 --> 00:02:24,287
Val cards = GameModel.tableauPiles Add

30
00:02:24,287 --> 00:02:28,180
this index.cards.

31
00:02:28,180 --> 00:02:33,530
Then, lets add an image view to the screen
for each card in our cards list.

32
00:02:33,530 --> 00:02:37,255
And let's use the forEachIndexed function
to make sure we're going through the main

33
00:02:37,255 --> 00:02:38,113
order.

34
00:02:38,113 --> 00:02:44,980
So cards.forEachIndexed i,
card are fine variable names.

35
00:02:46,790 --> 00:02:49,145
And then inside the loop
let's add the imageView.

36
00:02:52,230 --> 00:02:55,840
And inside the imageView let's
start by setting the y property.

37
00:02:58,090 --> 00:03:03,000
And the y property is just the vertical
position of this view within its parent.

38
00:03:03,000 --> 00:03:07,710
If we set y to 50 pixels,
then the top of this imageView

39
00:03:07,710 --> 00:03:11,650
would be 50 pixels below the top
of this relative layout.

40
00:03:13,120 --> 00:03:16,820
What we want to do here is sort
of cascade the cards down so

41
00:03:16,820 --> 00:03:18,590
that we can see a little bit of each one.

42
00:03:19,760 --> 00:03:25,510
To do this, let's set y = i x 25 dip.

43
00:03:28,002 --> 00:03:31,282
And use Alt+Enter to import that method.

44
00:03:31,282 --> 00:03:33,719
And we'll need to cast this to a float.

45
00:03:35,399 --> 00:03:38,620
So put parentheses around it and
then type toFloat.

46
00:03:40,330 --> 00:03:42,040
Moving on to the image resource.

47
00:03:44,348 --> 00:03:47,913
If the card we're evaluating is faceUp,

48
00:03:49,055 --> 00:03:53,162
Then let's return the resource ID for
that card.

49
00:03:56,429 --> 00:03:59,015
Otherwise let's return
our cardBackDrawable.

50
00:04:01,890 --> 00:04:06,878
Then for the onClick function, All we need

51
00:04:06,878 --> 00:04:11,563
to do is call
a gamePresenter.onTableauTap and

52
00:04:11,563 --> 00:04:16,932
pass in the index for
this Tableau Pile which is index and

53
00:04:16,932 --> 00:04:20,260
the index for this card which is I.

54
00:04:21,540 --> 00:04:24,200
We should also change the layout
params of this imageView

55
00:04:24,200 --> 00:04:28,250
to make sure that it's the same
size as the other cards.

56
00:04:28,250 --> 00:04:31,560
After our imageView function
let's add a call to lparams,

57
00:04:33,211 --> 00:04:37,720
Which doesn't seem to exist,
which I guess is true for

58
00:04:37,720 --> 00:04:43,050
RelativeLayouts, but
it's not true for _RelativeLayouts.

59
00:04:43,050 --> 00:04:46,182
So let's change this to be
extending _RelativeLayout

60
00:04:50,021 --> 00:04:54,580
And then we need to pass in card width for
the width and card height for the height.

61
00:04:55,730 --> 00:05:00,690
But unfortunately, we don't have access
to those properties inside this class.

62
00:05:00,690 --> 00:05:04,902
So over in MainActivity, one thing we
could do would be to pull these two

63
00:05:04,902 --> 00:05:09,626
properties, And

64
00:05:09,626 --> 00:05:12,720
make them scoped to the package
instead of the class.

65
00:05:14,810 --> 00:05:18,880
And this almost works except
we need to have a context

66
00:05:18,880 --> 00:05:22,305
in order to use the displayMetrics,
or the dip function.

67
00:05:24,300 --> 00:05:28,480
To fix this, let's just make these
extension properties on context.

68
00:05:28,480 --> 00:05:32,998
So Context.cardWidth Alt+Enter
to import context, and

69
00:05:32,998 --> 00:05:37,076
let's tell cardWidth when
this is going to be an int.

70
00:05:39,419 --> 00:05:42,884
And then let's add a getter
which returns the cardWidth.

71
00:05:46,076 --> 00:05:49,292
And let's do the same thing for
cardHeight,

72
00:05:49,292 --> 00:05:53,955
make it an extension property on context,
make it return an int,

73
00:05:57,578 --> 00:06:00,020
And add a getter to
return the current high.

74
00:06:02,110 --> 00:06:06,649
Back in the Tableau Pile View, we should
now be able to set our lparams by

75
00:06:06,649 --> 00:06:11,939
using context.cardWidth and

76
00:06:11,939 --> 00:06:15,800
context.cardHeight.

77
00:06:15,800 --> 00:06:19,750
Finally, we just need to add our
view manager extension function.

78
00:06:19,750 --> 00:06:26,201
Let's copy the one from
foundationPileView, And

79
00:06:26,201 --> 00:06:27,312
paste it in at the bottom.

80
00:06:31,538 --> 00:06:33,388
Then let's change the function names.

81
00:06:33,388 --> 00:06:38,476
So tableauPileView and
then I'll copy this and

82
00:06:38,476 --> 00:06:41,152
paste it over these two.

83
00:06:44,326 --> 00:06:48,500
And since they both take an index
parameter, we're done with the class.

84
00:06:49,650 --> 00:06:50,970
We're almost there.

85
00:06:50,970 --> 00:06:55,240
In the next video, we'll finish adding
our tableauPileView to the screen and

86
00:06:55,240 --> 00:06:56,260
play a little solitaire.