自定义进度条

用 CAShapeLayer 可以根据传入的的贝塞尔曲线UIBezierPath *path , 创建出需要的进度条形状。然后只要 实时的设置CAShapeLayer的strokeEnd属性,就可以更新进度条的进度。

部分代码:

/** 进度条 和 背景 */
- (CAShapeLayer *)createLayer:(UIColor *)strokeColor path:(UIBezierPath *)path {
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.lineWidth = 5;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = strokeColor.CGColor;
    layer.path= path.CGPath;
    [self.layer addSublayer:layer];
    return layer;
}

/** 设置进度 描边停止 */
- (void)setProgress:(CGFloat)progress {
    _progress = progress;

    self.progressLabel.text = [NSString stringWithFormat:@"%.0f%%",progress *100];
    self.progressLayer.strokeEnd = _progress;
}

/** 创建贝塞尔曲线 */
- (UIBezierPath *)createPathWith:(CGRect)frame {

    UIBezierPath *path = [UIBezierPath bezierPath];

    switch (self.style) {
        case CusProgressViewStyleNone:{
            path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(frame.size.width / 2.0, frame.size.height / 2.0) radius:CGRectGetWidth(frame)/ 2.0 startAngle:-M_PI_2 endAngle:M_PI_2 * 3 clockwise:YES];
        }
            break;
        case CusProgressViewStyleRectSegment: {
            CGFloat minAngle = 2 * M_PI / self.gridCount;
            for (int i = 0; i < self.gridCount; i++) {

                CGFloat startAngle = i * minAngle;
                CGFloat endAngle = (i+ 2/3.0) * minAngle;

                UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(frame.size.width / 2.0, frame.size.height / 2.0) radius:CGRectGetWidth(frame)/ 2.0 startAngle:-M_PI_2 + startAngle endAngle:-M_PI_2 + endAngle clockwise:YES];
                [path appendPath:path1];
            }
        }
            break;
        case CusProgressViewStyleRoundSegment: {
            self.backgroundLayer.lineCap = kCALineCapRound;
            self.backgroundLayer.lineJoin = kCALineJoinRound;
            self.progressLayer.lineCap = kCALineCapRound;
            self.progressLayer.lineJoin = kCALineJoinRound;

            static CGFloat minAngle = 1;
            for (int i = 0; i < ceil(360 / (minAngle + self.gridInterval)); i++) {

                CGFloat startAngle = i * (minAngle+self.gridInterval) * M_PI / 180.0;
                CGFloat endAngle = startAngle + minAngle * M_PI / 180.0;
                if (endAngle >= 2 * M_PI) {
                    endAngle = 2 * M_PI;
                }

                UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(frame.size.width / 2.0, frame.size.height / 2.0) radius:CGRectGetWidth(frame)/ 2.0 startAngle:-M_PI_2 + startAngle endAngle:-M_PI_2 + endAngle clockwise:YES];
                [path appendPath:path2];
            }
        }
            break;
        default:
            break;
    }

    return path;
}

练习代码:http://pan.baidu.com/s/1mhxGEuc

时间: 2024-12-15 18:55:42

自定义进度条的相关文章

自定义进度条(圆形、横向进度条)

自定义进度条实现大体流程 1.自定义属性声明(attrs文件) 2.自定义属性获取 3.测量(onMeasure) 4.绘制(onDraw) 代码: attrs文件: <!-- 自定义声明 --> <attr name="progress_unreach_color" format="color"></attr> <attr name="progress_unreach_height" format=&q

android113 自定义进度条

MainActivity: package com.itheima.monitor; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.widget.ProgressBar; public class MainActivity extends Activity { private MyProgressBa

Android自定义进度条样式

最近在做一个widget,上面需要一个progressbar,产品经理和设计师给出来的东西是要实现一个圆角的progress和自定义的颜色,研究一小下,分享出来给大家哦. 测试于:Android4.0+ 操作步骤: 1.创建你的layout文件引用progressbar如下,标红处引用你自定的样式: <ProgressBar android:id="@+id/progressDownload" style="?android:attr/progressBarStyleH

Android自定义进度条-带文本(文字进度)的水平进度条(ProgressBar)

/** * 带文本提示的进度条 */ public class TextProgressBar extends ProgressBar { private String text; private Paint mPaint; public TextProgressBar(Context context) { super(context); initText(); } public TextProgressBar(Context context, AttributeSet attrs, int d

自定义进度条\文字描边样式\文字上下滚动TextSwithcher的应用

一.自定义进度条 1.<ProgressBar         android:id="@+id/patch_progress"         style="@style/gxProgressStyle"         android:layout_width="match_parent"         android:layout_height="12dp"         android:layout_alig

自定义进度条PictureProgressBar——从开发到开源发布全过程

自定义进度条PictureProgressBar--从开发到开源发布全过程 出处: 炎之铠邮箱:[email protected] 本文原创,转载请注明本出处! 本项目JCenter地址:https://bintray.com/yanzhikaijky/CustomViewRepository/PictureProgressbar/ 本项目GitHub地址:https://github.com/totond/PictureProgressBar 欢迎 Star or Fork和在Issue里提出

android 自定义进度条颜色

先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对Android自定义进度条的学习过程!   这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\  下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到 [html] view plaincopyprint? <span style="font-size: 18px;">    <style name

Android 自定义进度条,

最近工作繁忙,一直都埋头在工作中,也不知这么热心工作究竟是为了什么,不知不觉的,到今天才晓得夏天已经来了.天气热,心也热. 网络上出个牛人,辞职信上写着:世界那么大,我想去看看.由衷的佩服她的勇气,我也想去看看这大千世界,可惜我们总是身不由己,有太多的放不下,或许哪天放下了,我也出去走走. 之前一直以为罗永浩是个逗比,直到前两天看了他几期演讲,才发现逗比一直是我.他有句话我很欣赏,这里也分享给大家:在什么样的年纪,就做什么样的事情,怎么能在每个阶段都做错呢!PS:该玩的年纪玩,该谈恋爱的年纪谈恋

iOS自定义进度条高度(UIProgressView进度条高度改变的实现)

今天自定义了iOS中的进度条,发现系统的进度条高度无法改变, 现在自己封装了一种进度条(实际是是UIView而不是UIProgressView),可以改变进度条的高度,非常好用,分享给大家,直接上代码: //  CTWBProgress.h //  Created by WBapple on 16/7/31. //  Copyright © 2016年 王彬. All rights reserved. // #import <UIKit/UIKit.h> @interface CTWBProg

最简单的android自定义进度条样式

一.自定义圆形进度条样式 1.在安卓项目drawable目录下新建一个xml文件如下:<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" andro