Android 自定义view之圆盘进度条

电玩女神 2022-06-01 22:28 389阅读 0赞

很久没有用到自定义View了，手有点生疏了，这不同事刚扔给一个活，按照UI的要求，画一个进度条，带动画效果的。需求是这样的：这里写图片描述
嗯，实现后效果如下：

这里写图片描述

嗯，算是基本满足需求吧。
本文包含的知识点
1、自定义view的绘制
2、属性动画
3、图像的合成模式 PorterDuff.Mode

嗯，废话不多说，show me the code
1)WordView.java

  1. import android.animation.ValueAnimator;
  2. import android.content.Context;
  3. import android.content.res.TypedArray;
  4. import android.graphics.Canvas;
  5. import android.graphics.Color;
  6. import android.graphics.Paint;
  7. import android.graphics.PorterDuff;
  8. import android.graphics.PorterDuffXfermode;
  9. import android.graphics.RectF;
  10. import android.graphics.Xfermode;
  11. import android.support.annotation.Nullable;
  12. import android.util.AttributeSet;
  13. import android.util.Log;
  14. import android.view.View;
  16. /**
  17.  * Author: gongwq on 2017/12/20 002011.
  18.  * Email: gwq_0111@163.com
  19.  * Descriptions:
  20.  */
  22. public class WordView extends View {
  24.     private Paint linePaint, circlePaint, circlePaintBg;
  25.     private Paint textPaint1, textPaint2, textPaint3, textPaint4;
  26.     private int screenWidth, screenHeight;
  27.     private int mCenter, mRadius;
  28.     private RectF mRectF, mRectFBg1, mRectFBg2;
  29.     private int defaultValue;
  30.     private float rate = 0f;
  31.     private String hasStudyText = "";
  32.     private String notStudyText = "";
  33.     private int startAng = 0;
  34.     private int defaultStartAng = 120;
  35.     private long animDuration = 2000L;
  36.     private int progressColor, wordTitleColor, wordViewBackground;
  37.     private Xfermode xfermode;
  39.     public WordView(Context context, @Nullable AttributeSet attrs) {
  40.         super(context, attrs);
  42.         TypedArray ta = context.obtainStyledAttributes(
  43.                 attrs, R.styleable.WordView);
  45.         progressColor = ta.getColor(R.styleable.WordView_progressColor, 0xFFFFFFFF);
  46.         wordViewBackground = ta.getColor(R.styleable.WordView_wordViewBackground, 0xFFFF0000);
  47.         wordTitleColor = ta.getColor(R.styleable.WordView_wordTitleColor, 0xFFFF00FF);
  48.         ta.recycle();
  49.         initPaint(context);
  50.     }
  52.     private void initPaint(Context context) {
  53.         screenWidth = MeasureUtil.getScreenWidth(context);
  54.         screenHeight = MeasureUtil.getScreenHeight(context);
  55.         linePaint = new Paint();
  56.         linePaint.setColor(Color.WHITE);
  57.         linePaint.setStyle(Paint.Style.FILL);
  58.         linePaint.setAntiAlias(true);
  59.         linePaint.setStrokeWidth(6.0f);
  61.         circlePaint = new Paint();
  62.         circlePaint.setColor(progressColor);
  63.         circlePaint.setAntiAlias(true);
  64.         circlePaint.setStyle(Paint.Style.STROKE);
  65.         circlePaint.setStrokeCap(Paint.Cap.ROUND);
  66.         circlePaint.setStrokeWidth(6.0f);
  68.         circlePaintBg = new Paint();
  69.         circlePaintBg.setColor(wordViewBackground);
  70.         circlePaintBg.setAntiAlias(true);
  71.         circlePaintBg.setStyle(Paint.Style.FILL);
  73.         textPaint1 = new Paint();//已学习生词
  74.         textPaint1.setColor(wordTitleColor);
  75.         textPaint1.setTextAlign(Paint.Align.CENTER);
  76.         textPaint1.setAntiAlias(true);
  77.         textPaint1.setTextSize(25);
  79.         textPaint2 = new Paint();//xx个
  80.         textPaint2.setColor(Color.WHITE);
  81.         textPaint2.setTextAlign(Paint.Align.CENTER);
  82.         textPaint2.setAntiAlias(true);
  83.         textPaint2.setTextSize(70);
  85.         textPaint4 = new Paint();//个
  86.         textPaint4.setColor(Color.WHITE);
  87.         textPaint4.setTextAlign(Paint.Align.CENTER);
  88.         textPaint4.setAntiAlias(true);
  89.         textPaint4.setTextSize(25);
  91.         textPaint3 = new Paint();//未学习生词x个
  92.         textPaint3.setColor(wordTitleColor);
  93.         textPaint3.setTextAlign(Paint.Align.CENTER);
  94.         textPaint3.setAntiAlias(true);
  95.         textPaint3.setTextSize(25);
  97.         mCenter = screenWidth / 2;
  98.         mRadius = screenWidth / 4;
  100.         mRectF = new RectF(10, 10, 2 * mRadius - 10, 2 * mRadius - 10);//外切圆弧
  102.         mRectFBg1 = new RectF(20, 20, 2 * mRadius - 20, 2 * mRadius - 20);//中间的背景
  104.         mRectFBg2 = new RectF(60, 2 * mRadius - 60, 2 * mRadius - 60, 2 * mRadius + 60);//通过这个去调下面“缺”的弧度
  105.         xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);//DST_OUT在不相交的地方绘制目标图像，相交处根据源图像alpha进行过滤，完全不透明处则完全过滤，完全透明则不过滤
  106.     }
  109.     @Override
  110.     protected void onDraw(Canvas canvas) {
  111.         super.onDraw(canvas);
  112.         canvas.drawArc(mRectF, startAng, (360 - (startAng - 90) * 2) * rate, false, circlePaint);
  113.         //将绘制操作保存到新的图层，将图像合成的处理放到离屏缓存中进行
  114.         circlePaintBg.setColor(wordViewBackground);
  115.         int saveCount = canvas.saveLayer(null, null, Canvas.ALL_SAVE_FLAG);
  116.         canvas.drawArc(mRectFBg1, 0, 360, true, circlePaintBg);//绘制目标图
  117.         circlePaintBg.setXfermode(xfermode);//设置混合模式
  119.         circlePaintBg.setColor(Color.parseColor("#FF00FF00"));//这里的颜色只需前面的透明值为FF即完全不透明即可
  120.         canvas.drawArc(mRectFBg2, 0, 360, true, circlePaintBg);//绘制源图
  121.         circlePaintBg.setXfermode(null);//清除混合模式
  122.         canvas.restoreToCount(saveCount);
  124.         canvas.drawText("已学习生词", mRadius, mRectF.top + 100, textPaint1);
  125.         float width = textPaint2.measureText(hasStudyText);
  126.         float width2 = textPaint4.measureText("个");
  127.         //   float total = mRectFBg1.right - mRectFBg1.left;
  128.         //  Log.e("文字宽度---->", width + "  " + width2 + "  " + total);
  129.         // canvas.drawText(hasStudyText, mRadius + 30, mRadius, textPaint2);
  130.         float center1 = mRadius - (width + width2) / 2 + width / 2;
  131.         float center2 = mRadius - (width + width2) / 2 + width + width2 / 2;
  132.         canvas.drawText(hasStudyText, center1, mRadius + 20, textPaint2);
  134.         canvas.drawText(notStudyText, mRadius, mRectF.bottom - 100, textPaint3);
  135.         if (startAng != 0) {
  136.             canvas.drawText("个", center2, mRadius + 20, textPaint4);
  137.             canvas.rotate(180 + (startAng - 90) + (360 - (startAng - 90) * 2) * rate, mRadius, mRadius);
  138.             if (Integer.parseInt(hasStudyText) > 0) {
  139.                 canvas.drawLine(mRadius, mRectF.top, mRadius, mRectF.top + 20, linePaint);
  140.             }
  141.         }
  142.     }
  144.     /**
  145.      * 设置学习单词数
  146.      *
  147.      * @param hasStudyNum 已学习单词数
  148.      * @param notStudyNum 未学习单词数
  149.      */
  150.     public void setWordsNum(final int hasStudyNum, final int notStudyNum) {
  151.         rate = (float) hasStudyNum / (float) (hasStudyNum + notStudyNum);
  152.         final float rate2 = rate;
  154.         startAng = getStartAng();//startAng必须为大于等于90，小于180
  155.         ValueAnimator anim = ValueAnimator.ofFloat(1, 100);
  156.         anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  157.             @Override
  158.             public void onAnimationUpdate(ValueAnimator animation) {
  159.                 rate = (float) animation.getAnimatedValue() * rate2 / 100f;
  160.                 hasStudyText = (int) ((float) animation.getAnimatedValue() * hasStudyNum / 100) + "";
  161.                 notStudyText = "未学习生词" + (int) ((float) animation.getAnimatedValue() * notStudyNum / 100) + "个";
  162.                 postInvalidate();
  163.             }
  164.         });
  165.         //  hasStudyText = hasStudyNum + "";
  166.         //  notStudyText = "未学习生词" + notStudyNum+"个";
  167.         anim.setDuration(getAnimationDuration());
  168.         anim.start();
  170.     }
  172.     /**
  173.      * 设置圆弧的起始角度值  <br>注 1.值必须是[90,180] 2.必须在setWordNum()方法之前调用
  174.      * @param ang
  175.      */
  176.     public void setStartAng(int ang) {
  177.         this.startAng = ang;
  178.     }
  180.     public int getStartAng() {
  181.         if (startAng == 0) {
  182.             return defaultStartAng;
  183.         }
  184.         return startAng;
  185.     }
  187.     /**
  188.      * 设置动画时间 ,注意 需要在setWordsNum前调用才会生效
  189.      *
  190.      * @param time
  191.      */
  192.     public void setAnimationDuration(long time) {
  193.         this.animDuration = time;
  194.     }
  196.     public long getAnimationDuration(){
  197.         return animDuration;
  198.     }
  200.     @Override
  201.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  202.         setMeasuredDimension(measureWidth(widthMeasureSpec),
  203.                 measureHeight(heightMeasureSpec));
  204.     }
  206.     private int measureWidth(int widthMeasureSpec) {
  207.         int mode = MeasureSpec.getMode(widthMeasureSpec);
  208.         int size = MeasureSpec.getSize(widthMeasureSpec);
  209.         // 默认宽高;
  210.         defaultValue = screenWidth;
  212.         switch (mode) {
  213.             case MeasureSpec.AT_MOST:
  214.                 // 最大值模式 当控件的layout_Width或layout_height属性指定为wrap_content时
  215.                // Log.e("cmos---->", "size " + size + " screenWidth " + screenWidth);
  216.                 //  size = Math.min(defaultValue, size);
  217.                 size = screenWidth / 2;
  218.                 defaultValue = size;
  219.                 break;
  220.             case MeasureSpec.EXACTLY:
  221.                 // 精确值模式
  222.                 // 当控件的android:layout_width=”100dp”或android:layout_height=”match_parent”时
  224.                 break;
  225.             default:
  226.                 size = defaultValue;
  227.                 break;
  228.         }
  230.         return size;
  231.     }
  233.     private int measureHeight(int heightMeasureSpec) {
  234.         int mode = MeasureSpec.getMode(heightMeasureSpec);
  235.         int size = MeasureSpec.getSize(heightMeasureSpec);
  237.         switch (mode) {
  238.             case MeasureSpec.AT_MOST:
  239.                 // 最大值模式 当控件的layout_Width或layout_height属性指定为wrap_content时
  240.                 Log.e("cmos---->", "size " + size + " screenHeight " + screenHeight);
  241.                 //   size = Math.min(screenHeight / 2, size);
  242.                 size = defaultValue;
  243.                 break;
  244.             case MeasureSpec.EXACTLY:
  245.                 // 精确值模式
  246.                 // 当控件的android:layout_width=”100dp”或android:layout_height=”match_parent”时
  248.                 break;
  249.             default:
  250.                 size = defaultValue;
  251.                 break;
  252.         }
  253.         return size;
  254.     }
  255. }

