ios 自定義圓環加載進度

效果

#import <UIKit/UIKit.h>

@interface HWCircleView : UIView

@property (nonatomic, assign) CGFloat progress;

//進度條顏色
@property(nonatomic,strong) UIColor *progerssColor;
//進度條背景顏色
@property(nonatomic,strong) UIColor *progerssBackgroundColor;
//進度條的寬度
@property(nonatomic,assign) CGFloat progerWidth;
//進度數據字體大小
@property(nonatomic,assign)CGFloat percentageFontSize;
//進度數字顏色
@property(nonatomic,strong) UIColor *percentFontColor;

@end

#import "HWCircleView.h"

@interface HWCircleView ()

@property (nonatomic, weak) UILabel *cLabel;

@end

@implementation HWCircleView

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        //默認顏色
        self.progerssBackgroundColor=[UIColor lightGrayColor];
        self.progerssColor=[UIColor blueColor];
        self.percentFontColor=[UIColor blueColor];
        //默認進度條寬度
        self.progerWidth=15;
        //默認百分比字體大小
        self.percentageFontSize=22;
        
        //百分比標籤
        UILabel *cLabel = [[UILabel alloc] initWithFrame:self.bounds];
        cLabel.font = [UIFont boldSystemFontOfSize:self.percentageFontSize];
        cLabel.textColor = self.percentFontColor;
        cLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:cLabel];
        self.cLabel = cLabel;
    }
    
    return self;
}

- (void)setProgress:(CGFloat)progress
{
    _progress = progress;
    _cLabel.text = [NSString stringWithFormat:@"%d%%", (int)floor(progress * 100)];
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    
    //路徑
    UIBezierPath *backgroundPath = [[UIBezierPath alloc] init];
    //線寬
    backgroundPath.lineWidth = self.progerWidth;
    //顏色
    [self.progerssBackgroundColor set];
    //拐角
    backgroundPath.lineCapStyle = kCGLineCapRound;
    backgroundPath.lineJoinStyle = kCGLineJoinRound;
    //半徑
    CGFloat radius = (MIN(rect.size.width, rect.size.height) - self.progerWidth) * 0.5;
    //畫弧（參數：中心、半徑、起始角度(3點鐘方向爲0)、結束角度、是否順時針）
    [backgroundPath addArcWithCenter:(CGPoint){rect.size.width * 0.5, rect.size.height * 0.5} radius:radius startAngle:M_PI * 1.5 endAngle:M_PI * 1.5 + M_PI * 2  clockwise:YES];
    //連線
    [backgroundPath stroke];
    
    
    //路徑
    UIBezierPath *progressPath = [[UIBezierPath alloc] init];
    //線寬
    progressPath.lineWidth = self.progerWidth;
    //顏色
    [self.progerssColor set];
    //拐角
    progressPath.lineCapStyle = kCGLineCapRound;
    progressPath.lineJoinStyle = kCGLineJoinRound;
    
    //畫弧（參數：中心、半徑、起始角度(3點鐘方向爲0)、結束角度、是否順時針）
    [progressPath addArcWithCenter:(CGPoint){rect.size.width * 0.5, rect.size.height * 0.5} radius:radius startAngle:M_PI * 1.5 endAngle:M_PI * 1.5 + M_PI * 2 * _progress clockwise:YES];
    //連線
    [progressPath stroke];
}

@end

使用

@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, weak) HWCircleView *circleView;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //建立控件
    HWCircleView *circleView = [[HWCircleView alloc] initWithFrame:CGRectMake(50, 200, 150, 150)];
    [self.view addSubview:circleView];
    self.circleView = circleView;;
    
    //添加定時器
    [self addTimer];
}


- (void)addTimer
{
//建立定時器
    _timer = [NSTimer scheduledTimerWithTimeInterval:0.2f target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}

- (void)timerAction
{
    _circleView.progress += 0.01;
   
    if (_circleView.progress >= 1) {
        [self removeTimer];
        NSLog(@"完成");
    }
}

- (void)removeTimer
{
    [_timer invalidate];
    _timer = nil;
}

<hr>

簡述一下

######UIView的setNeedsDisplay和setNeedsLayout方法

首先兩個方法都是異步執行的。而setNeedsDisplay會調用自動調用drawRect方法進行繪製功能，這樣能夠拿到 UIGraphicsGetCurrentContext，就能夠進行繪製了。而setNeedsLayout會默認調用layoutSubViews， 就能夠 處理子視圖中的一些數據。 綜上所訴，setNeedsDisplay方便繪圖，而layoutSubViews方便出來數據。

<hr>

layoutSubviews在如下狀況下會被調用

一、init初始化不會觸發layoutSubviews。 二、addSubview會觸發layoutSubviews。 三、設置view的Frame會觸發layoutSubviews，固然前提是frame的值設置先後發生了變化。 四、滾動一個UIScrollView會觸發layoutSubviews。 五、旋轉Screen會觸發父UIView上的layoutSubviews事件。 六、改變一個UIView大小的時候也會觸發父UIView上的layoutSubviews事件。 七、直接調用setLayoutSubviews。

<hr>

######drawRect在如下狀況下會被調用：

一、若是在UIView初始化時沒有設置rect大小，將直接致使drawRect不被自動調用。drawRect調用是在Controller->loadView, Controller->viewDidLoad 兩方法以後掉用的.因此不用擔憂在控制器中,這些View的drawRect就開始畫了.這樣能夠在控制器中設置一些值給View(若是這些View draw的時候須要用到某些變量值).

二、該方法在調用sizeToFit後被調用，因此能夠先調用sizeToFit計算出size。而後系統自動調用drawRect:方法。

三、經過設置contentMode屬性值爲UIViewContentModeRedraw。那麼將在每次設置或更改frame的時候自動調用drawRect:。

四、直接調用setNeedsDisplay，或者setNeedsDisplayInRect:觸發drawRect:，可是有個前提條件是rect不能爲0。 以上1,2推薦；而3,4不提倡

<hr>

######drawRect方法使用注意點：

一、若使用UIView繪圖，只能在drawRect：方法中獲取相應的contextRef並繪圖。若是在其餘方法中獲取將獲取到一個invalidate的ref而且不能用於畫圖。drawRect：方法不能手動顯示調用，必須經過調用setNeedsDisplay 或者 setNeedsDisplayInRect，讓系統自動調該方法。 二、若使用CAlayer繪圖，只能在drawInContext: 中（相似於drawRect）繪製，或者在delegate中的相應方法繪製。一樣也是調用setNeedDisplay等間接調用以上方法 三、若要實時畫圖，不能使用gestureRecognizer，只能使用touchbegan等方法來掉用setNeedsDisplay實時刷新屏幕