Table循环滑动选择，背景动画，拖动渐变，弹性弹回等效果

首先，看效果吧

直接上代码，就这么简单。由于着急迭代更新，还要调用数据接口，所以没有来得及注释

package com.miduo.financialmanageplanner.widget;

import java.util.ArrayList;
import java.util.List;

import com.miduo.financialmanageplanner.R;
import com.miduo.financialmanageplanner.listener.ProductSelectChangeListener;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetricsInt;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * 
 * @author sunrui 2015/09/23
 * 
 */
public class ProTopView extends View {

	private int width, height, inheight, inwidth, centerx, cell_c, cell_l,
			cell_r;
	private int startX, specing, textSize, div, innercell, innerlength;
	private Bitmap bgBitmap, line_bg1, line_bg2, circle_center, circle_blue;
	private Rect bgSrc, bgDes, circleSrc, circleDes1, circleDes2, circleDes3,
			circleDes4, circleDes5, innerSrc1, innerSrc2, innerSrc3, innerSrc4,
			innerDes1, innerDes2, innerDes3, innerDes4, innerSrc5, bg_line1,
			bg_line2, bg_line3, bg_line4;
	private Paint bgPaint, textP, circleP, leftP;
	private List<String> listStr;
	private List<Bitmap> listBit1;
	private Bitmap fdsyBit1, gldxBit1, gdsyBit1, llsyBit1, mdrxBit1;
	private Rect textRect;
	private FontMetricsInt fontMetrics;
	private int baseline;
	private ProductSelectChangeListener listener;
	private int select = 0;

	public void setProductSelectChangeListener(
			ProductSelectChangeListener listener) {
		this.listener = listener;
	}

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

	public ProTopView(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray typedArray = context.getTheme().obtainStyledAttributes(
				attrs, R.styleable.protopview, 0, 0);
		int n = typedArray.getIndexCount();
		for (int i = 0; i < n; i++) {
			int attr = typedArray.getIndex(i);
			switch (attr) {
			case R.styleable.protopview_inheight:
				inheight = typedArray.getDimensionPixelSize(i, 80);
				break;
			case R.styleable.protopview_inwidth:
				inwidth = typedArray.getDimensionPixelSize(i, 480);
				break;
			case R.styleable.protopview_specing:
				specing = typedArray.getDimensionPixelSize(i, 40);
				break;
			case R.styleable.protopview_textsize:
				textSize = typedArray.getDimensionPixelSize(i, 34);
				break;
			case R.styleable.protopview_div_:
				div = typedArray.getDimensionPixelSize(i, 30);
				break;
			case R.styleable.protopview_innercell:
				innercell = typedArray.getDimensionPixelSize(i, 38);
				break;
			default:
				break;
			}
		}
		init();
	}

	public ProTopView(Context context) {
		super(context);
	}

	public void init() {
		bgBitmap = BitmapFactory.decodeResource(getResources(),
				R.drawable.top_bg);
		line_bg1 = BitmapFactory.decodeResource(getResources(),
				R.drawable.line_bg1);
		line_bg2 = BitmapFactory.decodeResource(getResources(),
				R.drawable.line_bg2);
		circle_center = BitmapFactory.decodeResource(getResources(),
				R.drawable.circle_center);
		circle_blue = BitmapFactory.decodeResource(getResources(),
				R.drawable.circle_blue);
		bgSrc = new Rect(0, 0, bgBitmap.getWidth(), bgBitmap.getHeight());
		circleSrc = new Rect(0, 0, circle_center.getWidth(),
				circle_center.getHeight());
		circleDes1 = new Rect();
		circleDes2 = new Rect();
		circleDes3 = new Rect();
		circleDes4 = new Rect();
		circleDes5 = new Rect();
		bgDes = new Rect(0, 0, width, height);
		bgPaint = new Paint();
		bgPaint.setAntiAlias(true);
		startX = 0;
		listStr = new ArrayList<String>();
		listBit1 = new ArrayList<Bitmap>();
		initData();
		textP = new Paint();
		textP.setTextSize(textSize);
		textP.setAntiAlias(true);
		textRect = new Rect();
		textP.setColor(Color.WHITE);
		textP.getTextBounds(listStr.get(0), 0, listStr.get(0).length(),
				textRect);
		innerDes1 = new Rect();
		innerDes2 = new Rect();
		innerDes3 = new Rect();
		innerDes4 = new Rect();
		innerlength = innercell + div + textRect.width();
		circleP = new Paint();
		circleP.setAntiAlias(true);
		leftP = new Paint();
		leftP.setAntiAlias(true);
		circleP.setTextSize(textSize);
		leftP.setTextSize(textSize);
		leftP.setColor(Color.WHITE);
		circleP.setColor(Color.WHITE);
		bg_line1 = new Rect();
		bg_line2 = new Rect();
		bg_line3 = new Rect();
		bg_line4 = new Rect();
	}

