仿魅族应用商店下载进度控件

时间 2019-11-30

标签应用商店下载进度控件繁體版

原文原文链接

前言

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

没开始以前显示圆角按钮
点击下载后有一个缩回去的动画，缩成一个圆，而后进行进度条加载
进度条走到底以后再次横向拉，拉成一个圆角按钮，上面显示安装或者是打开。

下图看下具体的实现效果 java

gayHub地址：https://github.com/LinHuanTanLy/CircularProgressBar.gitreact

实现过程

需求分析

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

先画矩形
点击矩形回收，缩到必定倍数后再也不画矩形，改而画进度条（虽然是叫进度条，可是咱们不考虑用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来判断是画什么图形，相对应的方法以下：git

/** * 画中间的暂停按钮 * * @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);
        }
    }

复制代码

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

属性动画

/** * 用属性动画绘制组件 开始画圆角矩形 */
    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实在是很差找（也多是我太笨），这里是在一个限定好的圆角矩形里面写文字，因此相对比较好处理一些：canvas

/** * 画矩形框中的文本 * * @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);
    }
复制代码

自定义属性

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>
复制代码

构造方法中获取属性文件

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();
    }
复制代码

使用方法：

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>
复制代码

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,基本就完成了app

问题

由于本人也是自定义View初学者，因此不少问题我也不是很清楚是否是会形成问题或者是性能损耗：ide

这样画多个图形来完成页面会不会有性能损耗？
我这边定义了mPaintForCircle, mPaintForTag, mPaintForDefCircle, mPaintForText四只画笔来完成绘图，会不会太多了呢？是一个图形对应一个画笔仍是能够复用呢？