美文网首页iOS Developer - AnimationiOS Developer - CALayeriOS收藏
使用CAShapeLayer与UIBezierPath实现简单的

使用CAShapeLayer与UIBezierPath实现简单的

作者: Caiflower | 来源:发表于2016-06-04 15:06 被阅读295次

    使用CAShapeLayer与UIBezierPath实现简单的进度显示:效果图如下

    app.gif

    具体步骤如下:
    1.新建一个继承自UIView的GKProgressView

    2.在初始化方法中,新建CAShapelayer类型的路径图层trackLayer和进度图层progressLayer

    3.将trackLayer和progressLayer添加到主图层中

    4.给外界提供一个progress进度属性,重写该属性的set方法完成进度显示

    5.具体代码如下

    GKProgressView声明文件

    #import <UIKit/UIKit.h>
    
    @interface GKProgressView : UIView
    /** 路径颜色 */
    @property (nonatomic, strong) UIColor *trackColor;
    /** 进度颜色 */
    @property (nonatomic, strong) UIColor *progressColor;
    /** 进度 */
    @property (nonatomic,assign) CGFloat progress;//0~1之间的数
    /** 进度边框宽度 */
    @property (nonatomic,assign) CGFloat progressWidth;
    @end
    

    GKProgressView实现文件

    #import "GKProgressView.h"
    #import <QuartzCore/QuartzCore.h>
    #define GKProgressCenter CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5)
    @interface GKProgressView ()
    @property(nonatomic, weak) CAShapeLayer *trackLayer;
    @property(nonatomic, weak) CAShapeLayer *progressLayer;
    @property(nonatomic, strong) UIBezierPath *trackPath;
    @property(nonatomic, strong) UIBezierPath *progressPath;
    /** 显示进度label */
    @property(nonatomic, weak) UILabel *progressLabel;
    
    @end
    @implementation GKProgressView
    #pragma mark -
    #pragma mark - 初始化
    - (instancetype)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
            [self setup];
        }
        return self;
    }
    
    - (void)awakeFromNib
    {
        [self setup];
    }
    /**
     *  不论从XIB还是纯代码加载都会执行该方法
     */
    - (void)setup
    {
        CAShapeLayer *trackLayer = [[CAShapeLayer alloc]init];
        [self.layer addSublayer:trackLayer];
        trackLayer.fillColor = nil;
        trackLayer.frame = self.bounds;
        _trackLayer = trackLayer;
        
        CAShapeLayer *progressLayer = [[CAShapeLayer alloc]init];;
        [self.layer addSublayer:progressLayer];
        progressLayer.fillColor = nil;
        progressLayer.lineCap = kCALineCapRound;
        progressLayer.frame = self.bounds;
        _progressLayer = progressLayer;
        
        //默认5
        self.progressWidth = 5;
    
    }
    
    #pragma mark -
    #pragma mark - 路径设置
    - (void)setTrack
    {
        
        _trackPath = [UIBezierPath bezierPathWithArcCenter:GKProgressCenter radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;
        _trackLayer.path = _trackPath.CGPath;
    }
    
    - (void)setProgress
    {
        _progressPath = [UIBezierPath bezierPathWithArcCenter:GKProgressCenter radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * _progress - M_PI_2 clockwise:YES];
        _progressLayer.path = _progressPath.CGPath;
    }
    
    #pragma mark -
    #pragma mark - 边框尺寸
    - (void)setProgressWidth:(CGFloat)progressWidth
    {
        _progressWidth = progressWidth;
        _trackLayer.lineWidth = _progressWidth;
        _progressLayer.lineWidth = _progressWidth;
        
        [self setTrack];
        [self setProgress];
    }
    
    #pragma mark -
    #pragma mark - set
    - (void)setTrackColor:(UIColor *)trackColor
    {
        _trackLayer.strokeColor = trackColor.CGColor;
    }
    
    - (void)setProgressColor:(UIColor *)progressColor
    {
        _progressLayer.strokeColor = progressColor.CGColor;
    }
    
    - (void)setProgress:(CGFloat)progress
    {
        _progress = progress;
        self.progressLabel.hidden = progress == 0;
        self.progressLabel.text = [NSString stringWithFormat:@"%.1f%%",progress * 100];
        [self setProgress];
    }
    
    #pragma mark -
    #pragma mark - 懒加载
    - (UILabel *)progressLabel
    {
        if (!_progressLabel) {
            UILabel *progressLabel = [[UILabel alloc]init];
            [self addSubview:progressLabel];
            progressLabel.textColor = [UIColor blackColor];
            progressLabel.font = [UIFont systemFontOfSize:10];
            progressLabel.textAlignment = NSTextAlignmentCenter;
            _progressLabel = progressLabel;
            
        }
        return _progressLabel;
    }
    
    /**
     *  布局子控件
     */
    - (void)layoutSubviews {
        [super layoutSubviews];
        CGFloat labelW = self.bounds.size.width * 0.6;
        CGFloat labelH = self.bounds.size.height * 0.5;
        CGFloat labelX = (self.bounds.size.width - labelW) * 0.5;
        CGFloat labelY = (self.bounds.size.height - labelH) * 0.5;
        _progressLabel.frame = CGRectMake(labelX, labelY, labelW, labelH);
    }
    
    @end
    

    项目demo地址:https://github.com/ChrisCaixx/GKProgressView.git

    相关文章

      网友评论

        本文标题:使用CAShapeLayer与UIBezierPath实现简单的

        本文链接:https://www.haomeiwen.com/subject/yrmldttx.html