最近,有点闲,一闲就出事!没事就想去论坛呀,贴吧呀,去逛逛,看看有没有关于我大安卓的一些新的技术或者好用的开源框架,这不,下面我要和大家聊的就是关于加载数据时会出现的一个用户友好的进度条,如图1-1:
想这样的自定义的进度条,它只能支持到Android 4.0及以上版本,因此会有一些局限性,当然下面的下面我会讲一个兼容到Android 2.3版本的进度条!耐心等着吧,各位!
首先,让我们一起来瞧瞧这个进度条怎么破:
第一步:上布局!
<RelativeLayout 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="match_parent"
>
<ryancheng.example.progressbar.CircularProgress
android:layout_width="60dp"
android:layout_height="60dp"
app:borderWidth="6dp"
android:layout_centerInParent="true" />
</RelativeLayout>
在布局中,引用了自定义属性和自定义View,那么,首先先说说自定义属性:
①.自定义属性:/res/values/attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircularProgress">
<attr name="borderWidth" format="dimension" />
</declare-styleable>
</resources>
②.自定义View:
import android.animation.Animator;
import android.animation.ObjectAnimator;
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.Paint.Cap;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Property;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;
public class CircularProgress extends View {
private static final Interpolator ANGLE_INTERPOLATOR = new LinearInterpolator();
private static final Interpolator SWEEP_INTERPOLATOR = new AccelerateDecelerateInterpolator();
private static final int ANGLE_ANIMATOR_DURATION = 2000;
private static final int SWEEP_ANIMATOR_DURATION = 900;
private static final int MIN_SWEEP_ANGLE = 30;
private static final int DEFAULT_BORDER_WIDTH = 3;
private final RectF fBounds = new RectF();
private ObjectAnimator mObjectAnimatorSweep;
private ObjectAnimator mObjectAnimatorAngle;
private boolean mModeAppearing = true;
private Paint mPaint;
private float mCurrentGlobalAngleOffset;
private float mCurrentGlobalAngle;
private float mCurrentSweepAngle;
private float mBorderWidth;
private boolean mRunning;
private int[] mColors;
private int mCurrentColorIndex;
private int mNextColorIndex;
public CircularProgress(Context context) {
this(context, null);
}
public CircularProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircularProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
float density = context.getResources().getDisplayMetrics().density;
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircularProgress, defStyleAttr, 0);
mBorderWidth = a.getDimension(R.styleable.CircularProgress_borderWidth, DEFAULT_BORDER_WIDTH * density);
a.recycle();
mColors = new int[4];
mColors[0] = context.getResources().getColor(R.color.red);
mColors[1] = context.getResources().getColor(R.color.yellow);
mColors[2] = context.getResources().getColor(R.color.green);
mColors[3] = context.getResources().getColor(R.color.blue);
mCurrentColorIndex = 0;
mNextColorIndex = 1;
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Cap.ROUND);
mPaint.setStrokeWidth(mBorderWidth);
mPaint.setColor(mColors[mCurrentColorIndex]);
setupAnimations();
}
private void start() {
if (isRunning()) {
return;
}
mRunning = true;
mObjectAnimatorAngle.start();
mObjectAnimatorSweep.start();
invalidate();
}
private void stop() {
if (!isRunning()) {
return;
}
mRunning = false;
mObjectAnimatorAngle.cancel();
mObjectAnimatorSweep.cancel();
invalidate();
}
private boolean isRunning() {
return mRunning;
}
@Override
protected void onVisibilityChanged(View changedView, int visibility) {
super.onVisibilityChanged(changedView, visibility);
if (visibility == VISIBLE) {
start();
} else {
stop();
}
}
@Override
protected void onAttachedToWindow() {
start();
super.onAttachedToWindow();
}
@Override
protected void onDetachedFromWindow() {
stop();
super.onDetachedFromWindow();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
fBounds.left = mBorderWidth / 2f + .5f;
fBounds.right = w - mBorderWidth / 2f - .5f;
fBounds.top = mBorderWidth / 2f + .5f;
fBounds.bottom = h - mBorderWidth / 2f - .5f;
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
float startAngle = mCurrentGlobalAngle - mCurrentGlobalAngleOffset;
float sweepAngle = mCurrentSweepAngle;
if (mModeAppearing) {
mPaint.setColor(gradient(mColors[mCurrentColorIndex], mColors[mNextColorIndex],
mCurrentSweepAngle / (360 - MIN_SWEEP_ANGLE * 2)));
sweepAngle += MIN_SWEEP_ANGLE;
} else {
startAngle = startAngle + sweepAngle;
sweepAngle = 360 - sweepAngle - MIN_SWEEP_ANGLE;
}
canvas.drawArc(fBounds, startAngle, sweepAngle, false, mPaint);
}
private static int gradient(int color1, int color2, float p) {
int r1 = (color1 & 0xff0000) >> 16;
int g1 = (color1 & 0xff00) >> 8;
int b1 = color1 & 0xff;
int r2 = (