学步园

转载自：http://www.bit-101.com/blog/?p=1793

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:

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:

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.

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.

yang3wei 注(图片有点大，最最关键的那部分在右边，可以下载到本地进行查看)：

搞了我好久才找到这个切换UIView类别的下拉框(BallView是自定义的一个UIView子类)~

之前只是按照作者的代码进行coding，结果发现报错，耽搁了很长时间才想到要回头仔细看看教程

这不，果然找到了错误的原因，因为我直接使用了默认的一个带有标签的View，

所以，在转型成我自己定义的BallView的时候，百分百会出错的！

经历告诉我，偷懒的人必将付出更大的代价！！

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.

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:

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!