IOS 自定义控件之UIActivityIndicatorView

原创blog，转载请注明出处
blog.csdn.net/hello_hwc

前言
这个系列的本身不是为了写一些东西让读者拿过去就直接可以用的。过段时间我会在github上传一些拿去就可以用的。这个系列的本身是希望抛砖引玉，提供一些自定义控件的思路。
本文的内容

• 阐述了实现自定义UIActivityIndicator的过程

希望通过本文，读者能够学会

• CAShapeLayer的简单使用
• CAGradientLayer的简单使用

• 自定义控件的一些思路

  一 demo效果
  

二 实现的过程

1. 用_shapeLayer定义环形路径

_shapeLayer = [CAShapeLayer layer];        _shapeLayer.bounds = CGRectMake(0, 0, 100,100);        _shapeLayer.position = CGPointMake(50,50);        _shapeLayer.strokeColor = [UIColor blueColor].CGColor;        _shapeLayer.fillColor = [UIColor clearColor].CGColor;        CGMutablePathRef path = CGPathCreateMutable();        _shapeLayer.lineWidth = 5.0;//        _shapeLayer.backgroundColor = [UIColor purpleColor].CGColor;        CGPathAddArc(path, nil,50, 50,45,0,2*M_PI,YES);        _shapeLayer.path = path;

2 用CAGradientLayer定义渐变，用上文的环形路径去截取。

 _indicatorLayer = [[CAGradientLayer alloc] init];        _indicatorLayer.bounds = CGRectMake(0, 0, 100,100);        _indicatorLayer.position = CGPointMake(50,50);        _indicatorLayer.colors = @[(id)[UIColor blueColor].CGColor,                                   (id)[UIColor greenColor].CGColor,                                   (id)[UIColor blueColor].CGColor];        _indicatorLayer.locations  = @[@(0.25), @(0.5), @(0.75)];        _indicatorLayer.startPoint = CGPointMake(0.0, 0.0);        _indicatorLayer.endPoint = CGPointMake(1.0,1.0);        _indicatorLayer.masksToBounds = YES;        [_indicatorLayer setMask:self.shapeLayer];//截取

3 在Start函数中开始动画，stop结束动画

-(void)start{    self.hidden = NO;    [UIView animateWithDuration:1.0                          delay:0.0                        options:UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveLinear                        animations:^{                            self.transform = CGAffineTransformMakeRotation(M_PI);                        } completion:^(BOOL finished) {                        }];}-(void)stop{    [self.indicatorLayer removeAllAnimations];    self.hidden = YES;}

4 使用

- (IBAction)start:(id)sender {    [self.spinner start];}- (IBAction)stop:(id)sender {    [self.spinner stop];}- (void)viewDidLoad {    [super viewDidLoad];        self.spinner = [[WCActivityIndicicator alloc] init];    self.spinner.bounds = CGRectMake(0, 0, 100,100);    self.spinner.center = self.view.center;    [self.view addSubview:self.spinner];    // Do any additional setup after loading the view, typically from a nib.}

---

最后，附上完整的demo代码，不要直接拿去用，很多地方我没有完善的，仅供学习使用。
WCActivityIndicicator.h

////  WCActivityIndicicator.h//  WCActivityindicator////  Created by huangwenchen on 15/2/17.//  Copyright (c) 2015年 huangwenchen. All rights reserved.//#import <UIKit/UIKit.h>#import <QuartzCore/QuartzCore.h>@interface WCActivityIndicicator : UIView@property (strong,nonatomic) UIColor * color;-(instancetype)init;-(void)start;-(void)stop;@end

WCActivityIndicicator.m

////  WCActivityIndicicator.m//  WCActivityindicator////  Created by huangwenchen on 15/2/17.//  Copyright (c) 2015年 huangwenchen. All rights reserved.//#import "WCActivityIndicicator.h"@interface WCActivityIndicicator()@property (strong,nonatomic) CAGradientLayer * indicatorLayer;@property (strong,nonatomic) CAShapeLayer * shapeLayer;@end@implementation WCActivityIndicicator-(CAShapeLayer *)shapeLayer{    if (!_shapeLayer) {        _shapeLayer = [CAShapeLayer layer];        _shapeLayer.bounds = CGRectMake(0, 0, 100,100);        _shapeLayer.position = CGPointMake(50,50);        _shapeLayer.strokeColor = [UIColor blueColor].CGColor;        _shapeLayer.fillColor = [UIColor clearColor].CGColor;        CGMutablePathRef path = CGPathCreateMutable();        _shapeLayer.lineWidth = 5.0;//        _shapeLayer.backgroundColor = [UIColor purpleColor].CGColor;        CGPathAddArc(path, nil,50, 50,45,0,2*M_PI,YES);        _shapeLayer.path = path;        //        roundShape.path    }    return _shapeLayer;}-(CAGradientLayer *)indicatorLayer{    if (!_indicatorLayer){        _indicatorLayer = [[CAGradientLayer alloc] init];        _indicatorLayer.bounds = CGRectMake(0, 0, 100,100);        _indicatorLayer.position = CGPointMake(50,50);        _indicatorLayer.colors = @[(id)[UIColor blueColor].CGColor,                                   (id)[UIColor greenColor].CGColor,                                   (id)[UIColor blueColor].CGColor];        // 颜色分割线        _indicatorLayer.locations  = @[@(0.25), @(0.5), @(0.75)];        _indicatorLayer.startPoint = CGPointMake(0.0, 0.0);        _indicatorLayer.endPoint = CGPointMake(1.0,1.0);        _indicatorLayer.masksToBounds = YES;        [_indicatorLayer setMask:self.shapeLayer];    }    return _indicatorLayer;}/*// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect {    // Drawing code}*/-(void)start{    self.hidden = NO;    [UIView animateWithDuration:1.0                          delay:0.0                        options:UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveLinear                        animations:^{                            self.transform = CGAffineTransformMakeRotation(M_PI);                        } completion:^(BOOL finished) {                        }];}-(void)stop{    [self.indicatorLayer removeAllAnimations];    self.hidden = YES;}-(void)setUp{    self.bounds = CGRectMake(0, 0,100,100);    [self.layer addSublayer:self.indicatorLayer];    self.hidden = YES;}-(instancetype)init{    if (self = [super init]) {        [self setUp];    }    return self;}@end

使用的viewcontroller

////  ViewController.m//  WCActivityindicator////  Created by huangwenchen on 15/2/17.//  Copyright (c) 2015年 huangwenchen. All rights reserved.//#import "ViewController.h"#import "WCActivityIndicicator.h"@interface ViewController ()@property (strong,nonatomic)WCActivityIndicicator * spinner;@end@implementation ViewController- (IBAction)start:(id)sender {    [self.spinner start];}- (IBAction)stop:(id)sender {    [self.spinner stop];}- (void)viewDidLoad {    [super viewDidLoad];        self.spinner = [[WCActivityIndicicator alloc] init];    self.spinner.bounds = CGRectMake(0, 0, 100,100);    self.spinner.center = self.view.center;    [self.view addSubview:self.spinner];    // Do any additional setup after loading the view, typically from a nib.}@end