iOS 利用CoreGraphics繪制一個(gè)卸貨的狀態(tài)進(jìn)度

效果圖:

卸貨流程圖.gif

接觸了一點(diǎn)CoreGraphics,項(xiàng)目中的卸貨狀態(tài)圖,不想用view,就畫一個(gè) ,做個(gè)記錄。

調(diào)用方法:

#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:@[@"已接單",@"已裝貨",@"運(yùn)輸中",@"已卸貨",@"已完成"]];
    self.progressView.backgroundColor =[UIColor whiteColor];
    [self.view addSubview:self.progressView];
    
    self.progressView.index = 2;
}

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

#####實(shí)現(xiàn):
#import <UIKit/UIKit.h>

@interface FTProgressView : UIView
@property(nonatomic,assign)NSInteger index; //確定哪個(gè)狀態(tài)
-(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<self.titleArray.count; i++) {
        
        NSAttributedString *attStr =[[NSAttributedString alloc]initWithString:self.titleArray[i] attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12],NSForegroundColorAttributeName:[UIColor hexStringToColor:@"3c3c3c"]}];
        
        if (i < self.index) {
            CGPoint point = CGPointMake(leftSpace +avaWidth *i-attStr.size.width/2, height/2 -bigH/2-1 -attStr.size.height);
            [attStr drawAtPoint:point];
        }else{
            CGPoint point = CGPointMake(leftSpace +avaWidth *i-attStr.size.width/2, height/2 +bigH/2+1);
            [attStr drawAtPoint:point];

        }
        
    }
}

-(UIColor *)color1{
    if (!_color1) {
        _color1 =[UIColor hexStringToColor:@"393d63"];
    }
    return _color1;
}
-(UIColor *)color2{
    if (!_color2) {
        _color2 =[UIColor hexStringToColor:@"ffffff"];
    }
    return _color2;
}
@end

demo地址:卸貨流程進(jìn)度

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,086評(píng)論 25 708
  • 這周和往常一樣,沒什么特別的,除了我們?nèi)ヂ糜危喿x基本達(dá)標(biāo),作業(yè)也完成的還好,但英語趣配音不知道為什么不能配了,換...
    牛涵葳閱讀 171評(píng)論 0 1
  • “削肩細(xì)腰,長挑身材,鴨蛋臉面,俊眼修眉,顧盼神飛,文彩精華,見之忘俗”這是黛玉初進(jìn)賈府時(shí)對(duì)探春的第一印象,...
    獨(dú)有南山桂花發(fā)閱讀 448評(píng)論 0 2
  • 王羲之作為書圣,在中國書壇熠熠生輝,從源頭上影響著書法后學(xué)。 書圣之為圣,其余種種不提,單就其作品面貌而言可謂豐富...
    淮高劉溪專用閱讀 560評(píng)論 0 1
  • 可靠性和可用性,看起來像,其實(shí)完全兩回事。 一、概念 先看官方定義:可用性是產(chǎn)品在任意隨機(jī)時(shí)刻需要和開始執(zhí)行任務(wù)時(shí)...
    璇紫閱讀 5,072評(píng)論 0 3