iOS 利用CoreGraphics绘制一个卸货的状态进度

效果图:

iOS 利用CoreGraphics绘制一个卸货的状态进度_第1张图片
卸货流程图.gif

接触了一点CoreGraphics,项目中的卸货状态图,不想用view,就画一个 ,做个记录。

调用方法:

#import "ViewController.h"
#import "FTProgressView.h"

#define Device_Height [[UIScreen mainScreen] bounds].size.height
#define Device_Width  [[UIScreen mainScreen] bounds].size.width//获取屏幕宽高
@interface ViewController ()
@property(nonatomic,strong)FTProgressView *progressView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.progressView =[[FTProgressView alloc]initWithFrame:CGRectMake(0, 100, Device_Width, 62) titleArray:@[@"已接单",@"已装货",@"运输中",@"已卸货",@"已完成"]];
    self.progressView.backgroundColor =[UIColor whiteColor];
    [self.view addSubview:self.progressView];
    
    self.progressView.index = 2;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    self.progressView.index = arc4random()%5;
    NSLog(@"%ld",self.progressView.index);
}

#####实现:
#import 

@interface FTProgressView : UIView
@property(nonatomic,assign)NSInteger index; //确定哪个状态
-(instancetype)initWithFrame:(CGRect)frame titleArray:(NSArray *)titleArray;

@end


#import "FTProgressView.h"
#import "UIColor+Expanded.h"
#define leftSpace 25
#define lineH 4
#define smallH 15
#define smallneiH 13
#define bigH 20
#define CGRect(f)  CGRectMake(leftSpace- f/2 + i * avaWidth, (height -f)/2, f, f)

@interface FTProgressView()
@property(nonatomic,assign)NSInteger statusNum;
@property(nonatomic,strong)NSArray *titleArray;
@property(nonatomic,strong)UIColor *color1;
@property(nonatomic,strong)UIColor *color2;

@end
@implementation FTProgressView

-(instancetype)initWithFrame:(CGRect)frame titleArray:(NSArray *)titleArray{
    self = [super initWithFrame:frame];
    if (self) {
        self.titleArray = titleArray;
    }
    return self;
}
-(void)setIndex:(NSInteger)index{
    _index = index;
    [self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
    CGFloat height = rect.size.height;
    CGFloat width = rect.size.width;

    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, self.color1.CGColor);
    
    
    CGContextFillRect(context, CGRectMake(leftSpace, (height - lineH)/2, width-2 *leftSpace , lineH));
    [self drawCircle];
    
    [self drawLabel];
}
-(void)drawCircle
{
    CGFloat height = self.frame.size.height;
    CGFloat width = self.frame.size.width;
 
    CGFloat circleWidth = width - 2* leftSpace;
    CGFloat avaWidth = circleWidth /(self.titleArray.count -1);

    for (int i =0; i< self.titleArray.count; i++) {
        
        if (i == self.index) {

            [self FillPathWithRect:CGRect(bigH) fillColor:self.color1]; //绘制大圆
        }else{

            [self FillPathWithRect:CGRect(smallH) fillColor:self.color1];
            [self FillPathWithRect:CGRect(smallneiH) fillColor:self.color2];
        }
        
    }
    
}
-(void)FillPathWithRect:(CGRect) rect fillColor:(UIColor *)fillColor{
    
    CGContextRef context = UIGraphicsGetCurrentContext();

    
    CGContextSetFillColorWithColor(context, fillColor.CGColor);
    
    
    CGContextAddEllipseInRect(context, rect);
    
    CGContextFillPath(context);
    
    
}
-(void)drawLabel
{
    
    CGFloat height = self.frame.size.height;
    CGFloat width = self.frame.size.width;
    
     CGFloat circleWidth = width - 2* leftSpace;
    
    CGFloat avaWidth = circleWidth /(self.titleArray.count -1);
    
    for (int i = 0; i

demo地址:卸货流程进度

你可能感兴趣的:(iOS 利用CoreGraphics绘制一个卸货的状态进度)