iOS使用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

是不是超级简单,可是我一开始还是没有想到,还是自己太菜..?...奋斗吧!!!

 

转载于:https://www.cnblogs.com/pengsi/p/6746798.html