android invalidate不走ondraw_Android仿魅族应用商店下载进度控件

作者  |  间歇性、神经病患者 地址 |   https://www.jianshu.com/p/53869261717b

前言

因为本人是个魅族控，魅族的UI以及页面风格真的是深入我心，特别是一些小动效更是让我爱不释手，所以也想仿着来做一点，好吧，啰嗦毕了，看下实现的UI效果。 这个是魅族应用商店下载进度条的进度读取，我挺喜欢这个效果的，具体效果我们分成3部分：

1. 没开始之前显示 圆角按钮

2. 点击下载后有一个缩回去的动画，缩成一个圆，然后进行进度条加载

3. 进度条走到底之后再次横向拉，拉成一个圆角按钮，上面显示安装或者是打开。

下图看下具体的实现效果

Github地址：

https://github.com/LinHuanTanLy/CircularProgressBar.git

实现过程

需求分析

先动脑再动手。
很明显这里面涉及到了画弧形，画圆角矩形，画字，属性动画，这些单独拆出来问题不大，合并在一起就麻烦点了。
思路：

1. 先画矩形

2. 点击 矩形回收，缩到一定倍数后不再画矩形，改而画进度条(虽然是叫进度条，但是我们不考虑用progressbar也不考虑画圆，我们画弧形来实现)

3. 根据进度来选择画多少弧度的弧形，当到达360弧度的时候，即进度100%，这个时候不再画弧形，改而画圆角矩形，横向拉伸到圆角矩形的宽度。

具体动手

定义需要的参数

    //    定义 宽 高 半径 开始角度 滑动角度    private int mW, mH, mRadius, mStartAngle = 0, mSweepAngle = 0;    //    默认弧形的颜色，进度条颜色，暂停杠杠的颜色，字体颜色    private int mDefColor, mProgressColor, mTabColor, mFontColor;    //   画进度弧度，画中间暂停斜杠，画默认弧度，画文字    private Paint mPaintForCircle, mPaintForTag, mPaintForDefCircle, mPaintForText;    //   是否画进度条    private boolean isDrawProgressBar = false;    //   由圆形进度条 进化到  圆角矩形 需要增长的半径的倍数以及最大倍数    private final float sMultiple = 1f, sMaxMultiple = 2.5f;    //   可变的倍数    private float mMultiple = sMaxMultiple;    //   进度条的宽度,圆角矩形的宽度    private float mStrokeWidthCircle = 12, mRectWidth = 6;    //   圆角矩形中的提示文字    private String mTipsStr = "下载", mTipsInstallStr = "安装";    //   圆角矩形中的提示文字字号大小    private float mTipsStrFontSize = 40;    //   下载监听    private OnProgressListener mOnProgressListener;

重写onDraw()

  @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.translate(mW / 2, mH / 2);        if (isDrawProgressBar) {            drawPauseTag(canvas);            drawDefCircle(canvas);            drawBigCircle(canvas);        } else {            drawRoundRect(canvas);        }    }

这里我们根据isDrawProgressBar来判断是画什么图形，相对应的方法如下：

/**     * 画中间的暂停按钮     *     * @param canvas     */    private void drawPauseTag(Canvas canvas) {        mPaintForTag.setColor(mTabColor);        RectF rectFLeft = new RectF(-mRadius / 2.6f, -mRadius / 2.4f, -mRadius / 8, mRadius / 2.4f);        RectF rectFRight = new RectF(mRadius / 8, -mRadius / 2.4f, mRadius / 2.6f, mRadius / 2.4f);        canvas.drawRect(rectFLeft, mPaintForTag);        canvas.drawRect(rectFRight, mPaintForTag);    }

 /**     * 画基础的背景圆     *     * @param canvas     */    private void drawDefCircle(Canvas canvas) {        mPaintForDefCircle.setStrokeWidth(mStrokeWidthCircle);        mPaintForDefCircle.setColor(mDefColor);        RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);        canvas.drawArc(rectF, mStartAngle, 360, false, mPaintForDefCircle);    }

  /**     * 画进度弧形     *     * @param canvas     */    private void drawBigCircle(Canvas canvas) {        mPaintForCircle.setColor(mProgressColor);        mPaintForCircle.setStrokeWidth(mStrokeWidthCircle);        RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);        canvas.drawArc(rectF, mStartAngle, mSweepAngle, false, mPaintForCircle);    }

 /**     * 画圆角矩形     *     * @param canvas     */    private void drawRoundRect(Canvas canvas) {        mPaintForCircle.setStrokeWidth(mRectWidth);        mPaintForCircle.setColor(mProgressColor);        RectF rectF = new RectF(-mRadius * mMultiple, -mRadius, mRadius * mMultiple, mRadius);        canvas.drawRoundRect(rectF, 60, 60, mPaintForCircle);        mPaintForCircle.setStrokeWidth(mStrokeWidthCircle);        if (mMultiple == sMaxMultiple) {            drawTipsText(rectF, canvas);        }    }

