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

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

看效果：

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);}@Overridepublic void start() {mValueAnimator = ValueAnimator.ofInt(new int[] { 0, 255 });mValueAnimator.setDuration(1500);mValueAnimator.setInterpolator(new LinearInterpolator());// 添加线性变化率mValueAnimator.setEvaluator(new TypeEvaluator<Integer>() {@Overridepublic Integer evaluate(float fraction, Integer startValue, Integer endValue) {return (int) (fraction * endValue);}});mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {Integer value = (Integer) animation.getAnimatedValue();mPaint.setAlpha(value);invalidateSelf();}});mValueAnimator.setRepeatMode(ValueAnimator.REVERSE);mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);mValueAnimator.start();}@Overridepublic void stop() {mValueAnimator.cancel();}@Overridepublic boolean isRunning() {return mValueAnimator.isRunning();} @Overridepublic void draw(Canvas canvas) {canvas.drawBitmap(mBitmap, (canvas.getWidth() -mBitmap.getWidth())/2, (canvas.getHeight() -mBitmap.getHeight())/2, mPaint);}@Overridepublic void setAlpha(int alpha) {}@Overridepublic void setColorFilter(ColorFilter colorFilter) {}@Overridepublic 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阅读器，非常适合新人学习，欢迎交流学习：点击打开链接