Preview
Video Player
00:00
00:00
Setting the Weather Icon
6:29The Dark Sky service returns a string value representing the current weather icon. We need to customize our data model to convert this string representation into an icon provided by our designer.
Okay, we're almost done with the model.
0:00
There's just one more thing to consider,
and account for.
0:03
Right now, the icon property in our
data model is storing a string value.
0:07
That's because in
the Dark Sky documentation,
0:12
it says that the icon data point can
have one of ten possible values.
0:15
And those are returned as
string representations.
0:19
Our user interface mark-up, calls for
the displaying of icons, not a string.
0:23
Therefore, we need to map the string
values from our JSON data,
0:28
to relevant images for our users.
0:32
Our amazing design team here at TreeHouse
has created a great set of icons for
0:35
our app, which we'll use up here.
0:40
There's a link to download
them in the teacher's notes.
0:44
Once we have them unzipped, we can copy
them directly into the project folder.
0:51
They're formatted to allow us to
overwrite the existing folders.
0:56
To quickly open the res folder,
right click on it.
1:04
On Mac, you'll select this Reveal in
Finder, on Windows it shows in Explorer.
1:10
And now, we can simply drag all
the drawable folders, to our project.
1:18
And we'll take the mipmap folders,
as well.
1:30
Remember, we have multiple versions
of each icon to account for
1:43
different screen resolutions.
1:46
With all of our images here in our
drawable folder, we can expand one, and
1:48
see all the different versions.
1:53
If we double-click on one to preview it,
1:54
we see that it is white on
a transparent background.
1:57
So the background we use in our layout,
will show through.
2:01
We'll talk more about that here in a bit.
2:04
For now though, we want to add a new
method to our model that will get
2:06
the appropriate image, based on the icon
value we are getting from our API.
2:10
To get the image, we need the int ID that
gets generated for the drawable resource.
2:15
Once we set that up, it'll be nice and
easy to use it in an image view.
2:20
In CurrentWeather then,
let's add a new method after our icons,
2:25
after the icon Getter and Setter here.
2:30
We'll make it public,
return an int value, call it getIconId.
2:37
Inside here, we're going to have
a long switch statement to check for
2:45
all the possible values.
2:49
We'll need to account for
all the values, so let's take
2:51
another look at our API documentation
to see what options we're working with.
2:54
So again, we'll look at Response Format,
down here under the currently data point.
3:00
We're looking for icon.
3:07
Here we see a list of all
of our potential values.
3:10
In situations like this, I like to copy
and paste all of these values, and
3:14
then add them as a comment in our code.
3:18
So we'll copy, And we can paste them
here into our getIconId method.
3:20
And let's clean that up a little bit.
3:33
There we go.
3:35
So let's start here with a new int
variable, and set it to a default value.
3:37
We'll set it to the clear
day icon by default.
3:42
So int iconId
3:45
R.drawable.clear_day.
3:48
This will be useful should any new icons
get added to the API in the future.
3:59
They mentioned this in
their documentation.
4:04
Now for that long switch statement,
I mentioned, to update icon ID based on
4:07
the icon, we could use a bunch
of if statements here, but
4:12
the switch construct is a bit faster.
4:16
And in my opinion, easier to read.
4:19
So we'll switch based on the icon.
4:22
Every possibility we want to catch,
we define.
4:28
So we'll start with clear day.
4:32
So case of clear day.
4:34
Our iconId, drawable.clear_day.
4:41
Notice that the drawable names have
underscores instead of dashes.
4:50
We are getting dashes from the API, but
4:54
we aren't allowed to have dashes in
resource names and Android projects.
4:57
Hence, this little conversion dance here.
5:02
Now this next line of code is short but
very important.
5:04
We need to break the case, or
it will fall through to the next case.
5:08
The fall through allows one to write code,
that runs, that meets multiple cases.
5:12
In this situation, however,
we don't want that.
5:18
We will always need to
call the keyword break,
5:21
which will break out of our try clause.
5:24
Break, our next case is for clear night.
5:27
We'll set iconId R.drawable.
5:36
Clear_night.
5:44
And don't forget to break.
5:45
There's a bunch of additional cases here,
and it's kind of a lot to type.
5:47
I'll put the rest in the teachers
notes for easy copy and paste,
5:52
and I'll just paste them in here.
5:55
We'll remove this space.
6:00
And then,
we can return our IconId Very nice.
6:04
[SOUND] We are finally done
with the data model, and
6:12
are ready to display all this
data we've worked so hard to get.
6:16
In the next section,
we'll get the user interface, or
6:22
UI, all set up to connect
our data to the screen.
6:25