这时候基本的模板已经画好了，怎么让他动起来呢？我们考虑使用属性动画

属性动画

 /**     * 用属性动画绘制组件  开始画圆角矩形     */    private void doDrawRect() {        ValueAnimator valueAnimator = ValueAnimator.ofFloat(sMultiple, sMaxMultiple);        valueAnimator.setDuration(500);        valueAnimator.addUpdateListener(animation -> {            mMultiple = (float) animation.getAnimatedValue();            invalidate();        });        valueAnimator.start();    }    /**     * 用属性动画绘制组件  开始画进度条     */    private void doDrawProgress() {        ValueAnimator valueAnimator = ValueAnimator.ofFloat(sMaxMultiple, sMultiple);        valueAnimator.setDuration(500);        valueAnimator.addUpdateListener(animation -> {            float rate = (float) animation.getAnimatedValue();            mMultiple = rate;            invalidate();            if (rate == sMultiple) {                isDrawProgressBar = true;                invalidate();            }        });        valueAnimator.start();    }

设置文字

自定义View写文字一向是让人讨厌的，因为baseline实在是不好找，这里是在一个限定好的圆角矩形里面写文字，所以相对比较好处理一些：

  /**     * 画矩形框中的文本     *     * @param rectF     * @param canvas     */    private void drawTipsText(RectF rectF, Canvas canvas) {        mPaintForText.setTextSize(mTipsStrFontSize);        mPaintForText.setColor(mFontColor);        Paint.FontMetricsInt fontMetrics = mPaintForText.getFontMetricsInt();        float baseline2 = rectF.bottom - ((rectF.bottom - rectF.top - fontMetrics.bottom + fontMetrics.top) / 2 + fontMetrics.bottom);        canvas.drawText(mTipsStr, rectF.centerX(), baseline2, mPaintForText);    }

自定义属性

1. value/attrs.xml 定义属性文件：

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="circular">                <attr name="defColor" format="color"/>                <attr name="progressColor" format="color"/>                <attr name="tabColor" format="color"/>                <attr name="fontColor" format="color"/>                <attr name="tipsStr" format="string"/>                <attr name="finishStr" format="string"/>                <attr name="fontSize" format="dimension"/>                <attr name="rectWidth" format="dimension"/>                <attr name="progressWidth" format="dimension"/>    declare-styleable>resources>

2. 构造方法中获取属性文件

 private void init(Context context, AttributeSet attrs) {        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.circular);        mDefColor = typedArray.getColor(R.styleable.circular_defColor, Color.parseColor("#9E9E9E"));        mProgressColor = typedArray.getColor(R.styleable.circular_progressColor, Color.parseColor("#FF34A350"));        mTabColor = typedArray.getColor(R.styleable.circular_tabColor, Color.parseColor("#FF34A350"));        mFontColor = typedArray.getColor(R.styleable.circular_fontColor, Color.parseColor("#FF34A350"));        mTipsStr = typedArray.getString(R.styleable.circular_tipsStr);        mStrokeWidthCircle = typedArray.getDimension(R.styleable.circular_progressWidth, 12);        mRectWidth = typedArray.getDimension(R.styleable.circular_rectWidth, 6);        if (TextUtils.isEmpty(mTipsStr)) {            mTipsStr = "下载";        }        mTipsInstallStr = typedArray.getString(R.styleable.circular_finishStr);        if (TextUtils.isEmpty(mTipsInstallStr)) {            mTipsInstallStr = "安装";        }        mTipsStrFontSize = typedArray.getDimension(R.styleable.circular_fontSize, 40);        typedArray.recycle();        mPaintForCircle = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaintForCircle.setStyle(Paint.Style.STROKE);        mPaintForTag = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaintForDefCircle = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaintForDefCircle.setStyle(Paint.Style.STROKE);        mPaintForText = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaintForText.setTextAlign(Paint.Align.CENTER);    }

