使用Quarz2D 绘制进度条

一直觉得iphone系统自带的进度条有点简陋，由于项目的实际需要，我参考了一些资料，自己绘制了一个进度条，主要使用Quarz2D来实现的。  绘制矩形，填充内部颜色，描边，然后从左侧往右侧逐渐改变填充颜色，最后的效果就是一个动态的进度条实现了。

首先是头文件：CustomProgressView.h

 

 

//  Created by suruqiang on 8/4/10.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//

#import <UIKit/UIKit.h>


@interface CustomProgressView : UIView {

	float progress;
}

@property(assign, nonatomic) float progress;
-(id) init;
//-(void)drawRect:(CGRect)_rect borderRadius:(CGFloat)_rad borderWidth:(CGFloat)_thickness barRadius:(CGFloat)_barRadius barInsert:(CGFloat)_barInsert;
-(void) drawRect:(CGRect)rect borderRadius:(CGFloat)rad borderWidth:(CGFloat)thickness barRadius:(CGFloat)barRadius barInset:(CGFloat)barInset;
@end

 

 

 

CustomProgressView.m文件实现代码：

 

//  Created by suruiqiang on 8/4/10.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//

#import "CustomProgressView.h"


@implementation CustomProgressView
@synthesize progress;



-(id) init
{
	CGRect rect = CGRectMake(0, 0, 210, 20);
	//if(![super initWithFrame:rect])
	//	return nil;
	[super initWithFrame:rect];
	progress = 0;
	self.backgroundColor = [UIColor clearColor];
	
	return self;
}


-(void)setProgress:(float)_progress
{
	_progress = MIN(MAX(0,_progress),1);
	if(_progress==progress)
		return;
	progress = _progress;
	
	[self setNeedsDisplay];
}



- (void) drawRect:(CGRect)rect
{
	[self drawRect:rect borderRadius:8. borderWidth:2. barRadius:5. barInset:3.];
}


-(void) drawRect:(CGRect)rect borderRadius:(CGFloat)rad borderWidth:(CGFloat)thickness barRadius:(CGFloat)barRadius barInset:(CGFloat)barInset{
	//draw the outside rectangle of custom progressview
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGRect rrect = CGRectInset(rect,thickness, thickness);
	CGFloat radius = rad;
	CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);
	CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);
	CGContextMoveToPoint(context, minx, midy);
	CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
	CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
	CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
	CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
	CGContextClosePath(context);
	CGContextSetRGBStrokeColor(context, 0, 1, 1, 1);
	//CGContextSetRGBFillColor(context,1, 1, 1, 1);
	CGContextSetLineWidth(context, thickness);
	CGContextDrawPath(context, kCGPathStroke);

	radius = barRadius;
	
	rrect = CGRectInset(rrect, barInset, barInset);
	rrect.size.width = rrect.size.width * self.progress;
	minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);
	miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);
	CGContextMoveToPoint(context, minx, midy);
	CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
	CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
	CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
	CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
	CGContextClosePath(context);
	CGContextSetRGBFillColor(context,1, 0, 1, 1);
	CGContextDrawPath(context, kCGPathFill);
	
}

- (void)viewDidUnload {
	// Release any retained subviews of the main view.
	// e.g. self.myOutlet = nil;
}


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


@end

 

 

 

调用出的代码如下：

 

- (void)viewDidLoad {
    [super viewDidLoad];
//[self.view addSubview:[self progressBar]];
	progressBar = [[CustomProgressView alloc] init];
	progressBar.center = CGPointMake(160.0f, 160.0f);
	[progressBar setProgress:0.01];
	[self.view addSubview:progressBar];
	
	
	time = 0;
	timer = [[NSTimer timerWithTimeInterval:0.02 target:self selector:@selector(timer) userInfo:nil repeats:YES] retain];
	[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];


｝


-(void)timer
{
	self.progressBar.progress = time / 100.0;
	
	time++;
	if(time > 130) time = -30;
	return;
}

由于本人只是潦草的绘制了一番，没有任何美工元素，实际项目中需要对颜色等进行设置优化。