使用CAShapeLayer做出圆形的进度条 —— #DF!

CircleView.h的内容如下:

#import <UIKit/UIKit.h>

@interface CircleView : UIView

@property (nonatomic, assign) CGFloat  startValue;
@property (nonatomic, assign) CGFloat  lineWidth;
@property (nonatomic, strong) UIColor *lineColor;
@property (nonatomic, assign) CGFloat  value;

@end

===================

CircleView.m的内容如下:

#import "CircleView.h"

@interface CircleView ()

@property (nonatomic, strong) CAShapeLayer *shapeLayer;

@end

@implementation CircleView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _shapeLayer       = [CAShapeLayer layer];
        _shapeLayer.frame = self.bounds;

        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];

        _shapeLayer.path = path.CGPath;

        _shapeLayer.fillColor   = [UIColor clearColor].CGColor;
        _shapeLayer.lineWidth   = 1.f;
        _shapeLayer.strokeColor = [UIColor redColor].CGColor;
        _shapeLayer.strokeEnd   = 0.f;

        [self.layer addSublayer:_shapeLayer];
    }
    return self;
}

@synthesize startValue = _startValue;
- (void)setStartValue:(CGFloat)startValue {
    _startValue           = startValue;
    _shapeLayer.strokeEnd = startValue;
}
- (CGFloat)startValue {
    return _startValue;
}

@synthesize lineWidth = _lineWidth;
- (void)setLineWidth:(CGFloat)lineWidth {
    _lineWidth            = lineWidth;
    _shapeLayer.lineWidth = lineWidth;
}
- (CGFloat)lineWidth {
    return _lineWidth;
}

@synthesize lineColor = _lineColor;
- (void)setLineColor:(UIColor *)lineColor {
    _lineColor              = lineColor;
    _shapeLayer.strokeColor = lineColor.CGColor;
}
- (UIColor *)lineColor {
    return _lineColor;
}

@synthesize value = _value;
- (void)setValue:(CGFloat)value {
    _value                = value;
    _shapeLayer.strokeEnd = value;
}
- (CGFloat)value {
    return _value;
}

@end

  

时间: 2024-09-30 11:39:08

使用CAShapeLayer做出圆形的进度条 —— #DF!的相关文章

Andorid自定义圆形渐变色进度条的从实现到开源

信自己也是一种信仰. 写在前面的话 3月初我在自定义控件概述中挖下的几个坑,前一段时间已经基本填完了,自定义控件的几种实现方式也分别写了demo来进行说明.今天我们来聊一聊如何把自己封装一个圆形渐变色进度条控件开源到github,并且上传到jcenter方便别人远程依赖.先看下效果图: 连接github并提交新项目 前提条件: 安装Git客户端(下载地址) 有GitHub账号 创建新项目并提交到Github: 在AndroidStudio中新建一个项目 配置Git:Settings -> Ver

如何实现圆形的进度条(ProgressBar)

在我们实际的工作中可能经常使用到圆形的进度条,但是这是怎么实现的呢?其实这只不过是修改了一下ProgressBar的模板,我们在下面的代码中我们将ProgressBar的Value值绑定到Border的Background上面,并且使用了一个ValueToProcessConverter的转换器进行相应地转换,这里重点介绍一下这个转换器 <ProgressBar Name="pb" Minimum="0" Maximum="100" >

在DrawingVisual上绘制圆形的进度条,类似于IOS系统风格。

1.说明:在WPF中,文件下载时需要显示下载进度,由于系统自带的条型进度条比较占用空间,改用圆形的进度条,需要在DrawingVisual上呈现. 运行的效果如图: private Point GetPointOnCir(Point CenterPoint, double r, double angel) { Point p = new Point(); p.X = Math.Sin(angel * Math.PI / 180) * r + CenterPoint.X; p.Y = Center

css3圆形百分比进度条的实现原理

原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必用2个圆心相同,半径不同的div即可实现.大圆的颜色即为圆形进度条的底色,小圆的颜色即为中间百分比的遮罩颜色白色,还要加上左右2边一边一个半圆,也就是说总共应该有4个div,一个大圆的div中包含3个div,左右一边半个圆,遮罩div处于最上面. 那这里的一边半个圆怎么实现呢?使用css的clip属

HTML5圆形百分比进度条插件circleChart(记录)

介绍:一款可以描绘圆圈进度条的jQuery插件(可用作统计图) circleChart使用方法 在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script> <script src="path/to/circleChart.min.js"></script> HTML结构 使用一个<div>元素作为该圆形百分

JS框架_(Progress.js)圆形动画进度条

圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> p { position: fixed; top: 50%; left: 0; right: 0; text-align: center; transf

详解用CSS3制作圆形滚动进度条动画效果

内  容 先看一下效果图,会提升我们的学习兴趣哟: 对于圆形效果是重点,我将详细讲解. 第一种效果: html结构: <div id="progress"> <span></span> </div> css样式: #progress{ width: 50%; height: 30px; border:1px solid #ccc; border-radius: 15px; margin: 50px 0 0 100px; overflow:

仿IOS圆形下载进度条

/** * Created by C058 on 2016/5/25. */ public class MyHoriztalProgressBar extends ProgressBar { private static final int DEFAULT_REACH_COLOR = 0xff24F569; private static final int DEFAULT_UNREACH_COLOR = 0xffC0C0C0; private static final int DEFAULT_R

自定义控件——圆形圆点进度条(仿安全卫士中的一键加速)

一.源代码 源代码及demo下载(此进度条开源项目后续会持续添加.更新) 二.行动由来 在开发交流群中,一童鞋说要实现这个进度条,但在网上没有找到开源项目. 看到这个图片,很熟悉吧?有木有想点它的冲动?觉得有点意思,可以研究一下,再说也有一段时间没写自定义控件了,正好复习复习(说实话,一段时间没写,思路有,但就是不知道从哪开始).昨天花了一天的时间才把它搞定,先看效果图: 3种显示模式: 模拟进度动画效果: 说说它的特点: 显示模式有三种可选.如上展示: 全显在控件范围内.控件宽高不一时,会以小