使用uibezierpath实现progressview实现的效果如下:
界面采用uitableview和tabelviewcell的实现,红色的视图采用uibezierpath绘制.注意红色的部分左上角,左下角是直角哟!!!!不多说<这里才是用uibezierpath实现的真正愿意啦!!!
控制器代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
//// 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代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
//// 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代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
//// 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 |
是不是超级简单。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