	private void initData() {
		listStr.add("米多热销");
		listStr.add("高流动性");
		listStr.add("固定收益");
		listStr.add("浮动收益");
		listStr.add("另类收益");
		mdrxBit1 = BitmapFactory.decodeResource(getResources(),
				R.drawable.hand_icon);
		innerSrc1 = new Rect(0, 0, mdrxBit1.getWidth(), mdrxBit1.getHeight());
		fdsyBit1 = BitmapFactory.decodeResource(getResources(),
				R.drawable.fdsy_icon1);
		innerSrc2 = new Rect(0, 0, fdsyBit1.getWidth(), fdsyBit1.getHeight());
		gldxBit1 = BitmapFactory.decodeResource(getResources(),
				R.drawable.gldx_icon1);
		innerSrc3 = new Rect(0, 0, gldxBit1.getWidth(), gldxBit1.getHeight());
		gdsyBit1 = BitmapFactory.decodeResource(getResources(),
				R.drawable.gdsy_icon1);
		innerSrc4 = new Rect(0, 0, gdsyBit1.getWidth(), gdsyBit1.getHeight());
		llsyBit1 = BitmapFactory.decodeResource(getResources(),
				R.drawable.llsy_icon1);
		innerSrc5 = new Rect(0, 0, llsyBit1.getWidth(), llsyBit1.getHeight());
		listBit1.add(mdrxBit1);
		listBit1.add(gldxBit1);
		listBit1.add(gdsyBit1);
		listBit1.add(fdsyBit1);
		listBit1.add(llsyBit1);
		startAnim();
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		width = 0;
		height = 0;
		int specSize = MeasureSpec.getSize(widthMeasureSpec);
		width = getPaddingLeft() + getPaddingRight() + specSize;
		specSize = MeasureSpec.getSize(heightMeasureSpec);
		height = getPaddingTop() + getPaddingBottom() + specSize;
		bgDes.right = width;
		bgDes.bottom = height;
		centerx = width / 2;
		bg_line1.right = width;
		bg_line1.bottom = height;
		bg_line1.top = height / 4;
		bg_line2.right = width;
		bg_line2.bottom = height;
		bg_line2.top = height / 4;
		bg_line3.right = width;
		bg_line3.bottom = height;
		bg_line3.top = height / 4;
		bg_line4.right = width;
		bg_line4.bottom = height;
		bg_line4.top = height / 4;
		setMeasuredDimension(width, height);
	}

	private int step;

