服务器之家

服务器之家 > 正文

iOS使用UIBezierPath实现ProgressView

时间:2021-03-14 16:49     来源/作者:玉思盈蝶

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

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

是不是超级简单。

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

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部