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

2,902 阅读6分钟

前言

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

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

下图看下具体的实现效果

很丑的实现效果

gayHub地址: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>
  1. 构造方法中获取属性文件
 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>
  1. 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,基本就完成了

问题

因为本人也是自定义View初学者,所以很多问题我也不是很清楚是不是会造成问题或者是性能损耗:

  1. 这样画多个图形来完成页面会不会有性能损耗?
  2. 我这边定义了mPaintForCircle, mPaintForTag, mPaintForDefCircle, mPaintForText四只画笔来完成绘图,会不会太多了呢?是一个图形对应一个画笔还是可以复用呢?