一、概述
本次自定义view,仿的是极客学院的一个动态加载图,四个小圆交替轮循。项目代码简洁,用到了如下知识点:
1、ValueAnimator动画与监听
2、View的测量与绘制
3、canvas绘制图形
二、思路
1、在onMeasure方法中确定view的大小
2、在onDraw方法中根据fraction绘制四个圆形,
3、在我们通过startAnim开启动画的时候,用ValueAnimator.ofFloat(0, 1)来模拟一个0~1的过程,监听此过程,通过此fraction的改变来改变四个小圆的位置坐标并引导view重绘来完成小圆的平移动画
4、当不需要动画时,调用stopAnim来取消动画,否则可能造成内存泄漏(在动画运行的线程调用)
三、实现
难点主要在于四个点的位置坐标的计算,以左上角为例:
// left-top
canvas.drawCircle(radius + fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintRed);
前面两个参数用户设置圆的半径,左上的圆初始时据左距右都有半径大小的长度,当fraction变化时,x方向的总位移是(width - 2) * radius,乘以fraction就可以得到x方向的变化量,y方向同理。其他几个点类似,注意方向与正负
注意:
1、fraction不可为int类类型,否则达不到想要的效果
2、要记得调用invalidate()方法,否则无效果
package com.yu.myloaderview;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
/**
* Created by pecu on 2016/09/15.
*/
public class LoaderView extends View {
private static final int radius = 12; // 圆的半径
private static final int width = 8; // radius*width为view的宽度
private static final int textSize = 50;
private static float fraction = 0;
private Paint mPaintRed, mPaintBlue, mPaintGreen, mPaintYellow;
private ValueAnimator animator;
public LoaderView(Context context) {
this(context, null);
}
public LoaderView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoaderView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaintRed = new Paint();
mPaintBlue = new Paint();
mPaintGreen = new Paint();
mPaintYellow = new Paint();
mPaintRed.setAntiAlias(true);
mPaintBlue.setAntiAlias(true);
mPaintGreen.setAntiAlias(true);
mPaintYellow.setAntiAlias(true);
mPaintYellow.setColor(Color.parseColor("#ff9933"));
mPaintGreen.setColor(Color.GREEN);
mPaintBlue.setColor(Color.parseColor("#ff3399ff"));
mPaintRed.setColor(Color.RED);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(width * radius, width * radius);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制四个圆,通过fraction来改变他们的位置
// left-top
canvas.drawCircle(radius + fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintRed);
// left-bottom
canvas.drawCircle(radius + fraction * (width - 2) * radius, radius * (width - 1) - fraction * (width - 2) * radius, radius, mPaintYellow);
// right-top
canvas.drawCircle(radius * (width - 1) - fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintBlue);
// right-bottom
canvas.drawCircle(radius * (width - 1) - fraction * (width - 2) * radius, radius * (width - 1) - fraction * (width - 2) * radius, radius, mPaintGreen);
}
/**
* 开启动画
*/
public void startAnim() {
animator = ValueAnimator.ofFloat(0, 1);
animator.setDuration(800);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
fraction = animation.getAnimatedFraction(); // 设置fraction
invalidate(); // 使view重绘
}
});
animator.start();
}
/**
* 停止动画,在动画运行的线程中调用
*/
public void stopAnim() {
if (animator != null) {
animator.cancel();
}
}
}
在MainActivity中使用
package com.yu.myloaderview;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
public class MainActivity extends AppCompatActivity {
LoaderView loaderView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
loaderView = (LoaderView) findViewById(R.id.laodview);
loaderView.startAnim();
new Thread(){
@Override
public void run() {
super.run();
SystemClock.sleep(5000); // 模拟耗时
runOnUiThread(new Runnable() {
@Override
public void run() {
// loaderView.stopAnim(); // 停止动画,主线程调用
Log.e("TAG", "stopAnim");
}
});
}
}.start();
}
@Override
protected void onDestroy() {
super.onDestroy();
loaderView.stopAnim();
}
}
四、效果图
效果图如下,有点卡顿是因为制作图的原因
中秋版,祝大家中秋快乐~ (有点卡顿,录屏的原因)
这个主要添加了文字,只有onDraw部分有变化,并且注意绘制文字时,y是按基线绘制的,即左下角为参考点。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制四个圆,通过fraction来改变他们的位置
// right-top
canvas.drawCircle(radius * (width - 1) - fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintBlue);
mPaintBlue.setTextSize(textSize);
canvas.drawText("乐", 0, 1, -radius / 2 + radius * (width - 1) - fraction * (width - 2) * radius, radius * 3 / 2 + fraction * (width - 2) * radius, mPaintRed);
// left-bottom
canvas.drawCircle(radius + fraction * (width - 2) * radius, radius * (width - 1) - fraction * (width - 2) * radius, radius, mPaintYellow);
mPaintRed.setTextSize(textSize);
canvas.drawText("快", 0, 1, radius / 2 + fraction * (width - 2) * radius, radius / 2 + radius * (width - 1) - fraction * (width - 2) * radius, mPaintRed);
// right-bottom
canvas.drawCircle(radius * (width - 1) - fraction * (width - 2) * radius, radius * (width - 1) - fraction * (width - 2) * radius, radius, mPaintGreen);
mPaintRed.setTextSize(textSize);
canvas.drawText("秋", 0, 1, -radius / 2 + radius * (width - 1) - fraction * (width - 2) * radius, radius / 2 + radius * (width - 1) - fraction * (width - 2) * radius, mPaintRed);
// left-top
canvas.drawCircle(radius + fraction * (width - 2) * radius, radius + fraction * (width - 2) * radius, radius, mPaintRed);
mPaintBlue.setTextSize(textSize);
canvas.drawText("中", 0, 1, radius / 2 + fraction * (width - 2) * radius, radius * 3 / 2 + fraction * (width - 2) * radius, mPaintBlue);
}