實現效果如下:

界面采用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

是不是超級簡單,可是我一開始還是沒有想到,還是自己太菜..?...奮斗吧!!!

?

轉載于:https://www.cnblogs.com/pengsi/p/6746798.html

總結

以上是生活随笔為你收集整理的iOS使用UIBezierPath实现ProgressView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。