Android 自定义View之BounceProgressBar

转载请注明出处：http://blog.csdn.net/bbld_/article/details/41246247

之前几天下载了很久没用了的桌面版酷狗来用用的时候，发现其中加载歌曲的等待进度条的效果不错(个人感觉)，如下：

然后趁着这周末两天天气较冷，窝在宿舍放下成堆的操作系统作业(目测要抄一节多课的一堆堆文字了啊...啊..)毅然决定把它鼓捣出来，最终的效果如下(总感觉有点不和谐啊·)：

对比能看出来的就是多了形状的选择还有使用图片了，那么接下来就是它的实现过程。

对自定义View实现还不明白的建议看下郭神的博客(View系列4篇)： Android LayoutInflater原理分析，带你一步步深入了解View(一) 和大苞米的这篇：ANDROID自定义视图——onMeasure，MeasureSpec源码 流程 思路详解

自定义属性

自定义View一般都要用到view本身的属性了，重写现有的控件则不用。额，然后我们的这个BounceProgressBar需要什么特有的属性呢？首先要明确的是这里BounceProgressBar没有提供具体进度表现的实现的。再具体想想：它需要每个图像的大小，叫singleSrcSize，类型就是dimension了；上下跳动的速度，叫speed，类型为integer；形状，叫shape，类型为枚举类型，提供这几个形状的实现，original、circle、pentagon、rhombus、heart都是见名知意的了；最后是需要的图片资源，叫src，类型为reference|color，即可以是drawable里的图片或颜色值。

有了需要的属性后，在values文件夹下建个资源文件(名字随意，见名知意就好)来定义这些属性了，如下，代码可能有些英文，而且水平有些渣，不过一般前面都会解释了的：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="BounceProgressBar">

        <!-- the single child size -->
        <attr name="singleSrcSize" format="dimension" />
        <!-- the bounce animation one-way duration -->
        <attr name="speed" format="integer" />
        <!-- the child count ，本来还想能自定义个数的，但是暂时个人实现起来有些麻烦，所以先不加这个-->
        <!-- <attr name="count" format="integer" min="1" /> -->
        <!-- the progress child shape -->
        <attr name="shape" format="enum">
            <enum name="original" value="0" />
            <enum name="circle" value="1" />
            <enum name="pentagon" value="2" />
            <enum name="rhombus" value="3" />
            <enum name="heart" value="4" />
        </attr>
        <!-- the progress drawable resource -->
        <attr name="src" format="reference|color"></attr>
    </declare-styleable>

</resources>

public class BounceProgressBar extends View {
	//...
}

        <org.roc.bounceprogressbar.BounceProgressBar
            xmlns:bpb="http://schemas.android.com/apk/res-auto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            bpb:shape="circle"
            bpb:singleSrcSize="8dp"
            bpb:speed="250"
            bpb:src="#6495ED" />

	public BounceProgressBar(Context context) {
		this(context, null, 0);
	}

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

	public BounceProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		init(attrs);
	}
	
	private void init(AttributeSet attrs) {
		if (null == attrs) {
			return;
		}
		TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.BounceProgressBar);
		speed = a.getInt(R.styleable.BounceProgressBar_speed, 250);
		size = a.getDimensionPixelSize(R.styleable.BounceProgressBar_singleSrcSize, 50);
		shape = a.getInt(R.styleable.BounceProgressBar_shape, 0);
		src = a.getDrawable(R.styleable.BounceProgressBar_src);
		a.recycle();
	}

图形的形状

得到属性值后，我们就可以去做相应的处理操作了，这里是图形形状的获取，用到了shape、src和size属性，speed和size在下一点中也会讲到。

首先我们观察到三个图片是有些渐变的效果的，我这里只是简单地做透明度处理，即一次变透明，效果是可以在处理好一点，可能之后再优化了。从src得到的图片资源是Drawable的，无论是ColorDrawable或是BitmapDrawable。我们需要先把它转换成size大小的Bitmap，再用canvas对它进行形状裁剪操作。至于为什么要先转Bitmap呢，这是我的做法，再看完下面的操作后如果有更好的方式希望可以交流一下。

	/**
	 * Drawable → Bitmap(the size is "size")
	 */
	private Bitmap drawable2Bitmap(Drawable drawable) {
		Bitmap bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		drawable.setBounds(0, 0, size, size);
		drawable.draw(canvas);
		return bitmap;
	}

圆形circle、菱形rhombus、五角星pentagon

