简单漂亮的”加载中“控件

快开始项目了，还有点时间，写了一个很简单但效果蛮不错的加载中控件，(*^__^*) 

看效果：



1.效果：1.中间透明度变化由0到255变化，不断循环。

             2.环形圈360度旋转，不断循环。

2.实现思路：由两张图片组合完成，中间的图片进行透明度变化动画，外围图片进行旋转动画。

3.具体代码：

对于中间的图片我通过自定义一个drawable文件去完成，代码如下：

/**
* @author huangweia 2016上午10:53:13 主页：http://blog.csdn.net/u014614038
*
*/
public class AlphaChangingDarwable extends Drawable implements Animatable {
private Bitmap mBitmap;
private Paint mPaint;
private ValueAnimator mValueAnimator;

public AlphaChangingDarwable(Context context, int drawable) {
mBitmap = BitmapFactory.decodeResource(context.getResources(), drawable);
mPaint = new Paint();
mPaint.setAntiAlias(true);
}

public void setBitmapWith(float x,float y){
mBitmap = makebig(mBitmap, x, y);
}

@Override
public void start() {

mValueAnimator = ValueAnimator.ofInt(new int[] { 0, 255 });
mValueAnimator.setDuration(1500);
mValueAnimator.setInterpolator(new LinearInterpolator());// 添加线性变化率
mValueAnimator.setEvaluator(new TypeEvaluator<Integer>() {

@Override
public Integer evaluate(float fraction, Integer startValue, Integer endValue) {

return (int) (fraction * endValue);

}
});

mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {

@Override
public void onAnimationUpdate(ValueAnimator animation) {
Integer value = (Integer) animation.getAnimatedValue();
mPaint.setAlpha(value);
invalidateSelf();

}
});

mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);
mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
mValueAnimator.start();
}

@Override
public void stop() {
mValueAnimator.cancel();

}

@Override
public boolean isRunning() {

return mValueAnimator.isRunning();
}

@Override
public void draw(Canvas canvas) {
canvas.drawBitmap(mBitmap, (canvas.getWidth() -mBitmap.getWidth())/2, (canvas.getHeight() -mBitmap.getHeight())/2, mPaint);
}

@Override
public void setAlpha(int alpha) {

}

@Override
public void setColorFilter(ColorFilter colorFilter) {

}

@Override
public int getOpacity() {

return PixelFormat.RGBA_8888;
}

private  Bitmap makebig(Bitmap bitmap,float x,float y) {
Matrix matrix = new Matrix();
matrix.postScale(1.5f,1.5f); //长和宽放大缩小的比例
Bitmap resizeBmp = Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true);
return resizeBmp;
}

}

对于整个控件自定义一个layout，往里面添加两个imageview，中间的那个imageview设置背景drawable为上面自定义的drawable，对于外围imageview添加旋转动画就可以了：

/**
* @author huangweia 2016上午11:29:33 主页：http://blog.csdn.net/u014614038
*
*/
public class AlphaLoadingView extends RelativeLayout {

private Context mContext;
private int mWith = 120;
private ImageView mLoadingImage, mAlphaImage;
private AlphaChangingDarwable mAlphaChangingDarwable;

public AlphaLoadingView(Context context) {
super(context);
inite(context);
}

public AlphaLoadingView(Context context, AttributeSet attrs) {
super(context, attrs);
inite(context);
}

public AlphaLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
inite(context);
}

@SuppressLint("NewApi")
public AlphaLoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
inite(context);
}

private void inite(Context context) {
mContext = context;
mLoadingImage = new ImageView(mContext);
mAlphaImage = new ImageView(mContext);
setWith(mWith);
}

private void setWith(int with) {
mWith = with;
LayoutParams p0 = new LayoutParams(mWith, mWith);
p0.addRule(RelativeLayout.CENTER_IN_PARENT);
mLoadingImage.setLayoutParams(p0);
mAlphaImage.setLayoutParams(p0);
this.addView(mAlphaImage);
this.addView(mLoadingImage);
}

public void start() {
mAlphaChangingDarwable = new AlphaChangingDarwable(mContext, R.drawable.loadingview);
mAlphaImage.setBackgroundDrawable(mAlphaChangingDarwable);
mLoadingImage.setBackgroundResource(R.drawable.cycleview);
ObjectAnimator mAnimatorRotate = ObjectAnimator.ofFloat(mLoadingImage, "rotation", 0.0f, 359.0f);
mAnimatorRotate.setInterpolator(new LinearInterpolator());
mAnimatorRotate.setDuration(1000);
mAnimatorRotate.setRepeatMode(Animation.RESTART);
mAnimatorRotate.setRepeatCount(ValueAnimator.INFINITE);
mAnimatorRotate.start();
mAlphaChangingDarwable.setBitmapWith(mWith, mWith);
mAlphaChangingDarwable.start();
}

}

完成后在xml中引用：

<com.example.mydrawable.AlphaLoadingView
android:id="@+id/loadingviwe"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true" >
</com.example.mydrawable.AlphaLoadingView>

使用时调用start方法即可：

AlphaLoadingView imageView = (AlphaLoadingView) findViewById(R.id.loadingviwe);
imageView.start();

以上就是全部代码，非常简单，效果也挺不错的。

源码下载：点击打开链接

再者：推荐自己开源的一个txt阅读器，非常适合新人学习，欢迎交流学习：点击打开链接