Updating the Screen9:26 with Ben Deitch
It's about time we see something happen! In this video we'll update the screen so we can see some of the action!
It's about time we see something happen on the screen. 0:01 If we tap on the deck enough, it should eventually become empty and 0:04 switch to the blue card. 0:07 But for that to happen, we need to call our deck views update method 0:09 inside main activities update method. 0:13 Let's start in main activity, by creating a new 0:15 mutable variable at the top of the class to represent our deck view. 0:18 Var deckView. 0:23 And for the type, let's specify DeckView?. 0:28 Right when MainActivity is initialized, we don't yet have a context. 0:32 And we definitely haven't called on create yet. 0:38 So there's no way for us to have an instance of DeckView right from the start. 0:41 So we'll set it to null for now. 0:46 Now that we've got our DeckView property, 0:49 let's set it equal to our DeckView function. 0:51 And then inside the update function and main activity, let's call deckView.update. 1:00 And now we need to decide whether to use a safe call or a non null asserted call. 1:10 This update function is triggered by the game presenter whenever a user takes 1:15 an action, and users can only take actions on views. 1:19 Which means at this point, the views should exist so we should be fine and 1:24 asserting that our deck view is not normal. 1:28 All right now let's run the app. 1:33 And then tap the deck a bunch of times, AKA, exactly 24 times. 1:36 And there we go, we've emptied the deck and we see the blue card. 1:49 One more tap, and we've recycled the waste pile into the deck. 1:54 Now that we've got our deck view out of the way, let's move on to our waste pile. 2:00 Let's create a new class named waste pile view. 2:04 And then let's make it extend image view. 2:17 And then let's add the context parameter just like we had to do last time. 2:23 Next, let's add our init function. 2:38 And inside, let's set the imageResource to our emptyPileDrawable. 2:43 Then, we just need to add an onClick listener. 2:51 And inside, all we need to do is call GamePresenter.onWasteTap. 2:55 With our new function finished, it's time to move on to the update function. 3:00 Let's type fun update, and add our brackets. 3:07 And inside this function, if there are cards in the waste pile, 3:12 we need to show the top card. 3:16 Otherwise we need to show an empty pile. 3:18 Let's start by getting a list of which cards are in the waste pile with. 3:21 Val cards equals game model .waste pile. 3:25 Then let's set image resource Equal to the result of 3:31 if (cards.size > 0 and 3:37 then let's type two spaces for now and 3:42 then add our else and if it is equal to zero it should show the emptyPileDrawable. 3:47 Now we just need to find a way to get the right image resource for a card. 3:53 So back in our two spaces, 3:58 let's call a function that doesn't exist yet 4:01 called getResIdForCard(cards.last()). 4:07 Then let's use Alt+Enter to create this method. 4:13 And let's change the parameter name from last to card. 4:19 Inside this function we're going to need to be able to tell 4:23 Android the name of the resource we want to show. 4:25 Luckily, our resources have nice predictable names. 4:29 They're all the word card followed by the suit followed by the value. 4:33 So let's start by creating a new val named resource name. 4:41 And let's set it equal to, and quotes, the word card. 4:47 Followed by a string template to get the card suit. 4:53 Card.suit. 4:59 And then another string template for 5:01 the cards value, which we want to get by using our cards map. 5:03 So cardsMap[card.value]. 5:09 Finally, at the end, let's add a call to 5:17 .toLowerCase, to make sure that everything matches. 5:20 Then, on the next line, let's return 5:26 context.resources.getIdentifier, and 5:31 then pass in the resource name for the name 5:37 drawable as a string for the type, And 5:46 context.packageName for the package, nice. 5:52 We're probably going to want this to getResIdForCard method and 6:00 more than just this one class. 6:04 So instead of having this method be private to our waste pile view, 6:06 let's get rid of the private keyword. 6:11 And then cut this function and paste it into main 6:16 activity, below our empty pile drawable. 6:22 For the last step, since it's our views that need the resource ID's let's make 6:27 this an extension function on view. 6:31 And there we go back and wastePileView all we have left is adding our 6:36 Ankle View call just like we did with our DeckView, but before we get to that. 6:41 Let's take another look at our DeckView. 6:47 At the bottom of our DeckView, we have the DeckView factory, 6:51 where we take in a context and return an instance of deck view. 6:54 And just like any other lambda expression with one parameter, 6:59 we are allowed to omit that parameter and instead just use the it keyword. 7:02 Well not exactly. 7:13 We can only do that if Cullen is able to figure out what it is, 7:15 and Cullen can't do that here. 7:20 But what we can do is cut this lambda expression, and 7:23 paste it in as the first parameter to anko view. 7:27 This first parameter is a function with one context parameter. 7:32 So here, it has to be a context and everything works. 7:37 Meaning we no longer need our deck view factory, sweet. 7:42 Now, to finish out our waste pile view let's copy this ankoView view from 7:48 deckView, and then in our wastePileView, let's paste it in below the class. 7:53 Then let's change the function name from deckView to wastePileView. 8:02 And change the init function to be an extension function on WastePileView. 8:08 And lastly, 8:14 let's change the factory function to return an instance of WastePileView. 8:15 Now that we've finished our WastePileView, let's head back to main activity and 8:20 create a new property to store it. 8:24 Let's create it right below deck view And name it wastePileView. 8:28 Give it a type of WastePileView?, and set it equal to null. 8:35 Then inside our layout let's delete the imageView below our deck view And 8:41 then set our new wastePileView property equal to our new wastePileView. 8:47 Then let's add a call to lparams and pass in the code dimensions. 8:55 Finally, inside the update method lets add 9:05 a null asserted call to wastePileView.update. 9:09 Now, if we run the app we should be able to click on the deck and 9:13 see our waste pile start updating. 9:17 Looks great. 9:22
You need to sign up for Treehouse in order to download course files.Sign up