在一个APP启动的时候呢，一般经常见到倒计时3秒或几秒的场景，在这个场景中，也经常看到一个有动画加载的view，比如下面今天要实现的效果图：放个GitHub传送门先：CountDownView
countdownview.gif
分析
正所谓知己知彼百战百胜，所以我们每去做一件事情之前都要去花费一定的时间去了解一些相关的东西。那么这样的一个效果呢其实不难，我们只需两个东西即可实现。——canvas和属性动画。
1.自定义我们需要的属性：
那么为了考虑扩展性，那么有些属性呢我们不能写死，自定义属性是最好的选择！首先在values文件夹下新建文件attrs.xml
<declare-styleable name="CountDownView">
<!--view半径-->
<attr name="cd_circle_radius" format="dimension" />
<!--画笔宽度-->
<attr name="cd_arc_width" format="dimension" />
<!--画笔颜色-->
<attr name="cd_arc_color" format="color" />
<!--背景颜色-->
<attr name="cd_bg_color" format="color" />
<!--字体颜色-->
<attr name="cd_text_color" format="color" />
<!--字体尺寸-->
<attr name="cd_text_size" format="dimension" />
<!--动画执行时长-->
<attr name="cd_animator_time" format="integer" />
<!--时间单位-->
<attr name="cd_animator_time_unit" format="string" />
<!--动画进退方式-->
<attr name="cd_retreat_type" format="enum">
<!--外层的圆弧逐渐变长-->
<enum name="forward" value="1" />
<!--外层的圆弧逐渐减短-->
<enum name="back" value="2" />
</attr>
<!--加载进度的开始位置-->
<attr name="cd_location" format="enum">
<enum name="left" value="1" />
<enum name="top" value="2" />
<enum name="right" value="3" />
<enum name="bottom" value="4" />
</attr>
</declare-styleable>
然后在自定义View中获取并设置这些属性：
首先，来声明和获取定义好的属性：
private Paint mPaintBackGround;//背景画笔
private Paint mPaintArc;//圆弧画笔
private Paint mPaintText;//文字画笔
private int mRetreatType;//圆弧绘制方式（增加和减少）
private float mPaintArcWidth;//最外层圆弧的宽度
private int mCircleRadius;//圆圈的半径
private int mPaintArcColor = Color.parseColor("#3C3F41");//初始值
private int mPaintBackGroundColor = Color.parseColor("#55B2E5");//初始值
private int mLoadingTime;//时间，单位秒
private String mLoadingTimeUnit = "";//时间单位
private int mTextColor = Color.BLACK;//字体颜色
private int mTextSize;//字体大小
private int location;//从哪个位置开始
private float startAngle;//开始角度
private float mmSweepAngleStart;//起点
private float mmSweepAngleEnd;//终点
private float mSweepAngle;//扫过的角度
private String mText = "";//要绘制的文字
获取这些属性值：
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CountDownView);
mRetreatType = array.getInt(R.styleable.CountDownView_cd_retreat_type, 1);
location = array.getInt(R.styleable.CountDownView_cd_location, 1);
mCircleRadius = (int) array.getDimension(R.styleable.CountDownView_cd_circle_radius, dip2px(context, 25));//默认25dp
mPaintArcWidth = array.getDimension(R.styleable.CountDownView_cd_arc_width, dip2px(context, 3));//默认3dp
mPaintArcColor = array.getColor(R.styleable.CountDownView_cd_arc_color, mPaintArcColor);
mTextSize = (int) array.getDimension(R.styleable.CountDownView_cd_text_size, dip2px(context, 14));//默认14sp
mTextColor = array.getColor(R.styleable.CountDownView_cd_text_color, mTextColor);
mPaintBackGroundColor = array.getColor(R.styleable.CountDownView_cd_bg_color, mPaintBackGroundColor);
mLoadingTime = array.getInteger(R.styleable.CountDownView_cd_animator_time, 3);//默认3秒
mLoadingTimeUnit = array.getString(R.styleable.CountDownView_cd_animator_time_unit);//时间单位
if (TextUtils.isEmpty(mLoadingTimeUnit)) {
mLoadingTimeUnit = "";
}
array.recycle();
初始化画笔等操作：
private void init() {
//背景设为透明，然后造成Views是圆形视觉错觉
this.setBackground(ContextCompat.getDrawable(mContext, android.R.color.transparent));
mPaintBackGround = new Paint();
mPaintBackGround.setStyle(Paint.Style.FILL);
mPaintBackGround.setAntiAlias(true);
mPaintBackGround.setColor(mPaintBackGroundColor);
mPaintArc = new Paint();
mPaintArc.setStyle(Paint.Style.STROKE);
mPaintArc.setAntiAlias(true);
mPaintArc.setColor(mPaintArcColor);
mPaintArc.setStrokeWidth(mPaintArcWidth);
mPaintText = new Paint();
mPaintText.setStyle(Paint.Style.STROKE);
mPaintText.setAntiAlias(true);
mPaintText.setColor(mTextColor);
mPaintText.setTextSize(mTextSize);
if (mLoadingTime < 0) {
mLoadingTime = 3;
}
if (location == 1) {//默认从左侧开始
startAngle = -180;
} else if (location == 2) {
startAngle = -90;
} else if (location == 3) {
startAngle = 0;
} else if (location == 4) {
startAngle = 90;
}
if (mRetreatType == 1) {
mmSweepAngleStart = 0f;
mmSweepAngleEnd = 360f;
} else {
mmSweepAngleStart = 360f;
mmSweepAngleEnd = 0f;
}
}
2.画出需要的效果：画圆弧，画字体，画背景：
这里我们使用cancas的drawArc()方法，不了解这个方法是什么意思的请跳至此处查看详细解释~drawArc()方法详细介绍
//画北景园
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2 - mPaintArcWidth, mPaintBackGround);
//画圆弧
RectF rectF = new RectF(0 + mPaintArcWidth / 2, 0 + mPaintArcWidth / 2
, mWidth - mPaintArcWidth / 2, mHeight - mPaintArcWidth / 2);
canvas.drawArc(rectF, startAngle, mSweepAngle, false, mPaintArc);
//画文字
float mTetxWidth = mPaintText.measureText(mText, 0, mText.length());
float dx = mWidth / 2 - mTetxWidth / 2;
Paint.FontMetricsInt fontMetricsInt = mPaintText.getFontMetricsInt();
float dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
float baseLine = mHeight / 2 + dy;
canvas.drawText(mText, dx, baseLine, mPaintText);
3.改变属性值，重新绘制；
这一步就是关于属性动画的知识了。
public void start() {
ValueAnimator animator = ValueAnimator.ofFloat(mmSweepAngleStart, mmSweepAngleEnd);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mSweepAngle = (float) valueAnimator.getAnimatedValue();
//获取到需要绘制的角度，重新绘制
invalidate();
}
});
//这里是时间获取和赋值
ValueAnimator animator1 = ValueAnimator.ofInt(mLoadingTime, 0);
animator1.setInterpolator(new LinearInterpolator());
animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int time = (int) valueAnimator.getAnimatedValue();
mText = time + mLoadingTimeUnit;
}
});
AnimatorSet set = new AnimatorSet();
set.playTogether(animator, animator1);
set.setDuration(mLoadingTime * 1000);
set.setInterpolator(new LinearInterpolator());
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
clearAnimation();
if (loadingFinishListener != null) {
loadingFinishListener.finish();
}
}
});
}
4.接口回调。
这一步就很简单了，只要监听动画执行结束就是完成了加载，所以我们先来写一个接口。
private OnLoadingFinishListener loadingFinishListener;
public void setOnLoadingFinishListener(OnLoadingFinishListener listener) {
this.loadingFinishListener = listener;
}
public interface OnLoadingFinishListener {
void finish();
}
在对应的Activity中回调接口就可以了。
OK,到这里就算全部结束了，下面我把源码放进来。
CountDownView.java：
package com.zhuyong.countdownciew;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
import com.zhuyong.counttimeview.R;
/**
* Created by zhuyong on 2017/8/7.
* 启动页停留n秒动画view
*/
public class CountDownView extends View {
private Context mContext;//上下文
private Paint mPaintBackGround;//背景画笔
private Paint mPaintArc;//圆弧画笔
private Paint mPaintText;//文字画笔
private int mRetreatType;//圆弧绘制方式（增加和减少）
private float mPaintArcWidth;//最外层圆弧的宽度
private int mCircleRadius;//圆圈的半径
private int mPaintArcColor = Color.parseColor("#3C3F41");//初始值
private int mPaintBackGroundColor = Color.parseColor("#55B2E5");//初始值
private int mLoadingTime;//时间，单位秒
private String mLoadingTimeUnit = "";//时间单位
private int mTextColor = Color.BLACK;//字体颜色
private int mTextSize;//字体大小
private int location;//从哪个位置开始
private float startAngle;//开始角度
private float mmSweepAngleStart;//起点
private float mmSweepAngleEnd;//终点
private float mSweepAngle;//扫过的角度
private String mText = "";//要绘制的文字
private int mWidth;
private int mHeight;
public CountDownView(Context context) {
this(context, null);
}
public CountDownView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CountDownView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CountDownView);
mRetreatType = array.getInt(R.styleable.CountDownView_cd_retreat_type, 1);
location = array.getInt(R.styleable.CountDownView_cd_location, 1);
mCircleRadius = (int) array.getDimension(R.styleable.CountDownView_cd_circle_radius, dip2px(context, 25));//默认25dp
mPaintArcWidth = array.getDimension(R.styleable.CountDownView_cd_arc_width, dip2px(context, 3));//默认3dp
mPaintArcColor = array.getColor(R.styleable.CountDownView_cd_arc_color, mPaintArcColor);
mTextSize = (int) array.getDimension(R.styleable.CountDownView_cd_text_size, dip2px(context, 14));//默认14sp
mTextColor = array.getColor(R.styleable.CountDownView_cd_text_color, mTextColor);
mPaintBackGroundColor = array.getColor(R.styleable.CountDownView_cd_bg_color, mPaintBackGroundColor);
mLoadingTime = array.getInteger(R.styleable.CountDownView_cd_animator_time, 3);//默认3秒
mLoadingTimeUnit = array.getString(R.styleable.CountDownView_cd_animator_time_unit);//时间单位
if (TextUtils.isEmpty(mLoadingTimeUnit)) {
mLoadingTimeUnit = "";
}
array.recycle();
init();
}
private void init() {
//背景设为透明，然后造成圆形View的视觉错觉
this.setBackground(ContextCompat.getDrawable(mContext, android.R.color.transparent));
mPaintBackGround = new Paint();
mPaintBackGround.setStyle(Paint.Style.FILL);
mPaintBackGround.setAntiAlias(true);
mPaintBackGround.setColor(mPaintBackGroundColor);
mPaintArc = new Paint();
mPaintArc.setStyle(Paint.Style.STROKE);
mPaintArc.setAntiAlias(true);
mPaintArc.setColor(mPaintArcColor);
mPaintArc.setStrokeWidth(mPaintArcWidth);
mPaintText = new Paint();
mPaintText.setStyle(Paint.Style.STROKE);
mPaintText.setAntiAlias(true);
mPaintText.setColor(mTextColor);
mPaintText.setTextSize(mTextSize);
if (mLoadingTime < 0) {
mLoadingTime = 3;
}
if (location == 1) {//默认从左侧开始
startAngle = -180;
} else if (location == 2) {
startAngle = -90;
} else if (location == 3) {
startAngle = 0;
} else if (location == 4) {
startAngle = 90;
}
if (mRetreatType == 1) {
mmSweepAngleStart = 0f;
mmSweepAngleEnd = 360f;
} else {
mmSweepAngleStart = 360f;
mmSweepAngleEnd = 0f;
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//获取view宽高
mWidth = w;
mHeight = h;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//因为必须是圆形的view，所以在这里重新赋值
setMeasuredDimension(mCircleRadius * 2, mCircleRadius * 2);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画北景园
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2 - mPaintArcWidth, mPaintBackGround);
//画圆弧
RectF rectF = new RectF(0 + mPaintArcWidth / 2, 0 + mPaintArcWidth / 2
, mWidth - mPaintArcWidth / 2, mHeight - mPaintArcWidth / 2);
canvas.drawArc(rectF, startAngle, mSweepAngle, false, mPaintArc);
//画文字
float mTetxWidth = mPaintText.measureText(mText, 0, mText.length());
float dx = mWidth / 2 - mTetxWidth / 2;
Paint.FontMetricsInt fontMetricsInt = mPaintText.getFontMetricsInt();
float dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
float baseLine = mHeight / 2 + dy;
canvas.drawText(mText, dx, baseLine, mPaintText);
}
public void start() {
ValueAnimator animator = ValueAnimator.ofFloat(mmSweepAngleStart, mmSweepAngleEnd);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mSweepAngle = (float) valueAnimator.getAnimatedValue();
//获取到需要绘制的角度，重新绘制
invalidate();
}
});
//这里是时间获取和赋值
ValueAnimator animator1 = ValueAnimator.ofInt(mLoadingTime, 0);
animator1.setInterpolator(new LinearInterpolator());
animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int time = (int) valueAnimator.getAnimatedValue();
mText = time + mLoadingTimeUnit;
}
});
AnimatorSet set = new AnimatorSet();
set.playTogether(animator, animator1);
set.setDuration(mLoadingTime * 1000);
set.setInterpolator(new LinearInterpolator());
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
clearAnimation();
if (loadingFinishListener != null) {
loadingFinishListener.finish();
}
}
});
}
private OnLoadingFinishListener loadingFinishListener;
public void setOnLoadingFinishListener(OnLoadingFinishListener listener) {
this.loadingFinishListener = listener;
}
public interface OnLoadingFinishListener {
void finish();
}
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
我把这个view封装成了library和上传，用得到的朋友可以直接在线依赖到自己的项目中，至于如何集成和使用，请看GitHub：CountDownView
好的，至此全部结束，感谢！！！
网友评论