iPhone SDK开发基础之自定义仪表控件-技术开发专区

iPhone SDK开发基础之自定义仪表控件

作者：虞斌编辑：景保玉 2011-06-17 14:29 来源：电子工业出版社

　　【IT168技术】在iOS开发中，因为程序的需要，有时要自行绘制iPhone SDK没有提供的界面控件，通常使用QuartzCore.framework即可画出你所需要的各种图形，在这里我们实现一个圆形的“仪表盘”控件，控件的外观如图3-48所示，用户可以通过旋转仪表控件的指针来设置程序需要的各种系统参数。

▲图3-48 “仪表盘”控件

　　控件使用两个UIView来实现仪表控件，并通过CGAffineTransform类来实现仪表指针的旋转，控件在UIDialView类中实现，UIDialView类的定义如下。

//  UIDialView.h
#import <UIKit/UIKit.h>

@protocol UIDialViewDelegate
@optional
- (void)dialValue:(int)tag Value:(float)value;
@end

@interface UIDialView : UIView {
    id<UIDialViewDelegate> delegate;
    NSTimer *timer;
    UIImageView *iv;
    float maxValue,minValue;
    CGAffineTransform initialTransform ;
    float currentValue;
}
@property(nonatomic,assign)id<UIDialViewDelegate>delegate;
@property CGAffineTransform initialTransform;
@property float currentValue;

@end

　　在UIDialView类的实现文件中，通过init()方法读取图片文件初始化控件背景和指针，代码如下。

//  UIDialView.m
#import "UIDialView.h"

@interface UIDialView()
-(void)spin:(NSTimer *)timer;
-(float) goodDegrees:(float)degrees;
@end

#define degreesToRadians(degrees) (M_PI * degrees / 180.0)
#define radiansToDegrees(radians) (radians * 180 / M_PI)

static CGPoint delta;
static float deltaAngle;
static float currentAngle;

@implementation UIDialView
@synthesize initialTransform,currentValue;

- (void)dealloc {
    [iv release];
    [super dealloc];
}

@synthesize delegate;

- (id)init{
    if ((self = [super init])) {

        self.userInteractionEnabled = YES;
        iv =[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"knob. png"]];

        UIImage *backgroundTile = [UIImage imageNamed: @"clock.png"];
        UIColor *backgroundPattern = [[UIColor alloc] initWithPatternImage: backgroundTile];
        self.contentMode = UIViewContentModeCenter;
        [self setBackgroundColor:backgroundPattern];
        [backgroundPattern release];

        iv.backgroundColor = [UIColor clearColor];
        iv.autoresizesSubviews= YES;
        self.frame = CGRectMake(0, 0, iv.frame.size.width, iv.frame.size. height);

        [self addSubview:iv];
        [self bringSubviewToFront:iv];
        [iv release];

        currentValue = 0;
        currentAngle = 0;
        deltaAngle = 0.0;
    }
    return self;
}

　　在UIView的touchesBegan()方法中捕获用户Touch点的位置，并根据此位置使用atan2()函数计算出控件的初始化角度，代码如下。

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *thisTouch = [touches anyObject];
    delta = [thisTouch locationInView:self];

    float dx = delta.x  - iv.center.x;
    float dy = delta.y  - iv.center.y;
    deltaAngle = atan2(dy,dx);
    initialTransform = iv.transform;
}

　　在用户的旋转过程中通过设置指针UIView对象的transform属性实现仪表控件指针伴随用户手指的旋转而旋转，代码如下。

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint pt = [touch locationInView:self];

    float dx = pt.x  - iv.center.x;
    float dy = pt.y  - iv.center.y;
    float ang = atan2(dy,dx);

    if (deltaAngle == 0.0) {
        deltaAngle = ang;
        initialTransform = iv.transform;
    }else{
        float angleDif = deltaAngle - ang;
        CGAffineTransform newTrans = CGAffineTransformRotate(initialTransform, -angleDif);
        iv.transform = newTrans;

        float diffValue = [self goodDegrees:radiansToDegrees(angleDif)];
        currentValue = maxValue - ((maxValue - minValue)/300)*diffValue;
        if(currentValue > 100) currentValue = 100;
    }
    if (delegate != nil) {
        [delegate dialValue:self.tag Value:currentValue];
    }
}

　　客户通过实现UIDialViewDelegate接口协议的dialValue()方法而得到控件的通知消息，代码如下。

//  DialViewController.h
#import <UIKit/UIKit.h>
#import "UIDialView.h"

@interface DialViewController : UIViewController< UIDialViewDelegate> {
   UIDialView *dialView;
   UILabel *myLabel;
}

- (void)dialValue:(int)tag Value:(float)value{
    NSString *str = [NSString stringWithFormat:@"%.1f",v*100];
    [myLabel performSelector:@selector(setText:) withObject:str];
}

　　本文节选自《iOS软件开发揭密：iPhone&iPad企业应用和游戏开发》作者：虞斌。相关的完整Xcode工程源代码文件请参考本书附带的光盘中的DialControl工程。

iPhone SDK开发基础之自定义仪表控件
▲图书

关注我们