Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this video we walk through our counter app to see what Anko's up to behind the scenes!
Related Links
-
0:00
Okay, so now that we've got a fuzzy understanding of how this all works,
-
0:04
let's take a step back and see if we can make things a little bit clearer.
-
0:08
Here we are in main activity where our code that creates the layout.
-
0:12
It starts with a call to the relative layout,
-
0:14
which is an extension function on activity.
-
0:17
And, actually, that's all this code is, just one big function call
-
0:22
to relative layout, with one parameter that happens to be another function.
-
0:26
So inside a relative layout function, this passed in function will be the init
-
0:31
parameter, then all we have to do is, return the result of calling ankoView
-
0:36
with the relative layout constant and our init function.
-
0:40
And, remember, the relativeLayout constant is just a simple function
-
0:43
that takes on a context and returns an instance of underscore relatively layout.
-
0:48
From here, we call the ankoView method and
-
0:51
pass along our init function along with our underscore relativeLayout constant.
-
0:55
And note that we're calling the version which is an extension function
-
0:58
on the activity class.
-
1:00
So inside this function this keyword will be an activity.
-
1:05
Moving on to the end side of the function,
-
1:07
we start by creating a variable to hold the context.
-
1:10
Then we pass this context to our factory to give us an instance of
-
1:14
underscore relative layout.
-
1:15
Next, we call our init function on our new layout,
-
1:19
which brings us to the inside of our init function.
-
1:22
Inside the init function,
-
1:24
we start with the call to text view, which is an extension function on View Manager.
-
1:29
But, don't worry, I looked into it and View Manager is an interface that gets
-
1:33
implemented by relative layout, so we're good.
-
1:36
Next, just like with our relative well function, we're passing in another
-
1:40
function to our text view function, and it gets passed in as the init parameter.
-
1:45
Now we're calling anko view again, but this time with the text view constant and
-
1:50
a different init parameter.
-
1:51
So let's pass those in, and also,
-
1:54
note that this time we're calling the View Manager version of ankoView.
-
1:59
So this key word will be our view manager, AKA, our relative layout.
-
2:04
Back inside the ankoView function, we grab a context and
-
2:08
use it alongside our factory function to create a text view.
-
2:11
Then, we call in it on our text view and it sets our text view ID to 11,
-
2:16
its text to 0, and its text size to 24.
-
2:21
Once that's done,
-
2:22
we're back in our ankoView function where we add our TextView to a relative layout.
-
2:27
Then, we return our TextView, and
-
2:29
return it again, and then it get sets to our counter TextView variable.
-
2:34
After that,
-
2:35
we march on to the button function where we again pass in another function.
-
2:40
Just like last time, we end up calling ankoView within an init function and
-
2:44
a view factory, but this time it's a different init function,
-
2:47
and the view factory returns buttons.
-
2:50
So inside ankoView, we grab our context, create a button using that context, and
-
2:55
then initialize that button with our init function,
-
2:58
which adds on clicklistener to our button.
-
3:00
Back in ankoView, we then add our button to a relative layout,
-
3:04
and then return our button, and return it again.
-
3:08
But this time, instead of setting some variable equal to our button we
-
3:12
immediately call the lparams function on our button, and
-
3:15
again, we pass in another function.
-
3:18
Inside the lparams function, we start by creating a relative layout,
-
3:22
layout params object.
-
3:24
Then, we call our init function where we modify the layout params
-
3:28
to say that this view, our button, should be below our text view.
-
3:32
Then we set our buttons layout param to our newly created and
-
3:36
initialized layout parameters.
-
3:39
And, finally, we return our button,
-
3:41
which brings us to the end of our relative layouts init function.
-
3:45
And once that's done, we're back at the activities ankoView function where we
-
3:49
add our relative layout for our activity, and then return our relative layout.
-
3:54
Then we return it one more time, which brings us back to the end of our layout.
-
3:59
That was a lot, but on the plus side, now we've got an excellent understanding
-
4:04
of how Anko works, and trust me, this will make the rest of the course a lot easier.
-
4:10
Speaking of the rest of the course,
-
4:12
it's about time that we get back to our solitaire game.
-
4:14
I mean, it's pretty cool that we can see the game in our debug log, but
-
4:18
what good is a game if you can't play it?
-
4:20
So, from here on out we'll be focused on using what we just learned
-
4:24
to implement the UI for our game.
You need to sign up for Treehouse in order to download course files.
Sign up