Android：一种动态loading加载图标
1.LoadingView 效果分析
1.1 最终实现的效果图如下
1.2 效果分析
LoadingView 有三个不同形状的 View 进行下落回弹并且不断切换，与此同时，底部有阴影在不断的切换大小，最底下是文字说明。
2.实现分析
先自定义 ShapeView 打造三个形状变换的 View。
public classShapeViewextendsView{ private Shape mCurrentShape = Shape.Circle;
Paint mPaint;
private Path mPath;
public ShapeView(Context context) {
this(context, null);
}
public ShapeView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShapeView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 只保证是正方形 int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(Math.min(width, height), Math.min(width, height));
}
@Override protected void onDraw(Canvas canvas) {
switch (mCurrentShape) {
case Circle:
// 画圆形 int center = getWidth() / 2;
mPaint.setColor(ContextCompat.getColor(getContext(), R.color.circle));
canvas.drawCircle(center, center, center, mPaint);
break;
case Square:
// 画正方形 mPaint.setColor(ContextCompat.getColor(getContext(), R.color.rect));
canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
break;
case Triangle:
// 画三角 Path 画路线 mPaint.setColor(ContextCompat.getColor(getContext(), R.color.triangle));
if (mPath == null) {
// 画路径 mPath = new Path();
mPath.moveTo(getWidth() / 2, 0);
mPath.lineTo(0, (float) ((getWidth() / 2) * Math.sqrt(3)));
mPath.lineTo(getWidth(), (float) ((getWidth() / 2) * Math.sqrt(3)));
// path.lineTo(getWidth()/2,0); mPath.close();// 把路径闭合 }
canvas.drawPath(mPath, mPaint);
break;
}
}
/**
* 改变形状
*/ public void exchange() {
switch (mCurrentShape) {
case Circle:
mCurrentShape = Shape.Square;
break;
case Square:
mCurrentShape = Shape.Triangle;
break;
case Triangle:
// 画三角 Path 画路线 mCurrentShape = Shape.Circle;
break;
}
// 不断重新绘制形状 invalidate();
}
public enum Shape {
Circle, Square, Triangle
}
public Shape getCurrentShape() {
return mCurrentShape;
}
自定义 ViewGroup 打造整体 View。
public classLoadingViewextendsLinearLayout{ private ShapeView mShapeView;// 上面的形状 private View mShadowView;// 中间的阴影 private int mTranslationDistance = 0;
// 动画执行的时间 private final long ANIMATOR_DURATION = 500;
// 是否停止动画 private boolean mIsStopAnimator = false;
public LoadingView(Context context) {
this(context, null);
}
public LoadingView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public LoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mTranslationDistance = dip2px(80);
initLayout();
}
private int dip2px(int dip) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics());
}
/**
* 初始化加载布局
*/ private void initLayout() {
// 1. 加载写好的 ui_loading_view // 1.1 实例化View // this 代表把 ui_loading_view 加载到 LoadingView 中 inflate(getContext(), R.layout.layout_loading, this);
mShapeView = (ShapeView) findViewById(R.id.shape_view);
mShadowView = findViewById(R.id.shadow_view);
post(new Runnable() {
@Override public void run() {
// onResume 之后View绘制流程执行完毕之后（View的绘制流程源码分析那一章） startFallAnimator();
}
});
// onCreate() 方法中执行 ，布局文件解析 反射创建实例 }
// 开始下落动画 private void startFallAnimator() {
if (mIsStopAnimator) {
return;
}
// 动画作用在谁的身上 // 下落位移动画 ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", 0, mTranslationDistance);
// 配合中间阴影缩小 ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 1f, 0.3f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(ANIMATOR_DURATION);
// 下落的速度应该是越来越快 animatorSet.setInterpolator(new AccelerateInterpolator());
animatorSet.playTogether(translationAnimator, scaleAnimator);
animatorSet.start();
// 下落完之后就上抛了，监听动画执行完毕 // 是一种思想，在 Adapter 中的 BannerView 写过 animatorSet.addListener(new AnimatorListenerAdapter() {
@Override public void onAnimationEnd(Animator animation) {
// 改变形状 mShapeView.exchange();
// 下落完之后就上抛了 startUpAnimator();
// 开始旋转 }
});
}
/**
* 开始执行上抛动画
*/ private void startUpAnimator() {
if (mIsStopAnimator) {
return;
}
Log.e("TAG", "startUpAnimator" + this);
// 动画作用在谁的身上 // 下落位移动画 ObjectAnimator translationAnimator = ObjectAnimator.ofFloat(mShapeView, "translationY", mTranslationDistance, 0);
// 配合中间阴影缩小 ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mShadowView, "scaleX", 0.3f, 1f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(ANIMATOR_DURATION);
animatorSet.setInterpolator(new DecelerateInterpolator());
animatorSet.playTogether(translationAnimator, scaleAnimator);
// 先执行 translationAnimator 接着执行 scaleAnimator // 上抛完之后就下落了，监听动画执行完毕 animatorSet.addListener(new AnimatorListenerAdapter() {
@Override public void onAnimationEnd(Animator animation) {
// 上抛完之后就下落了 startFallAnimator();
}
@Override public void onAnimationStart(Animator animation) {
// 开始旋转 startRotationAnimator();
}
});
// 执行 -> 监听的 onAnimationStart 方法 animatorSet.start();
}
/**
* 上抛的时候需要旋转
*/ private void startRotationAnimator() {
ObjectAnimator rotationAnimator = null;
switch (mShapeView.getCurrentShape()) {
case Circle:
case Square:
// 180 rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, 180);
break;
case Triangle:
// 120 rotationAnimator = ObjectAnimator.ofFloat(mShapeView, "rotation", 0, -120);
break;
}
rotationAnimator.setDuration(ANIMATOR_DURATION);
rotationAnimator.setInterpolator(new DecelerateInterpolator());
rotationAnimator.start();
}
@Override public void setVisibility(int visibility) {
super.setVisibility(View.INVISIBLE);// 不要再去排放和计算，少走一些系统的源码（View的绘制流程） // 清理动画 mShapeView.clearAnimation();
mShadowView.clearAnimation();
// 把LoadingView从父布局移除 ViewGroup parent = (ViewGroup) getParent();
if (parent != null) {
parent.removeView(this);// 从父布局移除 removeAllViews();// 移除自己所有的View }
mIsStopAnimator = true;
}
}
在 LoadingView.java 中，我们重写了 setVisibility(int visibility)，就是当加载完毕需要 GONE/INVISIBLE 掉 LoadingView 时，统一调 setVisibility(View.INVISIBLE)，目的是不要再去摆放布局和计算，少走一些系统的源码，并做一些清理工作。
@OverridepublicvoidsetVisibility(intvisibility) {super.setVisibility(View.INVISIBLE);// 不要再去摆放布局和计算，少走一些系统的源码（View的绘制流程）// 清理动画mShapeView.clearAnimation(); mShadowView.clearAnimation();// 把LoadingView从父布局移除ViewGroup parent = (ViewGroup) getParent();if(parent !=null) { parent.removeView(this);// 从父布局移除removeAllViews();// 移除自己所有的View} mIsStopAnimator =true; }
