iOS使用UIBezierPath实现ProgressView

使用uibezierpath实现progressview实现的效果如下:

界面采用uitableview和tabelviewcell的实现,红色的视图采用uibezierpath绘制.注意红色的部分左上角,左下角是直角哟!!!!不多说<这里才是用uibezierpath实现的真正愿意啦!!!????>,代码如下:

控制器代码:

//
// viewcontroller.m
// progressviewdemo
//
// created by 思 彭 on 2017/4/20.
// copyright © 2017年 思 彭. all rights reserved.
//

#import "viewcontroller.h"
#import "progresstableviewcell.h"

@interface viewcontroller ()<uitableviewdelegate, uitableviewdatasource>

@property (nonatomic, strong) uitableview *tableview;
@property (nonatomic, strong) cashapelayer *layer;

@end

@implementation viewcontroller

- (void)viewdidload {
  [super viewdidload];
  self.navigationitem.title = @"progressdemo";
  [self setui];
}

#pragma mark - 设置界面

- (void)setui {
  
  self.tableview = [[uitableview alloc]initwithframe:cgrectmake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:uitableviewstylegrouped];
  self.tableview.delegate = self;
  self.tableview.datasource = self;
  self.tableview.backgroundcolor = [uicolor clearcolor];
  // 注册cell
  [self.tableview registerclass:[progresstableviewcell class] forcellreuseidentifier:@"cell"];
  self.tableview.tablefooterview = [[uiview alloc]init];
  [self.view addsubview:self.tableview];
}

#pragma mark - uitableviewdatasource

- (nsinteger)numberofsectionsintableview:(uitableview *)tableview {
  
  return 1;
}

- (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section {
  
  return 5;
}

- (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath {
  
  progresstableviewcell *cell = [tableview dequeuereusablecellwithidentifier:@"cell" forindexpath:indexpath];
  return cell;
}

#pragma mark - uitableviewdelegate

- (cgfloat)tableview:(uitableview *)tableview heightforheaderinsection:(nsinteger)section {
  
  return 0.001f;;
}

- (cgfloat)tableview:(uitableview *)tableview heightforfooterinsection:(nsinteger)section {
  
  return 0.0001f;
}

- (cgfloat)tableview:(uitableview *)tableview heightforrowatindexpath:(nsindexpath *)indexpath {
  
  return 44;
}

@end

tabelviewcell代码:

//
// progresstableviewcell.m
// progressviewdemo
//
// created by 思 彭 on 2017/4/21.
// copyright © 2017年 思 彭. all rights reserved.
//

#import "progresstableviewcell.h"
#import "masonry.h"
#import "progressview.h"

@interface progresstableviewcell ()

@property (nonatomic, strong) uilabel *titlelabel;
@property (nonatomic, strong) progressview *progressview;
@property (nonatomic, strong) uilabel *numberlabel;

@end

@implementation progresstableviewcell

- (void)awakefromnib {
  [super awakefromnib];
  // initialization code
}

- (instancetype)initwithstyle:(uitableviewcellstyle)style reuseidentifier:(nsstring *)reuseidentifier {
  
  if (self = [super initwithstyle:style reuseidentifier:reuseidentifier]) {
    [self createsubviews];
    [self layout];
  }
  return self;
}

- (void)createsubviews {
  
  self.titlelabel = [[uilabel alloc]init];
  self.titlelabel.font = [uifont systemfontofsize:16];
  self.titlelabel.text = @"西单大悦城";
  self.titlelabel.textalignment = nstextalignmentleft;
  [self.contentview addsubview:self.titlelabel];
  self.progressview = [[progressview alloc]init];
  self.progressview.backgroundcolor = [uicolor whitecolor];
  self.progressview.progress = arc4random_uniform(100) + 40;
  [self.contentview addsubview:self.progressview];
  self.numberlabel = [[uilabel alloc]init];
  self.numberlabel.font = [uifont systemfontofsize:16];
  self.numberlabel.text = @"￥2000";
  self.numberlabel.textalignment = nstextalignmentright;
  [self.contentview addsubview:self.numberlabel];
}

- (void)layout {
  
  [self.titlelabel mas_makeconstraints:^(masconstraintmaker *make) {
    make.left.mas_equalto(self.contentview).offset(10);
    make.centery.mas_equalto(self.contentview);
//    make.width.greaterthanorequalto(@(70));
    make.width.mas_equalto(self.contentview.frame.size.width * 0.3);
  }];
  [self.progressview mas_makeconstraints:^(masconstraintmaker *make) {
    make.left.mas_equalto(self.titlelabel.mas_right).offset(10);
    make.height.mas_equalto(20);
    make.centery.mas_equalto(self.titlelabel.mas_centery);
    make.width.mas_equalto(self.contentview.frame.size.width * 0.4);
  }];
  [self.numberlabel mas_makeconstraints:^(masconstraintmaker *make) {
    make.left.mas_equalto(self.progressview.mas_right).offset(10);
    make.centery.mas_equalto(self.contentview);
    make.right.mas_equalto(self.contentview).offset(-10);
  }];
}

@end

progressview代码:

//
// progressview.m
// progressviewdemo
//
// created by 思 彭 on 2017/4/20.
// copyright © 2017年 思 彭. all rights reserved.
//

#import "progressview.h"

@interface progressview ()

@end

@implementation progressview


-(void)drawrect:(cgrect)rect{
  
  // 创建贝瑟尔路径
  
  /*
  cgfloat width = self.progress / rect.size.width * rect.size.width;
  // 显示的宽度 = 服务器返回的数值 / 设置的总宽度 * 满值;
   
   显示的宽度= 满值 * 比例值
   比例值 = 服务器返回的宽度 / 满值
   */
  
  cgfloat width = rect.size.width * self.progress / rect.size.width;
   // 显示的宽度 = 服务器返回的数值 * 设置的总宽度 / 满值;
  uibezierpath *path = [uibezierpath bezierpathwithroundedrect:cgrectmake(0, 0, width, rect.size.height) byroundingcorners:uirectcornertopright|uirectcornerbottomright cornerradii:cgsizemake(rect.size.height, rect.size.height)];
  [[uicolor redcolor] setfill];
  [path fill];
}

- (void)setprogress:(cgfloat)progress{
  
  _progress = progress;
  // 重绘，系统会先创建与view相关联的上下文，然后再调用drawrect
  [self setneedsdisplay];
}


@end

是不是超级简单。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。