动态圆形进度条

最新推荐文章于 2024-10-16 16:07:38 发布

原创

最新推荐文章于 2024-10-16 16:07:38 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#进度条 #圆形

本文介绍了如何创建一个动态的圆形旋转进度条，包括外圆弧颜色的渐变和内圆弧使用两张不同颜色但图案相同的图片动态切割成圆弧形状。讨论了两种在View中实现图片叠加的方法，一种是通过PorterDuffXfermode改变图片叠加模式，另一种是通过裁剪画布Canvas。还展示了圆形背景的实现，并提供了在Activity中更新进度条状态的方法以及在视图脱离窗口时回收Bitmap的处理。

动态圆形进度条

圆形旋转进度条，外圆弧颜色渐变，内圆弧是两张颜色不一样图案一样的图片，要动态切割画布切成一个圆弧形。
效果图
在view里实现图片叠加的效果有两种方式，一是通过画笔的paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN))方法去改变porterDuff.Mode的模式，PorterDuff图片叠加的模式有16种之多，有兴趣自行学下。二是通过裁剪画布canvas。
第一种方式

 /**
     * 画扇形图片 通过PorterDuff对图片进行裁剪
     * @param sourse
     * @param min
     * @return
     */
    public Bitmap drawArcBitmap(Bitmap sourse,int min){
        Paint paint = new Paint();
        paint.setDither(true);
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(min,min, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(target);
        RectF rectF = new RectF(arcSize+arcSize/2,arcSize+arcSize/2,width-arcSize-arcSize/2,height-arcSize-arcSize/2);
        canvas.drawArc(rectF,270,arcAngle,true,paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(newArcBitmap,0,0,paint);
        return target;
    }

第二种方式

 /**
     * 画扇形图片 对画布进行裁剪
     * @param canvas
     */
    public void drawArcBitmap(Canvas canvas,float rotAngle){
        canvas.save();
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Path path = new Path();
        RectF rectF = new RectF(arcSize+arcSize/2,arcSize+arcSize/2,width-arcSize-arcSize/2,height-arcSize-arcSize/2);
        int radius = (int)(width/2-rectF.left);
        float[] xyFloat = caclulatePoint(rotAngle,radius);
        path.moveTo(width/2,height/2);
        path.lineTo(width/2,rectF.top);
        if(arcAngle>=360){
            path.lineTo(width/2,rectF.top);
        }else{
            path.lineTo(xyFloat[0]+width/2,height/2 -xyFloat[1]);
        }

        path.addArc(rectF,startAngle,rotAngle);
        path.close();
        canvas.clipPath(path);
        canvas.drawBitmap(newArcBitmap,0,0,paint);
        canvas.restore();
    }

圆形背景

/**
     * 画得到一个圆形的bitmap
     * @param sourse
     * @param min
     * @return
     */
    public Bitmap drawCircleBitmap(Bitmap sourse,int min){
        Paint paint = new Paint();
        paint.setDither(true);
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(min,min, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(target);
        int radius = min/2-arcSize-arcSize/2;
        canvas.drawCircle(min/2,min/2,radius,paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(sourse,0,0,paint);
        return target;
    }

在activity里调用update方法，传入参数就可以了。true代表动态，false为静态显示