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

效果圖:

卸貨流程圖.gif

接觸了一點CoreGraphics弟塞,項目中的卸貨狀態(tài)圖稿械,不想用view,就畫一個 乏沸,做個記錄淫茵。

調(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:@[@"已接單",@"已裝貨",@"運輸中",@"已卸貨",@"已完成"]];
    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);
}

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

@interface FTProgressView : UIView
@property(nonatomic,assign)NSInteger index; //確定哪個狀態(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地址:卸貨流程進度

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蹬跃,隨后出現(xiàn)的幾起案子匙瘪,更是在濱河造成了極大的恐慌,老刑警劉巖蝶缀,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件丹喻,死亡現(xiàn)場離奇詭異,居然都是意外死亡翁都,警方通過查閱死者的電腦和手機碍论,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來柄慰,“玉大人鳍悠,你說我怎么就攤上這事税娜。” “怎么了藏研?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵敬矩,是天一觀的道長。 經(jīng)常有香客問我蠢挡,道長弧岳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任袒哥,我火速辦了婚禮缩筛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘堡称。我一直安慰自己,他們只是感情好艺演,可當我...
    茶點故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布却紧。 她就那樣靜靜地躺著,像睡著了一般胎撤。 火紅的嫁衣襯著肌膚如雪晓殊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天伤提,我揣著相機與錄音巫俺,去河邊找鬼。 笑死肿男,一個胖子當著我的面吹牛介汹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播舶沛,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼嘹承,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了如庭?” 一聲冷哼從身側(cè)響起叹卷,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎坪它,沒想到半個月后骤竹,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡往毡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年蒙揣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卖擅。...
    茶點故事閱讀 40,561評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡鸣奔,死狀恐怖墨技,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情挎狸,我是刑警寧澤扣汪,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站锨匆,受9級特大地震影響崭别,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜恐锣,卻給世界環(huán)境...
    茶點故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一茅主、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧土榴,春花似錦诀姚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至矢赁,卻和暖如春糯笙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背撩银。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工给涕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人额获。 一個月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓够庙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親咪啡。 傳聞我的和親對象是個殘疾皇子首启,可洞房花燭夜當晚...
    茶點故事閱讀 45,573評論 2 359

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,290評論 25 707
  • 這周和往常一樣,沒什么特別的撤摸,除了我們?nèi)ヂ糜我闾遥喿x基本達標,作業(yè)也完成的還好准夷,但英語趣配音不知道為什么不能配了钥飞,換...
    牛涵葳閱讀 165評論 0 1
  • “削肩細腰,長挑身材衫嵌,鴨蛋臉面读宙,俊眼修眉,顧盼神飛楔绞,文彩精華结闸,見之忘俗”這是黛玉初進賈府時對探春的第一印象唇兑,...
    獨有南山桂花發(fā)閱讀 427評論 0 2
  • 王羲之作為書圣,在中國書壇熠熠生輝桦锄,從源頭上影響著書法后學扎附。 書圣之為圣,其余種種不提结耀,單就其作品面貌而言可謂豐富...
    淮高劉溪專用閱讀 547評論 0 1
  • 可靠性和可用性图甜,看起來像碍粥,其實完全兩回事。 一黑毅、概念 先看官方定義:可用性是產(chǎn)品在任意隨機時刻需要和開始執(zhí)行任務(wù)時...
    璇紫閱讀 5,009評論 0 3