前言
因为本人是个魅族控，魅族的UI以及页面风格真的是深入我心，特别是一些小动效更是让我爱不释手，所以也想仿着来做一点，好吧，啰嗦毕了，看下实现的UI效果。
这个是魅族应用商店下载进度条的进度读取，我挺喜欢这个效果的，具体效果我们分成3部分：
- 没开始之前显示 圆角按钮
- 点击下载后有一个缩回去的动画，缩成一个圆，然后进行进度条加载
- 进度条走到底之后再次横向拉，拉成一个圆角按钮，上面显示安装或者是打开。
下图看下具体的实现效果
很丑的实现效果
github地址：gayHub地址：https://github.com/LinHuanTanLy/CircularProgressBar.git
实现过程
需求分析
先动脑再动手。
很明显这里面涉及到了画弧形，画圆角矩形，画字，属性动画，这些单独拆出来问题不大，合并在一起就麻烦点了。
思路：
- 先画矩形
- 点击 矩形回收，缩到一定倍数后不再画矩形，改而画进度条（虽然是叫进度条，但是我们不考虑用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);
}
自定义属性
- 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,基本就完成了
问题
因为本人也是自定义View初学者，所以很多问题我也不是很清楚是不是会造成问题或者是性能损耗：
- 这样画多个图形来完成页面会不会有性能损耗？
- 我这边定义了mPaintForCircle, mPaintForTag, mPaintForDefCircle, mPaintForText四只画笔来完成绘图，会不会太多了呢？是一个图形对应一个画笔还是可以复用呢？
