登录 立即注册
安币:

Android自定义控件-简单环形进度条制作

[复制链接]
来自: MrlLee 分类: Android精品源码 上传时间: 2016-8-25 18:15:09
Tag:
立即下载
收藏

项目介绍:

实现步骤:
  • 新建CircleProgressView类继承View
  • 在构造函数中初始化画笔
    [Java] 查看源文件 复制代码
    private void init() {
         mPaint = new Paint();
         mPaint.setColor(Color.BLACK);
         mPaint.setStyle(Paint.Style.STROKE);//绘图为描边模式
         mPaint.setStrokeWidth(20);//画笔宽度
         mPaint.setAntiAlias(true);//抗锯齿
     }
  • 重写onDraw
    主要逻辑为先绘制一个圆环,然后在它上面根据进度来绘制圆弧
    [Java] 查看源文件 复制代码
    //进度
    private int mProgress;
    //是否到下一圈
    private boolean mChanged;
    protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
         //得到画布一半的宽度
         int center = getWidth() / 2;
         //定义圆的半径
         int radius = 100;
         //定义一个圆
         mRectF = new RectF(center - radius, center - radius, center + radius, center + radius);
         if (!mChanged) {
             //设置画笔的颜色
             mPaint.setColor(Color.BLUE);
             //画一个圆,由于画笔是描边模式,所以展现的是个圆环
             canvas.drawCircle(center, center, radius, mPaint);
             //设置画笔的颜色
             mPaint.setColor(Color.RED);
             //绘制圆弧,从12点方向(-90度)开始绘制,偏移角度为进度
             canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
         } else {
             mPaint.setColor(Color.RED);
             canvas.drawCircle(center, center, radius, mPaint);
             mPaint.setColor(Color.BLUE);
             canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
         }
         //进度更新方法
         startProgress();
     }
    进度更新方法
    [Java] 查看源文件 复制代码
    private void startProgress() {
         //当view控件可见时,每50毫秒更新一次视图
         if (isShown()) {
             postDelayed(new Runnable() {
                 @Override
                 public void run() {
                     mProgress += 10;
                     //如果偏移角度超过360,则至为0,并且跟换绘制颜色
                     if (mProgress >= 360) {
                         mProgress = 0;
                         mChanged = !mChanged;
                     }
    
                    //请求重绘View树,调用draw()方法
                     invalidate();
                 }
             }, 50);
         }
     }

自定义属性
  • 很明显,我们不可能在代码中写死控件的参数,我们需要提供一些可定制属性,方便在XML布局文件中对控件进行设置。
为控件添加自定义属性的几个步骤。
  • 在values目录下新建一个attrs.xml文件,内容如下:
    [XML] 查看源文件 复制代码
    
    
     
          
          
         
     
    
    不同的属性对应不同的format
  • 获取属性
    在CircleProgressView的构造方法中获取布局文件中的属性
    [Java] 查看源文件 复制代码
    //获取TypedArray
    context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar)
    然后从TypedArray获取我们定义的属性
    [Java] 查看源文件 复制代码
    public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
         TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyleAttr, 0);
    
         //获取自定义属性和默认值
         //getColor方法的第一个参数是我们在XML文件中定义的颜色,如果我们没有给我们自定义的View定义颜色,他就会使用第二个参数中的默认值
         mFirstColor = ta.getColor(R.styleable.CircleProgressView_firstColor, Color.RED);
         mSecondColor = ta.getColor(R.styleable.CircleProgressView_secondColor, Color.BLUE);
         mCircleWidth = ta.getDimensionPixelSize(R.styleable.CircleProgressView_circleWidth,
                 (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics()));
    
         //释放该实例,从而使其可被其他模块复用
         ta.recycle();
         init();
     }
  • 在onDraw()中使用
    [Java] 查看源文件 复制代码
    protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
         //得到画布一半的宽度
         int center = getWidth() / 4;
         //定义圆的半径
         int radius = 100;
         //定义一个圆
         mRectF = new RectF(center - radius, center - radius, center + radius, center + radius);
         if (!mChanged) {
             //设置画笔的颜色
             mPaint.setColor(mFirstColor);
             //画一个圆,由于画笔是描边模式,所以展现的是个圆环
             canvas.drawCircle(center, center, radius, mPaint);
             //设置画笔的颜色
             mPaint.setColor(mSecondColor);
             //绘制圆弧,从12点方向(-90度)开始绘制,偏移角度为进度
             canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
         } else {
             mPaint.setColor(mSecondColor);
             canvas.drawCircle(center, center, radius, mPaint);
             mPaint.setColor(mFirstColor);
             canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
         }
         //进度更新方法
         startProgress();
     }
  • 在布局中使用
    第二个控件使用了自定义属性
    [XML] 查看源文件 复制代码
    
    
    
     
    
     
    


相关源码推荐:

我来说两句
所有评论(32)
changyounet 2016-8-25 18:17:31
膜拜大神~
回复
tylz 2016-8-25 18:22:12
感谢分享,安卓巴士有你更精彩:lol
回复
aliouswang 2016-8-25 18:25:02
写的真的很不错
回复
柠檬lemon 2016-8-25 18:28:53
写的真的很不错
回复
gongags 2016-8-25 18:30:54
不错不错,楼主辛苦了。。。
回复
kk041kk 2016-8-25 18:51:08
好好 学习了 确实不错
回复
apkbusgj 2016-8-26 05:39:39
淡定,淡定,淡定……
回复
12345下一页
上传代码
查看数:2062 收藏数:8 下载数:22 点赞数:0
状态:已购或VIP 售价:10(原价:10)金钱 下载权限:初级码农 
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,769657487

如何获得代码达人称号

如何成为签约作者

联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表