iOS百分比View

作者: c4ibD3 | 来源:发表于2017-02-16 15:08 被阅读149次

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

相关文章

  • iOS百分比View

    PercentView 一个圆形百分比View现在很多的App都有这么一个小小的View。可以用在显示你剩余流量占...

  • View所显示的百分比

    前言 在开发中,遇到了计算View显示的百分比来表明是否曝光主要的场景就是在滑动列表中View展示的百分比。 RX...

  • 自定义百分比布局

    一、百分比布局 百分比布局是以父容器的尺寸为参考,在 View 加载的过程中算出子 View 的宽高,在作用于子V...

  • 原生端与Flutter的通信

    ios与flutter的通信 一.Flutter 加载ios原生View 1.xcode中创建ios View 此...

  • 视图指定位置圆角

    mark:iOS开发之指定UIView的某几个角为圆角ios中设置view固定方向的圆角 iOS View 指定圆...

  • iOS 计算Scrollview滚动百分比

    iOS 计算获取Scrollview (tableView、collectionView) 滚动百分比 CGF...

  • 常见的xml属性

    android:pivotX="60" android:pivotY="50"(参数为百分比时对应view的wid...

  • View Programming Guide For IOS 翻

    View Programming Guide For IOS 官方地址 View and Window Arch...

  • xib view frame 大小调整

    1, IOS - xib(Interface Builder,view) - can't change view ...

  • 2019-03-22

    iOS 屏幕快照(view 截图/快照) layer 快照 view 快照

网友评论

    本文标题:iOS百分比View

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