您的位置:首页 > 移动开发 > Android开发

Android自定义加载loading view动画组件

2016-08-27 09:05 1051 查看

在github上找的一个有点酷炫的loading动画https://github.com/Fichardu/CircleProgress 

我写写使用步骤 

自定义view(CircleProgress )的代码 

package com.hysmarthotel.view;
import com.hysmarthotel.roomcontrol.R;
import com.hysmarthotel.util.EaseInOutCubicInterpolator;
import android.animation.TimeInterpolator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AnimationUtils;
public class CircleProgress extends View {
private static final int RED = 0xFFE5282C;
private static final int YELLOW = 0xFF1F909A;
private static final int BLUE = 0xFFFC9E12;
private static final int COLOR_NUM = 3;
private int[] COLORS;
private TimeInterpolator mInterpolator = new EaseInOutCubicInterpolator();
private final double DEGREE = Math.PI / 180;
private Paint mPaint;
private int mViewSize;
private int mPointRadius;
private long mStartTime;
private long mPlayTime;
private boolean mStartAnim = false;
private Point mCenter = new Point();
private ArcPoint[] mArcPoint;
private static final int POINT_NUM = 15;
private static final int DELTA_ANGLE = 360 / POINT_NUM;
private long mDuration = 3600;
public CircleProgress(Context context) {
super(context);
init(null, 0);
}
public CircleProgress(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}
public CircleProgress(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}
private void init(AttributeSet attrs, int defStyle) {
mArcPoint = new ArcPoint[POINT_NUM];
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CircleProgress, defStyle, 0);
int color1 = a.getColor(R.styleable.CircleProgress_color1, RED);
int color2 = a.getColor(R.styleable.CircleProgress_color2, YELLOW);
int color3 = a.getColor(R.styleable.CircleProgress_color3, BLUE);
a.recycle();
COLORS = new int[]{color1, color2, color3};
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int defaultSize = getResources().getDimensionPixelSize(R.dimen.default_circle_view_size);
int width = getDefaultSize(defaultSize, widthMeasureSpec);
int height = getDefaultSize(defaultSize, heightMeasureSpec);
mViewSize = Math.min(width, height);
setMeasuredDimension(mViewSize, mViewSize);
mCenter.set(mViewSize / 2, mViewSize / 2);
calPoints(1.0f);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.translate(mCenter.x, mCenter.y);
float factor = getFactor();
canvas.rotate(36 * factor);
float x, y;
for (int i = 0; i < POINT_NUM; ++i) {
mPaint.setColor(mArcPoint[i].color);
float itemFactor = getItemFactor(i, factor);
x = mArcPoint[i].x - 2 * mArcPoint[i].x * itemFactor;
y = mArcPoint[i].y - 2 * mArcPoint[i].y * itemFactor;
canvas.drawCircle(x, y, mPointRadius, mPaint);
}
canvas.restore();
if (mStartAnim) {
postInvalidate();
}
}
private void calPoints(float factor) {
int radius = (int) (mViewSize / 3 * factor);
mPointRadius = radius / 12;
for (int i = 0; i < POINT_NUM; ++i) {
float x = radius * -(float) Math.sin(DEGREE * DELTA_ANGLE * i);
float y = radius * -(float) Math.cos(DEGREE * DELTA_ANGLE * i);
ArcPoint point = new ArcPoint(x, y, COLORS[i % COLOR_NUM]);
mArcPoint[i] = point;
}
}
private float getFactor() {
if (mStartAnim) {
mPlayTime = AnimationUtils.currentAnimationTimeMillis() - mStartTime;
}
float factor = mPlayTime / (float) mDuration;
return factor % 1f;
}
private float getItemFactor(int index, float factor) {
float itemFactor = (factor - 0.66f / POINT_NUM * index) * 3;
if (itemFactor < 0f) {
itemFactor = 0f;
} else if (itemFactor > 1f) {
itemFactor = 1f;
}
return mInterpolator.getInterpolation(itemFactor);
}
public void startAnim() {
mPlayTime = mPlayTime % mDuration;
mStartTime = AnimationUtils.currentAnimationTimeMillis() - mPlayTime;
mStartAnim = true;
postInvalidate();
}
public void reset() {
stopAnim();
mPlayTime = 0;
postInvalidate();
}
public void stopAnim() {
mStartAnim = false;
}
public void setInterpolator(TimeInterpolator interpolator) {
mInterpolator = interpolator;
}
public void setDuration(long duration) {
mDuration = duration;
}
public void setRadius(float factor) {
stopAnim();
calPoints(factor);
startAnim();
}
static class ArcPoint {
float x;
float y;
int color;
ArcPoint(float x, float y, int color) {
this.x = x;
this.y = y;
this.color = color;
}
}
}

EaseInOutCubicInterpolator是自定义view(CircleProgress )中要是用的一个工具 

package com.hysmarthotel.util;
import android.animation.TimeInterpolator;
public class EaseInOutCubicInterpolator implements TimeInterpolator {
@Override
public float getInterpolation(float input) {
if ((input *= 2) < 1.0f) {
return 0.5f * input * input * input;
}
input -= 2;
return 0.5f * input * input * input + 1;
}
}

在activity中的调用(还有一些其他用法可以自己看看github上的源代码) 

mProgressView = (CircleProgress)findViewById(R.id.progress_vie);
mProgressView.startAnim(); //开始
mProgressView.stopAnim(); //结束
mProgressView.setRadius(factor); //半径
mProgressView.reset(); //复原

在xml文件中的布局 

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:circleprogress="http://schemas.android.com/apk/res/com.hysmarthotel.roomcontrol"  //这个地方记得要加 //包名
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg1" >
<com.hysmarthotel.view.CircleProgress                   //类名
android:id="@+id/progress_vie"
android:layout_x="350.5px"
android:layout_y="150.0px"
android:layout_width="1140.0px"
android:layout_height="700.0px"
circleprogress:color1="@android:color/holo_red_light"   //这些参数就是通过xmlns:circleprogress,和attrs文件相关联的     circleprogress:color2="@android:color/holo_green_light"     circleprogress:color3="@android:color/holo_blue_light" />

自己在values目录中新建的attrs文件,这是与自定义view中自定义参数相关的

<declare-styleable name="CircleProgress">
<attr name="color1" format="reference|color"/>
<attr name="color2" format="reference|color"/>
<attr name="color3" format="reference|color"/>
</declare-styleable>

自己在values目录中新建的dimens文件,这个只是几个颜色参数

<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="default_circle_view_size">200dp</dimen>
</resources>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Android loading 加载