Gravity Tutorial for iPhone Part 2

See this note.

In part 1, we created a Ball class which contained position, velocity, radius, and a color. And we set up a timer to update the ball’s position based on its velocity and bounce off the walls.

Now let’s render that ball to the screen.

Rendering is done in a view class, which is of type UIView or a sublcass of UIView. when you create a View-Based application, XCode automatically sets up a generic view of type UIView. Often this is fine, but since we need to do some drawing with code, we need to have a custom view class.

So create a new file with the UIView subclass template. Name it BallView. This will create BallView.h and BallView.m files.

We’re going to need a method to tell the view to refresh, and something to tell it where to draw the ball. Here’s the header:

[c]#import

@interface BallView : UIView {
CGRect ballRect;
}

– (void)refresh:(CGRect)rect;

@end[/c]

Here we have a CGRect which is a data class that holds a rectangle definition. That’s a private variable. And we have a refresh method that takes a CGRect as a parameter. Funky syntax there if you are coming from an ActionScript world, but you’ll learn to love it. 🙂

In the BallView.m file, we’ll implement the refresh method:

[c]- (void)refresh:(CGRect)rect {
ballRect = rect;
[self setNeedsDisplay];
}[/c]

This assigns the rect parameter to the ballRect class variable, and tells the view that it needs to re-display itself. When this happens, the drawRect method of the view will run. That is already defined for you, with a space to add your code.

Think of a view like an ActionScript DisplayObject. In ActionScript, you need to get the graphics object of the display object to do any drawing. In UIView you need to get a Core Graphics context. That’s done with the UIGraphicsGetCurrentContext method, which returns an instance of CGContextRef. Then you set the line width, line color, fill if necessary, add some points, lines, shapes, or whatever to a path, then draw or stroke the path. I won’t go into it in detail. I’m sure when you see the code, you’ll get the idea pretty readily.

[c]- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
CGContextSetLineWidth(context, 1.0);
CGContextAddEllipseInRect(context, ballRect);
CGContextStrokePath(context);
}[/c]

Dig through the references for anything that begins with CGContext to get a feel for the different drawing API commands. I skimped here and just hard coded green as the drawing color. This really should be passed in with the refresh method. Or maybe even pass in the whole ball instance, but this works fine for now. As I said, we get the context, set the stroke color and line width, add an ellipse using the ballRect that we just saved and stroke the generated path.

OK. Our BallView class is complete. Now we need to tell XCode to use this class instead of the default one provided in the template. To do this, we need to go into Interface Builder. OK, we don’t NEED to. There are ways to do it with code too. But in this tutorial, that’s how we are going to do it.

Think of Interface Builder as Flex Builder’s design view. IB generates .xib files which are actually xml files, though I’m not sure anyone actually edits xib files by hand like they do with mxml files.

In the resources folder of your project, you should see a GravityTutorialViewController.xib file. Double click on that and IB will launch.

In the Document window you should see three icons – File’s owner, First Responder, and View. I’ll leave it to you to learn about the first two. Here were are concerned with the View. Click on it and open up the Identity Inspector window. At the top of that you should see a Class dropdown with UIView selected. This is telling you that the default view used for this project is a generic instance of the UIView class. We want it to use BallView instead. Simple enough. Just click on the dropdown and change the class to BallView. The icon label should now say “Ball View”. Good. Now you might want to open the Attributes Inspector window and change the background color to black or something other than gray.

Save the .xib file, and exit IB if you want, because we are done with it.

Back to XCode. You should be able to run the app again with the same results as before. You still won’t see anything, but it should compile and run with no errors or warnings. And if you have the console open, you should still get the log statements showing position.

Now, back in our GravityTutorialViewController.m file, in the onTimer method, we need to tell the view to refresh, passing in the rectangle of the ball’s location and size.

First we’ll create the rectangle, which is based on the ball’s position and radius. Then we need to call refresh on the view. The view controller has a view property that refers to the view, but the problem is that it is typed as a pointer to UIView. So we’ll need to cast it to a pointer to BallView or we’ll get a compile error when we try to call the refresh method.

[c]- (void)onTimer {
[ball update];
CGRect rect = CGRectMake(ball.position.x – ball.radius, ball.position.y – ball.radius, ball.radius * 2.0, ball.radius * 2.0);
[(BallView *)self.view refresh:rect];
}[/c]

Also, this is the first time we’ve used the BallView class in this class, so we’ll need to import it at the top of the class:

[c]#import “GravityTutorialViewController.h”
#import “BallView.h”

@implementation GravityTutorialViewController
…[/c]

You can remove the NSLog statement now, as you should actually have a real moving ball now. Build and go, and behold your bouncing ball!

In Part 3, we’ll do some enhancements and even add gravity!