《精彩iPhone炫酷开发》试读:2.2 构建 GUI

实际上,我想讨论的是网络技术,但是在此之前还需要一个实际的网络背景。我们可以直接建立协议,不 过 这 可 能 很 枯 燥。 下 面 先 来 构 建 GUI(Graphical User Interface,图形化用户界面)。 首先,在 Xcode 中创建一个新的基于视图的应用工程。SphereNet 的 GUI 会尽可能简单,实际上它只是一个简单的视图。这里没有设置屏幕,也没有 About(关于)屏幕。基于视图的应用模板就能很好地满足我们的需要。 下面考虑 SphereNetSphere 需要包含些什么。它必须有一个颜色和一个位置。为了让应用快速而平滑地运行,我们将使用 Core Animation 来完成显示,所以还要为 SphereNetSphere 提供一个 CALayer。最后,由于最终需要从屏幕上删除那些没有响应的圆球(来自网络上的其他游戏副本),所以需要知道给定圆球最后一次修改的时间。以上就是 SphereNetSphere 要包含的全部内容。 修改 SphereNetSphere.h,如下所示: #import <Foundation/Foundation.h> @interface SphereNetSphere : NSObject { // 使用红、绿、蓝分量保存颜色 float _r, _g, _b; CALayer *_layer; NSTimeInterval _lastUpdate; } -(void)setColorR:(float)r g:(float)g b:(float)b; -(float)r; -(float)g; -(float)b; -(void)setPosition:(CGPoint)p; -(CGPoint)position; -(CALayer *)layer; -(NSTimeInterval)lastUpdate; @end 以上代码简洁而且直观。初始化方法同样很简单,只需几行代码来建立 CALayer。 static const CGFloat kSphereSize = 40; - (id)init { if((self = [super init])) { _layer = [[CALayer alloc] init]; [_layer setDelegate:self]; [_layer setBounds:CGRectMake(0, 0, kSphereSize, kSphereSize)]; [_layer setNeedsDisplay]; } return self; } - (void)dealloc { [_layer release]; [super dealloc]; } 接下来是一组枯燥的设置方法和获取方法。你会注意到,我完全没有使用 @property 语法。这是因为我是一个守旧的“老古董”,我不太喜欢这个新语法。不用担心,这个程序中并没有太多存取方法。 // 设置颜色,如果必要则更新屏幕 - (void)setColorR:(float)r g:(float)g b:(float)b { if(r != _r || g != _g || b != _b) { _r = r; _g = g; _b = b; [_layer setNeedsDisplay]; } } - (float)r { return _r; } - (float)g { return _g; } - (float)b { return _b; } // 设置圆球在屏幕上的位置,并指出它是何时出现的 - (void)setPosition:(CGPoint)p { [_layer setPosition:p]; _lastUpdate = [NSDate timeIntervalSinceReferenceDate]; } - (CGPoint)position { return [_layer position]; } - (CALayer *)layer { return _layer; } - (NSTimeInterval)lastUpdate { return _lastUpdate; } 最后,需要绘制 CALayer 的内容。我们将使用 CGGradient 来绘制一个径向渐变,并提供一点 3D 效果。以下绘制的细节超出了本章的范畴。如果希望对这里使用的技术有更多了解,可以参见 Apple 的 Quartz 2D Drawing Guide(可以从 http://developer.apple.com 得到)中有关渐变的一章内容。 static const CGFloat kSphereCenterOffset = 10; - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx { CGFloat locations[2] = { 0.0, 1.0 }; CGFloat components[8] = { _r, _g, _b, 1.0, _r, _g, _b, 0.7 }; CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient = CGGradientCreateWithColorComponents( colorspace, components, locations, 2); CGPoint offsetCenter = CGPointMake( kSphereSize / 2 - kSphereCenterOffset, kSphereSize / 2 - kSphereCenterOffset); CGPoint center = CGPointMake(kSphereSize / 2, kSphereSize / 2); CGContextDrawRadialGradient( ctx, gradient, offsetCenter, 0, center, kSphereSize / 2, 0); CFRelease(gradient); CFRelease(colorspace); } 现在再来考虑视图控制器。它也同样简单,Xcode 模板已经为我们加入了基本的内容。我们将建立一个实例变量来维护本地圆球。 SphereNetSphere *_localSphere; 视图加载时将创建这个圆球。 另外,由于要引入一个新的类,所以在 @interface 行前增加 @class SphereNetSphere;。 - (CGFloat)randomFloat { // 生成介于0 到1 之间的一个随机数 // random() 最大范围达到2^31-1,所以除以这个数 return (CGFloat)random() / ((1 << 31) - 1); } - (void)viewDidLoad { [super viewDidLoad]; if(!_localSphere) { _localSphere = [[SphereNetSphere alloc] init]; CGSize size = [[self view] bounds].size; srandomdev(); [_localSphere setColorR:[self randomFloat] g:[self randomFloat] b:[self randomFloat]]; [_localSphere setPosition: CGPointMake(size.width / 2, size.height / 2)]; [[[self view] layer] addSublayer:[_localSphere layer]]; } } 由于我们要直接引用层,所以要在现有的 #import 前面增加 #import <QuartzCore/CoreAnimation.h>。因为现在使用了 SphereNetSphere,所以还要增加 #import"Sphere-NetSphere.h"。 我有点过于谨慎,这里还查看了 _localSphere 变量是否已经存在。视图应当只会加载一次,不过我属于谨慎型,所以还是增加了这个检查,否则可能就得跟踪因缺少这种基本保护而导致的 bug,相比之下,提前检查则要容易得多。 这就足以在屏幕上显示游戏,不过还需要让圆球可以移动。归功于 Core Animation 的魔力,这也相当简单: // 如果用户触摸屏幕或在屏幕上拖动 // 相应地在动画层更新位置 - (void)moveLocalSphereFromTouch:(UITouch *)touch { if(touch) [_localSphere setPosition:[touch locationInView:[self view]]]; } - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self moveLocalSphereFromTouch:[touches anyObject]]; } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { [self moveLocalSphereFromTouch:[touches anyObject]]; } 图 2-2 显示了所完成的 GUI,这只是基本应用,还没有网络功能。这个应用很小巧也很简单,我们可以在此基础上构建一些有意思的网络代码。
图 2-2 完成的 GUI
图 2-2 完成的 GUI

>精彩iPhone炫酷开发

精彩iPhone炫酷开发
作者: [美] Gary Bennett, Wolfgang Ante, Mike Ash, Benjamin Jackson, Neil Mix, Steven Peterson, Matthew "Canis" Rosenfeld
副标题: 七位一线高手的编程和设计范例
原作名: iPhone Cool Projects: Learn the Coding Secrets of Master iPhone Designers and Developers
isbn: 7115236518
书名: 精彩iPhone炫酷开发
页数: 204
译者: 苏金国, 王小振 等
定价: 59.00元
出版社: 人民邮电出版社
装帧: 平装
出版年: 2010-10