实现效果如下:

界面采用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相关推荐

  1. iOS绘图UIBezierPath 和 Core Graphics框架

    前言 iOS系统本身提供了两套绘图的框架,即UIBezierPath 和 Core Graphics.而前者所属UIKit,其实是对Core Graphics框架关于path的进一步封装,所以使用起来 ...

  2. iOS 使用UIBezierPath类实现随手画画板

    在上一篇文章中我介绍了 UIBezierPath类 介绍 ,下面这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画, ...

  3. iOS 使用UIBezierPath类实现随手画画板

    在上一篇文章中我介绍了 UIBezierPath类 介绍 ,下面这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画, ...

  4. iOS - 利用 UIBezierPath 绘制圆弧

    前言 最近要写个「会话气泡」,由于没有找到合适的背景图片,所以需要直接用 UIBezierPath 进行绘制.期间用到之前还不太熟悉的绘制圆弧相关知识,于是写下此文进行记录. API 浅析 UIBez ...

  5. iOS开发 UIBezierPath曲线动画

    基础知识 使用UIBezierPath可以创建基于矢量的路径 此类是Core Graphics的封装.使用这个类可以定义简单的形状 如椭圆.矩形或者有多个直线和曲线段组成的形状等. UIBezierP ...

  6. ios 贝塞尔曲线 颜色填充_iOS贝塞尔曲线(UIBezierPath)的基本使用方法

    简介 UIBezierPath是对Core Graphics框架的一个封装,使用UIBezierPath类我们可以画出圆形(弧线)或者多边形(比如:矩形)等形状,所以在画复杂图形的时候会经常用到. 分 ...

  7. ios开发 方形到圆的动画_iOS利用UIBezierPath + CAAnimation实现路径动画效果

    前言 上次给大家介绍了iOS利用UIBezierPath + CAAnimation实现路径动画效果的相关内容,今天实现一个根据心跳路径实现一个路径动画,让某一视图沿着路径进行运动.. 效果图如下: ...

  8. iOS CAReplicatorLayer 简单动画

    代码地址如下: http://www.demodashi.com/demo/11601.html 写在最前面,最近在看学习的时候,偶然间发现一个没有用过的Layer,于是抽空研究了下,本来应该能提前记 ...

  9. ios 添加导航栏视图_iOS进度栏(进度视图)

    ios 添加导航栏视图 In this tutorial, we'll be discussing the UIProgressView component and create a progress ...

最新文章

  1. Centos 7下安装nginx,使用yum install nginx,提示没有可用的软件包(亲测)
  2. 使用EclEmma 插件 解析jacoco.exec文件
  3. Python基本数据类型以及字符串
  4. 数学建模之微分方程(符实现例题和MATLAB源码)
  5. ubuntu下修改用户的默认目录
  6. mysql数据库教程官网_数据库MySQL官方推荐教程-MySQL入门到删库
  7. 计算机快速看图教程,cad快速看图制图
  8. 正确使用ViewStub
  9. 使用阿里云接口进行银行卡四要素实名认证
  10. 怎么把音乐WAV格式转换为MP3格式
  11. Java应用题:模拟一个简单的购房商贷月供计算器,按照以下公式计算总利息和每月还款金额,总利息=贷款金额*利率,贷款年限不同利率也不同,这里规定只有三种年限、利率,见表
  12. ArcGIS图层标注显示(将图层属性名字显示出来)
  13. LVGL_V8.2 时钟动画 (持续更新中)
  14. Windows下架设自己的DNS服务器
  15. 小程序自定义日期组件,不显示今日之后的日期
  16. 基于Python医学院校二手书管理毕业设计-附源码201704
  17. 逻辑思维训练——排除法
  18. 微信小程序控制台警告WXMLRT_$gwx:./wxParse/wxParse.wxml:block:102:18: wx:key=““ does not look lik
  19. python手机号码正确编程_Python。弄清楚如何输入正确的电话号码
  20. mp3怎么转换成wav格式

热门文章

  1. LInux查看CPU状态
  2. ExtJs 中的 Ext.QuickTips.init()
  3. CSS 3实战:开发与设计迷你书
  4. linuxHacks中记载的一些小技巧
  5. android 布局适配虚拟键适配
  6. android 渲染流程
  7. Fibonacci数列第n项的log(n)算法
  8. 个人代码库の全局快捷键
  9. HBuilder 模拟器连接默认端口
  10. 微信浏览器打开网页被拦截了?Mindjump快速解决微信屏蔽网址用户打不开的难题...