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