	private void startAnim() {
		new Thread() {
			public void run() {
				while (true) {
					int delta = 4;
					step += delta;
					try {
						Thread.sleep(1000 / 24);
					} catch (InterruptedException e) {
						e.printStackTrace();
					}
					postInvalidate();
				}
			};
		}.start();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		canvas.drawBitmap(bgBitmap, bgSrc, bgDes, bgPaint);
		step = step % width;
		bg_line1.left = step;
		bg_line1.right = step + width;
		canvas.drawBitmap(line_bg1, bgSrc, bg_line1, bgPaint);
		bg_line2.left = step - width;
		bg_line2.right = step;
		canvas.drawBitmap(line_bg1, bgSrc, bg_line2, bgPaint);
		bg_line3.left = (-1) * step;
		bg_line3.right = (-1) * step + width;
		canvas.drawBitmap(line_bg2, bgSrc, bg_line3, bgPaint);
		bg_line4.left = (-1) * step + width;
		bg_line4.right = (-1) * step + 2 * width;
		canvas.drawBitmap(line_bg2, bgSrc, bg_line4, bgPaint);
		circleDes1.left = (width - inwidth) / 2 + startX;
		circleDes1.top = (height - inheight) / 2;
		circleDes1.right = (width + inwidth) / 2 + startX;
		circleDes1.bottom = (height + inheight) / 2;
		circleDes5.right = circleDes1.left - specing;
		circleDes5.top = circleDes1.top;
		circleDes5.bottom = circleDes1.bottom;
		circleDes5.left = circleDes5.right - inwidth;
		circleDes2.bottom = circleDes1.bottom;
		circleDes2.top = circleDes1.top;
		circleDes2.left = circleDes1.right + specing;
		circleDes2.right = circleDes2.left + inwidth;
		cell_c = (inwidth - innerlength) / 2;
		cell_l = inwidth - ((width - inwidth) / 2 - specing - innercell) / 2
				- innercell;
		cell_r = ((width - inwidth) / 2 - specing - innercell) / 2;
		int lenth = (width - ((width - inwidth - 2 * specing) / 2 + specing));
		int delta_c = 0;
		int delta_l = 0;
		int delta_r = 0;
		if (startX >= 0) {
			delta_c = cell_c
					- Math.abs((int) ((startX * (cell_c - cell_r)) / (float) lenth));
			delta_l = cell_l
					- Math.abs((int) ((startX * (cell_l - cell_r)) / (float) lenth));
			delta_r = cell_r;

		} else {
			delta_c = cell_c
					+ Math.abs((int) ((startX * (cell_l - cell_c)) / (float) lenth));

			delta_r = cell_r
					+ Math.abs((int) ((startX * (cell_c - cell_r)) / (float) lenth));
		}
		innerDes1.left = circleDes1.left + delta_c;
		innerDes1.right = innerDes1.left + innercell;
		innerDes1.top = (height - innercell) / 2;
		innerDes1.bottom = (height + innercell) / 2;

		innerDes4.left = circleDes5.left + delta_l;
		innerDes4.right = innerDes4.left + innercell;
		innerDes4.top = innerDes1.top;
		innerDes4.bottom = innerDes1.bottom;

		innerDes2.left = circleDes2.left + delta_r;
		innerDes2.right = innerDes2.left + innercell;
		innerDes2.top = innerDes1.top;
		innerDes2.bottom = innerDes1.bottom;
		float fenmu = (circleDes1.right - circleDes1.left) + specing;
		float distance1 = (circleDes1.right + circleDes1.left) / 2 - centerx;
		int a1 = (int) (150 - Math.abs((distance1 / fenmu) * 150)) + 55;
		circleP.setAlpha(a1);
		canvas.drawBitmap(circle_center, circleSrc, circleDes1, circleP);
		canvas.drawBitmap(listBit1.get(0), innerSrc2, innerDes1, circleP);
		fontMetrics = textP.getFontMetricsInt();
		baseline = (height - fontMetrics.bottom + fontMetrics.top) / 2
				- fontMetrics.top;
		canvas.drawText(listStr.get(0), circleDes1.left + cell_c + innercell
				+ div, baseline, circleP);
		float distance2 = (circleDes5.right + circleDes5.left) / 2 - centerx;
		int a2 = (int) (150 - Math.abs((distance2 / fenmu) * 150)) + 55;
		leftP.setAlpha(a2);
		canvas.drawBitmap(listBit1.get(4), innerSrc2, innerDes4, leftP);
		canvas.drawBitmap(circle_center, circleSrc, circleDes5, leftP);
		canvas.drawText(listStr.get(4), circleDes5.left + cell_c + innercell
				+ div, baseline, leftP);
		float distance3 = (circleDes2.right + circleDes2.left) / 2 - centerx;
		int a3 = (int) (150 - Math.abs((distance3 / fenmu) * 150)) + 55;
		circleP.setAlpha(a3);
		canvas.drawBitmap(circle_center, circleSrc, circleDes2, circleP);
		canvas.drawBitmap(listBit1.get(1), innerSrc2, innerDes2, circleP);
		canvas.drawText(listStr.get(1), circleDes2.left + cell_c + innercell
				+ div, baseline, circleP);

	}

	private float delta, initx;

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		int action = event.getAction();
		switch (action) {
		case MotionEvent.ACTION_DOWN:
			initx = event.getX();
			break;
		case MotionEvent.ACTION_MOVE:
			delta = event.getX() - initx;
			startX = (int) delta;
			postInvalidate();
			break;
		case MotionEvent.ACTION_UP:
			if (delta < (width / 4) && delta > (-1) * (width / 4)) {
				startX = 0;
				postInvalidate();
			} else if (delta >= (width / 4)) {
				String str = listStr.get(4);
				listStr.add(0, str);
				listStr.remove(5);
				startX = 0;
				Bitmap bitmap1 = listBit1.get(4);
				listBit1.add(0, bitmap1);
				listBit1.remove(5);
				postInvalidate();
				if (listener != null) {
					select -= 10;
					if (select == -10) {
						select = 40;
					}
					listener.onIndexChange(select);
				}
			} else {
				String str = listStr.get(0);
				listStr.add(str);
				listStr.remove(0);
				startX = 0;
				Bitmap bitmap1 = listBit1.get(0);
				listBit1.add(bitmap1);
				listBit1.remove(0);
				postInvalidate();
				if (listener != null) {
					select += 10;
					if (select == 50) {
						select = 0;
					}
					listener.onIndexChange(select);
				}
			}

			break;
		default:
			break;
		}
		return true;
	}

}