iOS百分比View

PercentView

一个圆形百分比View
现在很多的App都有这么一个小小的View。
可以用在显示你剩余流量占总流量的百分比,也可以显示你当前进度占总进度的百分比。

参数,属性

//目标layer
@property (nonatomic, strong) CAShapeLayer *progressLayer;
//渐变夜色
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
//整个圆的颜色
@property (nonatomic, strong) UIColor *trackColor;
//目标长度的颜色,但是设置gradientLayer的颜色之后就失效了
@property (nonatomic, strong) UIColor *progressColor;
//线宽
@property (nonatomic, assign) CGFloat lineWidth;
//贝塞尔曲线
@property (nonatomic, strong) UIBezierPath *path;
//百分比,最大值为100
@property (nonatomic, assign) CGFloat percent;
//动画时间
@property (nonatomic, assign) CGFloat duration;
//定时器
@property (nonatomic, strong) NSTimer *timer;
//阴影
@property (nonatomic, strong) UIImageView *shadowImageView;
//宽度
@property (nonatomic, assign) CGFloat pathWidth;
//目标百分比显示
@property (nonatomic, strong) UILabel *progressLabel;

其中gradientLayer可以设置多个颜色,做成那种颜色渐变的效果

 _gradientLayer.colors = @[(id)[UIColor redColor].CGColor,
                           (id)[UIColor yellowColor].CGColor       
                          ];
 [_gradientLayer setStartPoint:CGPointMake(0.5, 1.0)];
 [_gradientLayer setEndPoint:CGPointMake(0.5, 0.0)];

使用方法

就是一般的初始化就可以了

- (ZPPercentView *)percentView{
   if (!_percentView) {
        CGFloat width = 150;
       _percentView = [[ZPPercentView alloc]initWithFrame:CGRectMake((self.view.frame.size.width - width)/2, 150, width, width)];
       [_percentView updateZPPercent:@(80.0).floatValue openAnimation:YES];
       [self.view addSubview:_percentView];
   }
   return _percentView;

}

演示

因为我传进去的就是80% 所以才能演示到80%

百分比.gif

传送门

github:https://github.com/cAibDe/PercentView

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,482评论 25 709
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,285评论 8 183
  • 背景 昨天晚上关于音标pk大赛的形式活动部门召开会议,规定的时间是半个小时结束,结果开了近两个小时。 会议形式 提...
    思考改变人生阅读 1,527评论 0 0
  • 1、调试 单步调试:fn + F8单步进入:fn + F7单步跳出:fn + F8 + shift单步进入源码:f...
    Jimmy5Zhang阅读 5,841评论 0 2
  • 回忆,留给了时间, 也留给了你。 你从回忆中来, 又从回忆中去。 每一天, 你的未来, 不在回忆里, 在当下的时间里……
    小剧在成长阅读 669评论 0 6