iOS 自定义进度条

爱被打了一巴掌 2022-02-13 06:17 376阅读 0赞

#### 1. 创建MTProcessView, 并继承自UIButton ####

MTProcessView.h

#import <UIKit/UIKit.h>
    
    @interface MTProcessView : UIButton
    // 进度
    @property (nonatomic, assign)float process;
    @end

MTProcessView.m实现

#import "MTProcessView.h"
    
    @implementation MTProcessView
    
    // 设置进度
    - (void)setProcess:(float)process {
        _process = process;
        // 设置文字
        [self setTitle:[NSString stringWithFormat:@"%0.2f%%", process * 100] forState:UIControlStateNormal];
        // 重绘
        [self setNeedsDisplay];
    }
    
    // 使用贝塞尔曲线画圆
    - (void)drawRect:(CGRect)rect {
        // 创建一个贝塞尔曲线
        UIBezierPath *path = [UIBezierPath bezierPath];
        // 圆心
        CGPoint center = CGPointMake(rect.size.width / 2, rect.size.height / 2);
        // 圆半径
        CGFloat radius = MIN(center.x, center.y) - 5;
        // 开始弧度
        CGFloat startAngle = - M_PI_2;
        // 结束弧度
        CGFloat endAngle = 2 * M_PI * self.process + startAngle;
        
        // 化弧
        [path addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
        
        // 设置线宽
        path.lineWidth = 5;
        // 设置笔的风格--圆形
        path.lineCapStyle = kCGLineCapRound;
        // 设置线的颜色
        [[UIColor orangeColor] setStroke];
        // 绘画
        [path stroke];
    }
    
    @end

#### 2. 使用 ####

1). 在Main.Storyboard中拖入一个UIButton，然后设置Class为自己定义的MTProcessView

![img\_957def6226bdabac87433621c41e5bf4.png][img_957def6226bdabac87433621c41e5bf4.png]

图1.png

2). 设置Type为Custom， 并设置Text Color为自己想要的颜色

![img\_84f079f230d13f0a5728cdb01805d51d.png][img_84f079f230d13f0a5728cdb01805d51d.png]

图2.png

3). 通过连线到ViewController.m中，为其属性\_process赋值即可。

self.processView.process = process;

[img_957def6226bdabac87433621c41e5bf4.png]: /images/20220213/15f0b532867f4bddbb6769cc505c169c.png
[img_84f079f230d13f0a5728cdb01805d51d.png]: /images/20220213/cb41550b1cd94adbba7e001325d50e71.png