先上圖
Untitled1.gif
思路
1.自定義view靡馁，在- (void)drawRect:(CGRect)rect方法中用貝塞爾曲線畫一個(gè)圓成洗，設(shè)置中間的填充顏色為clear品姓， 增加邊框，設(shè)置邊框的顏色申尼。這樣就有一個(gè)圓環(huán)了祭阀。
2.根據(jù)slider的值給圓環(huán)的終點(diǎn)動(dòng)態(tài)賦值鹉戚，就可以動(dòng)起來(lái)了。
3.做漸變色专控。
主要代碼
在.h文件中
@property (nonatomic , strong)UILabel *progressLabel;//*中間label*/
@property (nonatomic , assign)CGFloat progress;//*progress*/
在.m文件中
- (void)setProgress:(CGFloat)progress {
_progress = progress;
self.progressLayer.opacity = 0;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
CGFloat radius = 90;
CGFloat start = - M_PI_2; //設(shè)置起點(diǎn)
CGFloat end = - M_PI_2 + M_PI * 2 * self.progress;//設(shè)置終點(diǎn)
//畫一個(gè)圓抹凳，填充色透明，設(shè)置邊框帶顏色伦腐，就是一個(gè)圓環(huán)
self.progressLayer = [CAShapeLayer layer];
self.progressLayer.frame = self.bounds;
self.progressLayer.fillColor = [UIColor clearColor].CGColor; //填充顏色
self.progressLayer.strokeColor = [UIColor greenColor].CGColor; //path填充的顏色赢底，即圓環(huán)的顏色
self.progressLayer.lineCap = kCALineCapRound;//線邊緣是圓形
self.progressLayer.lineWidth = 10;
//用貝塞爾曲線畫圓
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:start endAngle:end clockwise:YES];
self.progressLayer.path = [bezierPath CGPath];
[self.layer addSublayer:self.progressLayer];
//添加漸變色
CALayer *layer = [CALayer layer];
CAGradientLayer *rightLayer = [CAGradientLayer layer];
rightLayer.frame = CGRectMake(self.frame.size.width / 2, 0, self.frame.size.width / 2, self.frame.size.height);
rightLayer.locations = @[@0.1,@0.8,@1];
rightLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];
[layer addSublayer:rightLayer];
CAGradientLayer *leftLayer = [CAGradientLayer layer];
leftLayer.frame = CGRectMake(0, 0, self.frame.size.width / 2, self.frame.size.height);
leftLayer.locations = @[@0.1,@0.8,@1];
leftLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];
[layer addSublayer:leftLayer];
[layer setMask:self.progressLayer];
[self.layer addSublayer:layer];
}
#pragma mark ----------- 懶加載 -----------
- (UILabel *)progressLabel {
if (_progressLabel == nil) {
_progressLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
_progressLabel.center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
_progressLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:_progressLabel];
}
return _progressLabel;
}
在viewController中
#import "ViewController.h"
#import "SSYCycleView.h" //**自定義view*/
@interface ViewController ()
@property (nonatomic , strong)SSYCycleView *cycleView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self createUI];
}
- (void)createUI {
[self.view addSubview:self.cycleView];
UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(self.cycleView.frame.origin.x - 20, self.cycleView.frame.origin.y + self.cycleView.frame.size.height + 50, self.cycleView.frame.size.width + 40, 20)];
[self.view addSubview:slider];
//添加方法
[slider addTarget:self action:@selector(sliderChangeMethod:) forControlEvents:UIControlEventValueChanged];
}
- (void)sliderChangeMethod:(UISlider *)sender {
self.cycleView.progressLabel.text = [NSString stringWithFormat:@"%.2f%%", sender.value*100];
self.cycleView.progress = sender.value;
}
#pragma mark ----------- 懶加載 -----------
- (SSYCycleView *)cycleView {
if (_cycleView == nil) {
_cycleView = [[SSYCycleView alloc]initWithFrame:CGRectMake(90, 100, 200, 200)];
_cycleView.backgroundColor = [UIColor whiteColor];
}
return _cycleView;
}
@end
鏈接點(diǎn)這里