暴露更新进度的方法供外界调用:

  /**     * 是不是正在显示进度中     *     * @return     */    public boolean isInProgress() {        return isDrawProgressBar;    }    /**     * 开始显示下载进度     */    public void doStartProgress() {        doDrawProgress();    }    /**     * 暂停下载进度     */    public void doPauseProgress() {        isDrawProgressBar = false;        doDrawRect();    }    /**     * 完成下载进度     */    public void doFinishProgress() {        mSweepAngle = 360;        isDrawProgressBar = false;        mTipsStr = mTipsInstallStr;        doDrawRect();        if (mOnProgressListener != null) {            mOnProgressListener.onProgressFinish();            mSweepAngle = 0;        }    }    /**     * 更新进度     *     * @param curProgress 当前进度     * @param maxProgress 全部进度     */    public void setProgress(int curProgress, int maxProgress) {        if (curProgress < maxProgress) {            BigDecimal result = new BigDecimal(curProgress).divide(new BigDecimal(maxProgress), 2, BigDecimal.ROUND_HALF_DOWN).multiply(new BigDecimal(360));            mSweepAngle = result.intValue();        } else {            mSweepAngle = 360;        }        invalidate();    }    /**     * 默认弧形的颜色     *     * @param colorRgb     */    public void setDefColor(int colorRgb) {        mDefColor = colorRgb;    }    /**     * 进度条颜色     *     * @param colorRgb     */    public void setProgressColor(int colorRgb) {        mProgressColor = colorRgb;    }    /**     * 暂停杠杠的颜色     *     * @param colorRgb     */    public void setTabColor(int colorRgb) {        mTabColor = colorRgb;    }    /**     * 设置进度条宽度     *     * @param progressWidth     */    public void setProgressWidth(int progressWidth) {        mStrokeWidthCircle = (float) progressWidth;    }    /**     * 设置圆角矩形的宽度     *     * @param rectWidth     */    public void setRectWidth(int rectWidth) {        mRectWidth = rectWidth;    }    /**     * 设置矩形方框里面的信息文字     *     * @param msg     */    public void setTipsMessage(String msg) {        mTipsStr = msg;    }    /**     * 设置进度走完后显示的信息     *     * @param msg     */    public void setTipsFinish(String msg) {        mTipsInstallStr = msg;    }    /**     * 设置字体大小     *     * @param fontSize     */    public void setTipsMessageSize(int fontSize) {        mTipsStrFontSize = fontSize;    }    /**     * 设置字体颜色     *     * @param colorRgb     */    public void setFontColor(int colorRgb) {        mFontColor = colorRgb;    }    /**     * 監聽回調     *     * @param onProgressListener     */    public void setOnProgressListener(OnProgressListener onProgressListener) {        mOnProgressListener = onProgressListener;    }    public interface OnProgressListener {        void onProgressFinish();    }

使用方法：

1. xml定义：

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:padding="@dimen/padding_10">    <ImageView        android:layout_width="80dp"        android:layout_height="80dp"        android:src="@mipmap/icon"/>    <LinearLayout        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_marginLeft="@dimen/margin_20"        android:layout_weight="1"        android:gravity="center_vertical"        android:orientation="vertical">        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="QQ华夏手游"            android:textColor="@android:color/black"            android:textSize="@dimen/fonts_18"/>        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="@dimen/margin_4"            android:text="11.8MB"            android:textColor="@android:color/black"            android:textSize="@dimen/fonts_12"/>        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="@dimen/margin_4"            android:text="3000px 超高清体验"            android:textColor="@android:color/black"            android:textSize="@dimen/fonts_12"/>    LinearLayout>    <com.playingjoy.fanrabbit.widget.CircularProgressBar        android:id="@+id/cpb_test_progress"        android:layout_width="80dp"        android:layout_height="40dp"        android:layout_gravity="center"        android:layout_marginBottom="8dp"        android:layout_marginEnd="8dp"        android:layout_marginStart="8dp"        android:layout_marginTop="8dp"        app:defColor="@color/x_red"        app:finishStr="@string/app_name"        app:rectWidth="@dimen/margin_2"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"/>LinearLayout>

2. java 定义

public class TestActivity extends RxActivity {    private CircularProgressBar mCircularProgressBar;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_test);        mCircularProgressBar = findViewById(R.id.cpb_test_progress);//        mCircularProgressBar.setTipsMessage("下载");//        mCircularProgressBar.setDefColor(getResources().getColor(R.color.x_red));//        mCircularProgressBar.setFontColor(getResources().getColor(R.color.x_yellow));//        mCircularProgressBar.setTabColor(getResources().getColor(R.color.x_blue));//        mCircularProgressBar.setProgressColor(getResources().getColor(R.color.colorPrimaryDark));//        mCircularProgressBar.setProgressWidth(4);//        mCircularProgressBar.setRectWidth(1);//        mCircularProgressBar.setTipsFinish("Ly");        mCircularProgressBar.setOnClickListener(v -> {            if (mCircularProgressBar.isInProgress()) {                mCircularProgressBar.doPauseProgress();            } else {                doStartDownLoad();            }        });    }    private void doStartDownLoad() {        mCircularProgressBar.doStartProgress();        io.reactivex.disposables.Disposable disposable = io.reactivex.Observable.interval(1, TimeUnit.SECONDS)                .compose(bindToLifecycle())                .subscribeOn(Schedulers.io())                .observeOn(AndroidSchedulers.mainThread())                .subscribe(aLong -> {                    XLog.e("the progress is " + aLong + 1);                    if (aLong >= 9) {                        mCircularProgressBar.doFinishProgress();                    } else {                        mCircularProgressBar.setProgress((int) ((aLong + 1) * 10), 100);                    }                });        mCircularProgressBar.setOnProgressListener(disposable::dispose);    }}

OK,基本就完成了 往期精彩回顾：

• Android实现短信验证码自动填充功能

• Android仿echo精美弹幕功能

• Android实现头像重叠排列功能

• Android仿QQ个性标签功能

• Android仿QQ侧滑删除的功能