IOS 自定义控件之UIActivityIndicatorView

前言 这个系列的本身不是为了写一些东西让读者拿过去就直接可以用的。过段时间我会在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
本文系转载文章,感谢原作者的辛勤付出!
交流QQ群:32261424
Previous:
Next:

发表评论

,将以游客形式发表

网友最新评论(0)