这些形状都可以使用ShapeDrawable来得到。我们需要BitmapShader渲染器，这是ShapeDrawable的Paint画笔需要的，再需要一个空的位图Bitmap，再一个 Canvas。如下：

		BitmapShader bitmapShader = new BitmapShader(srcBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
		Bitmap bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		Path path;
		ShapeDrawable shapeDrawable = new ShapeDrawable();
		shapeDrawable.getPaint().setAntiAlias(true);
		shapeDrawable.getPaint().setShader(bitmapShader);
		shapeDrawable.setBounds(0, 0, size, size);
		shapeDrawable.setAlpha(alpha);

圆形呢，我们直接用现成的就可以：

shapeDrawable.setShape(new OvalShape());

菱形呢，我们则这样子：

			path = new Path();
			path.moveTo(size / 2, 0);
			path.lineTo(0, size / 2);
			path.lineTo(size / 2, size);
			path.lineTo(size, size / 2);
			path.close();
			shapeDrawable.setShape(new PathShape(path, size, size));

五角形的原理也是用PathShape，只是它需要的坐标点有点多啊，需要仔细计算慢慢调试。

			path = new Path();
			// The Angle of the pentagram
			float radian = (float) (Math.PI * 36 / 180);
			float radius = size / 2;
			// In the middle of the radius of the pentagon
			float radius_in = (float) (radius * Math.sin(radian / 2) / Math.cos(radian));
			// The starting point of the polygon
			path.moveTo((float) (radius * Math.cos(radian / 2)), 0);
			path.lineTo((float) (radius * Math.cos(radian / 2) + radius_in * Math.sin(radian)),
					(float) (radius - radius * Math.sin(radian / 2)));
			path.lineTo((float) (radius * Math.cos(radian / 2) * 2),
					(float) (radius - radius * Math.sin(radian / 2)));
			path.lineTo((float) (radius * Math.cos(radian / 2) + radius_in * Math.cos(radian / 2)),
					(float) (radius + radius_in * Math.sin(radian / 2)));
			path.lineTo((float) (radius * Math.cos(radian / 2) + radius * Math.sin(radian)),
					(float) (radius + radius * Math.cos(radian)));
			path.lineTo((float) (radius * Math.cos(radian / 2)), (float) (radius + radius_in));
			path.lineTo((float) (radius * Math.cos(radian / 2) - radius * Math.sin(radian)),
					(float) (radius + radius * Math.cos(radian)));
			path.lineTo((float) (radius * Math.cos(radian / 2) - radius_in * Math.cos(radian / 2)),
					(float) (radius + radius_in * Math.sin(radian / 2)));
			path.lineTo(0, (float) (radius - radius * Math.sin(radian / 2)));
			path.lineTo((float) (radius * Math.cos(radian / 2) - radius_in * Math.sin(radian)),
					(float) (radius - radius * Math.sin(radian / 2)));
			path.close();// Make these points closed polygons
			shapeDrawable.setShape(new PathShape(path, size, size));

path来画心形就不能连直线实现了，刚开始是使用path的quadTo(x1, y1, x2, y2)方法来画贝塞尔曲线来实现的，发现画出来的形状不饱满，更像一个锥形(脑补)，所以就放弃这种方式了。然后找到了这篇关于画心形的介绍Heart Curve，然后就采用他的第四种方法(如下图)，即采用两个椭圆形状来裁剪实现。

1、画一个椭圆形状

</pre><pre name="code" class="java">

</pre><pre name="code" class="java">   //canvas bitmap bitmapshader等，上面代码已有
   path = new Path();
   Paint paint = new Paint();
   paint.setAntiAlias(true);
   paint.setShader(bitmapShader);
   Matrix matrix = new Matrix(); //控制旋转
   Region region = new Region();//裁剪一段图形区域
   RectF ovalRect = new RectF(size / 4, 0, size - (size / 4), size);
   path.addOval(ovalRect, Path.Direction.CW);

</pre></p><p><img src="http://img.blog.csdn.net/20141118132526861" alt="" /></p><p></p>2、旋转图形，大概45度左右<p><pre name="code" class="java">			matrix.postRotate(42, size / 2, size / 2);
			path.transform(matrix, path);

			path.transform(matrix, path);
			region.setPath(path, new Region((int) size / 2, 0, (int) size, (int) size));
			canvas.drawPath(region.getBoundaryPath(), paint);

			matrix.reset();
			path.reset();
			path.addOval(ovalRect, Path.Direction.CW);
			matrix.postRotate(-42, size / 2, size / 2);
			path.transform(matrix, path);
			region.setPath(path, new Region(0, 0, (int) size / 2, (int) size));
			canvas.drawPath(region.getBoundaryPath(), paint);

    这个心可以见人了。。
画完心就该下一步了。

View的绘制

说到view的绘制过程就需要下面三部曲了：

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

		int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
		int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
		int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
		int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
		setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? mWidth = sizeWidth : mWidth,
				(modeHeight == MeasureSpec.EXACTLY) ? mHeight = sizeHeight : mHeight);

		firstDX = mWidth / 4 - size / 2;//第一个图形的水平位置
		secondDX = mWidth / 2 - size / 2;//...
		thirdDX = 3 * mWidth / 4 - size / 2;//...
	}

	/**
	 * firstBitmapTop's Property. The change of the height through canvas is
	 * onDraw() method.
	 */
	private Property<BounceProgressBar, Integer> firstBitmapTopProperty = new Property<BounceProgressBar, Integer>(
			Integer.class, "firstDrawableTop") {
		@Override
		public Integer get(BounceProgressBar obj) {
			return obj.firstBitmapTop;
		}

		public void set(BounceProgressBar obj, Integer value) {
			obj.firstBitmapTop = value;
			invalidate();
		};
	};
	/**
	 * secondBitmapTop's Property. The change of the height through canvas is
	 * onDraw() method.
	 */
	private Property<BounceProgressBar, Integer> secondBitmapTopProperty = new Property<BounceProgressBar, Integer>(
			Integer.class, "secondDrawableTop") {
		@Override
		public Integer get(BounceProgressBar obj) {
			return obj.secondBitmapTop;
		}

		public void set(BounceProgressBar obj, Integer value) {
			obj.secondBitmapTop = value;
			invalidate();
		};
	};
	/**
	 * thirdBitmapTop's Property. The change of the height through canvas is
	 * onDraw() method.
	 */
	private Property<BounceProgressBar, Integer> thirdBitmapTopProperty = new Property<BounceProgressBar, Integer>(
			Integer.class, "thirdDrawableTop") {
		@Override
		public Integer get(BounceProgressBar obj) {
			return obj.thirdBitmapTop;
		}

		public void set(BounceProgressBar obj, Integer value) {
			obj.thirdBitmapTop = value;
			invalidate();
		};
	};

	@Override
	protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
		super.onLayout(changed, left, top, right, bottom);

		if (bouncer == null || !bouncer.isRunning()) {
			ObjectAnimator firstAnimator = initDrawableAnimator(firstBitmapTopProperty, speed, size / 2,
					mHeight - size);
			ObjectAnimator secondAnimator = initDrawableAnimator(secondBitmapTopProperty, speed, size / 2,
					mHeight - size);
			secondAnimator.setStartDelay(100);
			ObjectAnimator thirdAnimator = initDrawableAnimator(thirdBitmapTopProperty, speed, size / 2,
					mHeight - size);
			thirdAnimator.setStartDelay(200);
			bouncer = new AnimatorSet();
			bouncer.playTogether(firstAnimator, secondAnimator, thirdAnimator);
			bouncer.start();
		}
	}
	
	private ObjectAnimator initDrawableAnimator(Property<BounceProgressBar, Integer> property, int duration,
			int startValue, int endValue) {
		ObjectAnimator animator = ObjectAnimator.ofInt(this, property, startValue, endValue);
		animator.setDuration(duration);
		animator.setRepeatCount(Animation.INFINITE);
		animator.setRepeatMode(ValueAnimator.REVERSE);
		animator.setInterpolator(new AccelerateInterpolator());
		return animator;
	}

	@Override
	protected synchronized void onDraw(Canvas canvas) {
		/* draw three bitmap */
		firstBitmapMatrix.reset();
		firstBitmapMatrix.postTranslate(firstDX, firstBitmapTop);
		
		secondBitmapMatrix.reset();
		secondBitmapMatrix.setTranslate(secondDX, secondBitmapTop);

		thirdBitmapMatrix.reset();
		thirdBitmapMatrix.setTranslate(thirdDX, thirdBitmapTop);

		canvas.drawBitmap(firstBitmap, firstBitmapMatrix, mPaint);
		canvas.drawBitmap(secondBitmap, secondBitmapMatrix, mPaint);
		canvas.drawBitmap(thirdBitmap, thirdBitmapMatrix, mPaint);
	}