IOS 自定义控件之UIActivityIndicatorView

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

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

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

CAShapeLayer的简单使用
CAGradientLayer的简单使用
自定义控件的一些思路

一 demo效果

二实现的过程

用_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

IOS 自定义控件之UIActivityIndicatorView

dexcoder