Preview
Video Player
00:00
00:00
Loading the First Page
5:59We have a data model and a layout to display it. Time to hook it all together!
Let's hook up our data.
0:00
In our MVP pattern,
we have the layout here as the view and
0:02
our story classes as the model.
0:05
Let's load the story into the layout
using the presenter StoryActivity.
0:07
Let's create a new member variable
because we will use our story
0:12
throughout this activity class.
0:15
So let's add a private Story and
just name it story.
0:19
Now down here in onCreate,
0:23
we can initialize it with
our new default constructor.
0:25
story = a new Story.
0:28
Okay, now we want to load
a page from the story
0:33
both when the activity is first created
and when a button is tapped on.
0:37
Sounds like we need a method.
0:41
Let's type the method we want
to use right here first.
0:43
loadPage and
the first page we would want to load is 0.
0:46
Okay, so now we can use the Android
quick fix, Alt plus Enter, and
0:51
create this method loadPage.
0:54
Okay, so here's our new method and
I'm going to change the parameter name for
0:56
int i.
0:59
Let's call this pageNumber.
1:00
Inside this new method,
let's create a page named page and
1:03
let's hit Alt plus Enter to
pull in our new page class.
1:07
Again, we do not want either of
these PDF pages down here, so
1:12
pick the right one and
let's set it equal to well, now what?
1:17
We need to get a page from our story,
so let's keep typing what we want, and
1:21
then we can use Android Studio to
help us create another new method.
1:24
So we want from the story to get
a page of the given page number.
1:28
All right, so as expected,
we don't have this method yet but
1:35
we can use another quick fix.
1:38
Alt Enter.
1:40
Create the method getPage and
it adds it over here in our story class.
1:41
Looks like I hit an extra
key when I hit Enter, okay.
1:44
So in here, all we wanna do is return
the correct page from our pages array
1:48
given the page number parameter.
1:53
So we can just do a one line to return
pages and pass in the index pageNumber.
1:55
Again technically we could
access the pages array
2:02
directly if we made this
a public member variable but
2:05
this little bit of encapsulation
is a good program in practice.
2:08
And just to be safe, let's add a little
check here to make sure that we
2:11
never request a page that's outside
the bounds of the pages array.
2:14
So we can say if pageNumber is
greater than or equal to pages.length,
2:18
then we would get an array
out of bounds exception so
2:23
instead I'd rather have the app go
back to the start than totally crash.
2:26
So let's set pageNumber here equal
to 0 as a little safety catch.
2:32
All right, so back in our story activity,
2:36
now we want to wire up the data from
this page to our user interface.
2:39
We'll start with variables for
the views we want to update.
2:44
We can add them up top again
as member variables so
2:46
that we can set them once in onCreate, but
then use them in our new loadPage method.
2:49
So let's add view variables for
the views we're interested in.
2:54
private ImageView,
2:57
let's call this storyImageView
just like we gave it that same ID.
3:00
Then we want private
TextView storyTextView.
3:05
Next we need our two buttons
private Button choice1Button and
3:10
private Button choice2Button.
3:15
Next we can set these down in onCreate.
3:19
I like to keep my layout
code close together so
3:22
I'm going to add some new lines
after the call setContentView and
3:24
then type storyImageView =
cast it to an ImageView.
3:28
And then call
findViewById(R.id.storyImageView).
3:34
We need to do this three more times but
for convenience sake, I'm just going to
3:40
paste this in and for your convenience,
that code is available to paste below.
3:43
All right, our pieces are in place.
3:47
We have views and we have data so we just
need to set the right thing for each view.
3:49
Let's start with the image down
here in our loadPage method.
3:53
We earlier learned how to
set the source image for
3:57
an image view in the design
view of a layout.
4:00
Now we can take a look at how
to set the source here in code.
4:02
So type storyImageView.
4:05
And then we want to set the drawable
image for this image view,
4:08
so let's type setDrawable, and
there isn't a setDrawable method,
4:12
but look at that,
it's called setImageDrawable.
4:16
So go ahead and hit Enter for that.
4:19
And this method requires
a parameter of type Drawable.
4:21
Let's create one on the line above.
4:25
So we want the Drawable type,
and let's just name it image.
4:27
And now because we're in an activity
which again, is ultimately a context.
4:32
We can use another shortcut from the
context class to get a drawable resource.
4:37
Similar to what we saw previously
to get a string resource.
4:41
Now this is a little bit different though.
4:44
We are going to use a method from another
compatibility class called ContextCompat.
4:45
So from here we want to use auto
complete and type getDrawable
4:52
then we pass in the context
which is in this case is this.
4:57
And the ID of the drawable we want to get.
5:01
Let's see, where did we store the ID for
the image for a specific page?
5:04
That's right,
it's right there in the page class.
5:09
So from our page variable,
call getImageId, which will get us
5:11
the appropriate ID to use, then we can
add a semicolon and our image is now set.
5:15
Well we need to actually
pop it in down here.
5:20
Let's use the image variable
as the new parameter.
5:23
We're using this ContextCompat class
because Android has evolved how it lets us
5:25
display and customize drawable
resources over the years.
5:29
We used to be able to do this in
a very similar way to strings, but
5:33
this is a better way
to get a drawable now.
5:36
All right, this is quite a bit of work so
let's run this and
5:37
make sure we haven't gone off the rails.
5:40
All right, loads up main activity.
5:43
I'll type my name.
5:45
Tap on the button.
5:47
And, okay, we have some success.
5:49
The image is showing up in our
activity just like we wanted to see.
5:51
Let's take a quick break, and then we'll
see how to add the rest of our layout.
5:55