下面是他的一些配置
attrs.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="WordView">
  4.         <attr name="progressColor" format="color" />
  5.         <attr name="wordTitleColor" format="color" />
  6.         <attr name="wordViewBackground" format="color" />
  7.     </declare-styleable>
  9. </resources>

布局文件
activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@mipmap/details_top_bg"
  7.     android:gravity="center_horizontal"
  8.     android:orientation="vertical">
  10.     <EditText
  11.         android:id="@+id/et1"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"
  14.         android:hint="已学习生词数"
  15.         android:inputType="number" />
  17.     <EditText
  18.         android:id="@+id/et2"
  19.         android:layout_width="wrap_content"
  20.         android:layout_height="wrap_content"
  21.         android:hint="未学习生词数"
  22.         android:inputType="number" />
  24.     <Button
  25.         android:id="@+id/bt"
  26.         android:layout_width="wrap_content"
  27.         android:layout_height="wrap_content"
  28.         android:text="绘制" />
  30.     <com.example.myapplication.WordView
  31.         android:id="@+id/customView"
  32.         android:layout_width="wrap_content"
  33.         android:layout_height="wrap_content"
  34.         app:progressColor="#ffffff"
  35.         app:wordTitleColor="#ffffff"
  36.         app:wordViewBackground="#61000000" />
  38. </LinearLayout>

