ios自定義圓環進度條

趙子龍發表於2018-06-29
iOS
效果

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;
}

複製程式碼

簡述一下

UIView的setNeedsDisplay和setNeedsLayout方法

首先兩個方法都是非同步執行的。而setNeedsDisplay會呼叫自動呼叫drawRect方法進行繪製功能，這樣可以拿到 UIGraphicsGetCurrentContext，就可以進行繪製了。而setNeedsLayout會預設呼叫layoutSubViews， 就可以 處理子檢視中的一些資料。 綜上所訴，setNeedsDisplay方便繪圖，而layoutSubViews方便出來資料。

layoutSubviews在以下情況下會被呼叫

1、init初始化不會觸發layoutSubviews。 2、addSubview會觸發layoutSubviews。 3、設定view的Frame會觸發layoutSubviews，當然前提是frame的值設定前後發生了變化。 4、滾動一個UIScrollView會觸發layoutSubviews。 5、旋轉Screen會觸發父UIView上的layoutSubviews事件。 6、改變一個UIView大小的時候也會觸發父UIView上的layoutSubviews事件。 7、直接呼叫setLayoutSubviews。

drawRect在以下情況下會被呼叫：

1、如果在UIView初始化時沒有設定rect大小，將直接導致drawRect不被自動呼叫。drawRect呼叫是在Controller->loadView, Controller->viewDidLoad 兩方法之後掉用的.所以不用擔心在控制器中,這些View的drawRect就開始畫了.這樣可以在控制器中設定一些值給View(如果這些View draw的時候需要用到某些變數值).

2、該方法在呼叫sizeToFit後被呼叫，所以可以先呼叫sizeToFit計算出size。然後系統自動呼叫drawRect:方法。

3、通過設定contentMode屬性值為UIViewContentModeRedraw。那麼將在每次設定或更改frame的時候自動呼叫drawRect:。

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

drawRect方法使用注意點：

1、若使用UIView繪圖，只能在drawRect：方法中獲取相應的contextRef並繪圖。如果在其他方法中獲取將獲取到一個invalidate的ref並且不能用於畫圖。drawRect：方法不能手動顯示呼叫，必須通過呼叫setNeedsDisplay 或者 setNeedsDisplayInRect，讓系統自動調該方法。 2、若使用CAlayer繪圖，只能在drawInContext: 中（類似於drawRect）繪製，或者在delegate中的相應方法繪製。同樣也是呼叫setNeedDisplay等間接呼叫以上方法 3、若要實時畫圖，不能使用gestureRecognizer，只能使用touchbegan等方法來掉用setNeedsDisplay實時重新整理螢幕

相關文章