Hello All, In this tutorial i will show you how to create a sleek looking and self contained Weather View using Core graphics for iPhone.As you can see from the screenshot, we will also be implementing gradient & shadows to create the whole effect. So, fasten your seat belt and get ready to dive with me in the world of “Core Graphics” :)

For the purpose of this tutorial i am assuming you are already familiar with basic iPhone Programming concepts.So, i would be starting directly with the WeatherView. Ofcourse, you can download the sample code and have a look to understand it better.

First lets list down our objective, We want to create a reusable component for iPhone which can display weather data of a city. We also want an optimized solution, hence we will be create a single UIImage on the fly and will cache it for display. Here is the video of the working application that we would be creating in this tutorial. I recommend you to look at the video first to get an idea of our objective here.

Step 1. Get Data from Weather API

We need to fetch weather data, for which i am using Google ig weather API which returns XML data. For parsing we will be using XPath functionality of libxml library. To setup libxml & XPath you can read Matt Gallagher’s post at http://cocoawithlove.com/2008/10/using-libxml2-for-parsing-and-xpath.html

Here is the code i am using, please note that this is not production level code. Its just for demonstration, in real world you would want a better solution.

NSData *urlData = [NSData dataWithContentsOfURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://www.google.com/ig/api?weather=%@",address]]];
if (urlData == nil) {
	[ac removeFromSuperview];
	loadingMessage.text = @"Network Error!";
	loadingMessage.textColor = [UIColor whiteColor];
	return;
}
NSArray *info = PerformXMLXPathQuery(urlData, @"//current_conditions/*[@data]/@*");
if ([info count] == 0) {
	[ac removeFromSuperview];
	loadingMessage.text = @"Information Not Available";
	loadingMessage.textColor = [UIColor whiteColor];
	return;
}
NSArray *city = PerformXMLXPathQuery(urlData, @"//city[@data]/@*");
NSString *qualifiedCityName = (NSString*)[[city objectAtIndex:0] valueForKey:@"nodeContent"];

Now we have all the data that is required, lets start with Core Graphics,

Step 2. Using Core Graphics

We will be creating a single image, so will create a bitmap image context :

//Start Drawing on new Image Context
CGFloat width = 160.0f, height = 105.0f;
// create a new bitmap image context
UIGraphicsBeginImageContext(CGSizeMake(width, height));
// get context
CGContextRef context = UIGraphicsGetCurrentContext();
// push context to make it current
// (need to do this manually because we are not drawing in a UIView)
UIGraphicsPushContext(context);

Now lets add shadows to the Text :

//Add shadows to text
float myColorValues[] = {0, 0, 0, 0.9};
CGSize myShadowOffset = CGSizeMake(2, -2);
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
CGContextSetShadow(context, myShadowOffset, 0.9);
CGColorSpaceRef myColorSpace = CGColorSpaceCreateDeviceRGB();
CGColorRef myColor = CGColorCreate(myColorSpace, myColorValues);
CGContextSetShadowWithColor (context, myShadowOffset, 5, myColor);

Since the images we are getting from google API are not so good looking, we will using Grzanka’s Icons, lets draw the image first depending on the API data :

//Draw Image
NSString *imageURL = [[info objectAtIndex:4] valueForKey:@"nodeContent"];
imageURL = [[imageURL pathComponents] lastObject];
imageURL = [imageURL stringByReplacingOccurrencesOfString:@".gif" withString:@".png"];
NSLog(@"ImageURL : %@",imageURL);
UIImage *wimage = [UIImage imageNamed:imageURL];
wimage = [wimage rescaleImageToSize:CGSizeMake(90, 90)];
[wimage drawAtPoint:CGPointMake(15,15)];

Similarly we can draw temperature, humidity, and wind direction. Now lets save the image from context, and use it for the display.

// pop context
UIGraphicsPopContext();								
 
// get a UIImage from the image context- enjoy!!!
cityImage = [UIGraphicsGetImageFromCurrentImageContext() retain];
// clean up drawing environment
UIGraphicsEndImageContext();
[self setNeedsDisplay];

That is all !! This is all you need to do, download the source code and see it for yourself. If you have any questions then discuss it in comment section. Enjoy !! Happy Coding.

You can get the source code at Github : http://github.com/gauravverma/iPhone_projects/tree/master/Weather/

And Ya ! Happy New Year :)

Related posts:

1. iPhone Development Tip : Custom UINavigationBar More and more developers are creating custom user elements these...