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

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