android学习-----自定义View 加载动画

开始：

就要看效果了。

一个gif动画效果 但是只需要其中一部分，就没有现成的gif动画而且其中有一部分要可控。本来就不会自定义view的我，就慢慢琢磨吧。

先看原图效果：

在看我的效果图

然后：

就要写代码了。

1.首先背景是一张图片，当做背景图。 

2.进度的view部分放置在背景图中间。（这里我还是没搞懂，就固定了view的宽高为 80,100）

3.获取坐标 画图

接着：

就要看我的问题了。

现在还有几个问题没明白，

1.自定义View的时候 怎么根据父View的宽高来设置显示在父View的中间。

2.自定义View的时候不需要管onlayout和onMeasure吧，好像自定义Viewgroup才需要用到吧。。。 

希望高人指点一下。毕竟我只是个菜鸟。

紧接着：

就要看思路了。

1.获取到view的宽高（其实这里默认写死了80，100的宽高）

2.然后假如要设置三条进度条 确定好第一条的进度坐标位置（left=（80-进度的宽度）/2 ，top=100/3） 然后设置一个每条进度之间的间隔  就好计算 其他进度条的坐标。

3.用postInvalidateDelayed() 方法 不断的onDraw更新进度值

4.如果完成了就加载一张图片，并且处理放大效果

最后：

就要看代码了

public class LoadingView extends View {

	private int lineNumber = 3;
	private Paint defaultPaint;
	private Paint redPaint;
	private int height = 8; // 横条高度，
	private int width = 50; // 横条宽度
	private int spaceheight = 15; // 横条间隔
	private RectF r1, r2, r3, r4;
	int t1 = 0;
	int t2, t3, t4;
	int b1 = height;
	int viewWidth;
	int viewHeight;
	int x, y; // 起点坐标
	float sc = 0f; 
	private boolean success = false; // 是否加载完成
	private Bitmap successImg;

	int temp = 0;

	public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		init();
	}

	public LoadingView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public LoadingView(Context context) {
		this(context, null);
	}

	private void init() {
		defaultPaint = new Paint();
		defaultPaint.setColor(Color.BLACK);
		redPaint = new Paint();
		redPaint.setColor(Color.RED);
		r1 = new RectF();
		r2 = new RectF();
		r3 = new RectF();
		successImg = BitmapFactory.decodeResource(getResources(),
				R.drawable.gou);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		x = (viewWidth - width) / 2;
		y = (viewHeight) / lineNumber;
		if (temp==3) {//模拟三次完成
			sc += 0.1;
			canvas.scale(sc, sc, (viewWidth - successImg.getWidth()) / 2,
					(viewHeight - successImg.getHeight()) / 2); //放大动画
			
			canvas.drawBitmap(successImg,
					(viewWidth - successImg.getWidth()) / 2,
					(viewHeight - successImg.getHeight()) / 2, redPaint); //打钩图片
			
			if (sc < 1.0f) {
				postInvalidateDelayed(20);
			}
			return;
		}
		r1.set(x, y, width + x, y + height);
		r2.set(x, y + spaceheight, width + x, y + height + spaceheight);
		r3.set(x, y + spaceheight * 2, width + x, y + height + spaceheight * 2);
		canvas.drawRect(r1, defaultPaint);
		canvas.drawRect(r2, defaultPaint);
		canvas.drawRect(r3, defaultPaint);
		canvas.save();
		if (t1 <= r1.right) {
			r1.set(r1.left, r1.top, t1++, r1.bottom);
			canvas.drawRect(r1, redPaint);
		} else if (t2 <= r2.right) {
			canvas.drawRect(r1, redPaint);
			r2.set(r2.left, r2.top, t2++, r2.bottom);
			canvas.drawRect(r2, redPaint);
		} else if (t3 <= r3.right) {
			canvas.drawRect(r1, redPaint);
			canvas.drawRect(r2, redPaint);
			r3.set(r3.left, r3.top, t3++, r3.bottom);
			canvas.drawRect(r3, redPaint);
		} else {
			t1 = 0;
			t2 = 0;
			t3 = 0;
			temp++;
		}

		postInvalidateDelayed(8);

	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		viewHeight = measureSpecHeight(heightMeasureSpec);
		viewWidth = measureSpecWidth(widthMeasureSpec);
		super.onMeasure(measureSpecWidth(widthMeasureSpec),
				measureSpecHeight(heightMeasureSpec));
	}

	public void isSuccess(boolean success) {
		this.success = success;
	}

	public void reset() {
		t1 = 0;
		t2 = 0;
		t3 = 0;
		success = false;
		sc = 0f;
	}

	private int measureSpecHeight(int heightMeasureSpec) {
		int resultSize = 100; // px
		int mode = MeasureSpec.getMode(heightMeasureSpec);
		int height = MeasureSpec.getSize(heightMeasureSpec);
		if (mode == MeasureSpec.EXACTLY) {
			resultSize = height;
		} else {
			if (mode == MeasureSpec.AT_MOST) {
				resultSize = Math.min(100, height);
			} else {
				resultSize = 100;
			}
		}
		return resultSize;
	}

	private int measureSpecWidth(int widthMeasureSpec) {
		int resultSize = 80; // px
		int mode = MeasureSpec.getMode(widthMeasureSpec);
		int width = MeasureSpec.getSize(widthMeasureSpec);
		if (mode == MeasureSpec.EXACTLY) {
			resultSize = width;
		} else {
			if (mode == MeasureSpec.AT_MOST) {
				resultSize = Math.min(80, width);
			} else {
				resultSize = 80;
			}
		}
		return resultSize;
	}

}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 >
    
     <com.example.testview.LoadingView
         android:id="@+id/aaa"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
             android:background="@drawable/paper"
             android:layout_centerInParent="true"
             />

</RelativeLayout>

结果：

https://github.com/zhangiqlin/LoadingView