Setting the Weather Icon6:29 with Ken Alger
The 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.
case "rain": iconId = R.drawable.rain; break; case "snow": iconId = R.drawable.snow; break; case "sleet": iconId = R.drawable.sleet; break; case "wind": iconId = R.drawable.wind; break; case "fog": iconId = R.drawable.fog; break; case "cloudy": iconId = R.drawable.cloudy; break; case "partly-cloudy-day": iconId = R.drawable.partly_cloudy; break; case "partly-cloudy-night": iconId = R.drawable.cloudy_night; break;
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
You need to sign up for Treehouse in order to download course files.Sign up