美文网首页
绘制进度条

绘制进度条

作者: 翻这个墙 | 来源:发表于2017-11-23 10:44 被阅读17次

重绘-下载进度条(setNeedsDisplay)的步骤

  1. 布局控件:UISliderView,自定义view用来画圆弧进度条,UILabel
  • 功能一:UILabel的text值与UISliderView相关,监听UISliderView的进度,显示text值

  • 功能二:圆弧进度条的长度与与UISliderView相关,监听UISliderView的进度,显示圆弧进度条

    1. 绘制圆弧
    • 根据新进度值重新绘制圆弧

在progressView.m中

- (void)setProgress:(CGFloat)progress
{
    _progress = progress;
    // 每次获取新进度后重绘
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {

    // Drawing code
    CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);

    //- M_PI_2表示从12点钟位置开始绘制
    CGFloat endA = - M_PI_2 + M_PI * 2 * _progress;

    // 圆弧
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:rect.size.width * 0.5 - 4 startAngle:-M_PI_2 endAngle:endA clockwise:YES];

    [path stroke];

}

在vc.m中

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UILabel *labelView;
@property (weak, nonatomic) IBOutlet ProgressView *progressView;

@end

@implementation ViewController
//监控进度条UISliderView
- (IBAction)valueChange:(UISlider *)sender {
    // 在@“”中转义字符%% = %
    _labelView.text = [NSString stringWithFormat:@"%.2f%%",sender.value * 100];

    // 传入下载进度
    _progressView.progress = sender.value;
}

相关文章

  • Android自定义圆形进度条

    绘制自定义的圆形进度条,分为三个步骤,内圆、外圆、文字。其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所...

  • 小米手环 计步数据的展示View

    废话少说,先来张效果图 源码下载,欢迎Star刻度线的绘制: 进度条的动画绘制 数据加载动画的绘制 源码下载参考项...

  • 自定义进度条

    自定义进度条 一、先上效果图 二、思路 三、实现 1)绘制底色 2)绘制进度 3)ProgressView完整代码...

  • Android画板-----绘制进度条

    绘制一个进度条,实现自动加载功能 效果图如下: 纵向绘制: 横向绘制: 首先我们设置一下布局属性: 为了往后好在底...

  • 绘制进度条

    重绘-下载进度条(setNeedsDisplay)的步骤 布局控件:UISliderView,自定义view用来画...

  • Quartz2D 绘图

    画线 连接处样式 顶角样式 画扇型 重绘 下载的进度条制作 画饼图 绘制文字 绘制图片 绘制雪花 图形上下文栈 平...

  • 扇形进度条

    分享一个扇形进度条,核心思想是用贝塞尔曲线绘制扇形形成进度条子单位,然后通过修改layer的fillcolor实现...

  • 扇形进度条 - iOS

    绘制扇形进度条 背景:上传文件的时候,需要有上传进度,这次需要一个扇形的进度条,示例图如下: 废话不多说,上代码:...

  • 可拖动的进度条加值气泡

    内容分为3部分,1、可以拖动的进度条;2、绘制气泡;3、气泡中间放个lebel1、可以拖动的进度条1.1、简单的,...

  • UIBezierPath与CAShapeLayer混合使用

    一、使用CAShapeLayer绘制一个圆 二、给圆加圆形进度条动画 这时我们会发现进度条的起始点不是在顶端,把c...

网友评论

      本文标题:绘制进度条

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