屏幕测量工具
MeasureUtil.java

  1. public class MeasureUtil {
  2.     public static int getScreenWidth(Context mContext) {
  3.         int width = mContext.getResources().getDisplayMetrics().widthPixels;
  4.         return width;
  5.     }
  7.     public static int getScreenHeight(Context mContext) {
  8.         int height = mContext.getResources().getDisplayMetrics().heightPixels;
  9.         return height;
  10.     }
  11. }

使用
MainActivity.java

  1. ......
  2.  @Override
  3.     public void onClick(View v) {
  4.         switch (v.getId()) {
  5.             case R.id.bt:
  6.                 if (!TextUtils.isEmpty(et1.getText().toString()) && !TextUtils.isEmpty(et2.getText().toString())) {
  7.                     int num1 = Integer.parseInt(et1.getText().toString());
  8.                     int num2 = Integer.parseInt(et2.getText().toString());
  9.                     wordView.setAnimationDuration(4000);
  10.                     wordView.setStartAng(130);
  11.                     wordView.setWordsNum(num1, num2);
  12.                 } else {
  13.                     Toast.makeText(this, "数值不能为空", Toast.LENGTH_SHORT).show();
  14.                 }
  16.                 break;
  17.         }
  18.     }
  19.     ......

代码里注释已经相对较清晰了，就不做解释了，有不懂的可以留言。
整个view的重点就在onDraw()方法里，怎么去放置文字，中间的“xxx个”怎么随着数字的长度变化而始终居中，这主要与initPaint()画笔方法有关，其中textPaint.setTextAlign(Paint.Align.CENTER);是重点，它表示画的文字，你后面给定他一个绘制的中心点，然后它的文字会自动居中。第二个要注意的地方是，中间的背景，我是画的，开始准备用UI给的背景的，但是发现不好适配，所以就自己画了，这里主要用到的是图像合成模式PorterDuff.Mode，图像的合成模式的枚举类一共有16种，通过这16种模式，我们可以自己根据给定的2个图片，合成我们想要的结果。这也给我们一个启示：当需求中的图片可以看成是多个图片组合成的结果的画，不妨可以试试 图像的合成模式PorterDuff.Mode。关于PorterDuff.Mode，可以查看我的下一篇文章。 Android图像合成模式之PorterDuff.Mode

发表评论

表情：
评论列表 （有 0 条评论，389人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android 自定义圆形进度条

    在Android开发中，对于进度条想必大家不会陌生。例如，应用在执行一个耗时操作时，会通过展示一个进度条来显示“加载中...”的动画作为友好页面以提高用户体验。对于这样的进度条

    左手的ㄟ右手左手的ㄟ右手/ 0 赞/ 460 阅读