[置顶] android 自定义ListView实现动画特效

通过自定义ListView实现动画特效，被点击元素A向前移，A之前元素往后移动.

重点在于动画的实现：

具体代码如下：

package com.open.widget;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.View;

/**
 *
 * @author yanglonghui
 *
 */
public class HorImageListView extends View {

	private int current_OffsetX=0;//当前屏X轴的偏移量
	private int cuurent_OffsetY=0;//当前屏Y轴的偏移量
	private int moving_OffsetX=0;//当前S手势X轴偏移量
	private int moving_OffsetY=0;//当前S手势Y轴偏移量
	private int current_Page=1;//当前页码，开始页码为1
	private int portraitNumberPerScreen;//每屏头像个数
	private int charHeight=0;//一个字的高度
	private int maxPage=1;//最大页码

	private int current_foucsIndex=0;//当前焦点
	private int current_longPressIndex=-1;//当前长按焦点
	private int current_clickIndex=0;//当前点击

	private int headWidth=0;//头像宽度
	private int paddingLeft;//左边距
	private Bitmap []bitmapArray;//头像数组
	private Rect headRectArray[]=null;//头像位置
	private Rect drawingRect=new Rect();

    private Bitmap mCircleBitmap=null;
    private PorterDuffXfermode xfermode=new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);
    private PaintFlagsDrawFilter pdf=new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG);
	private Paint paint = new Paint();
    {
	    paint.setStyle(Paint.Style.STROKE);
	    paint.setFlags(Paint.ANTI_ALIAS_FLAG);
	    paint.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了
    }

    private static final int LAYER_FLAGS = Canvas.MATRIX_SAVE_FLAG |
            Canvas.CLIP_SAVE_FLAG |
            Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
            Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
            Canvas.CLIP_TO_LAYER_SAVE_FLAG;

    private IHeadClick headClickListener;

    private Handler mHandler=new Handler();
    private ArrayList<String> headList=new ArrayList<String>();

	public HorImageListView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	public HorImageListView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public HorImageListView(Context context) {
		super(context);
		init();
	}

	private void init()
	{
		try {
            if(android.os.Build.VERSION.SDK_INT>=11)
            {
                setLayerType(LAYER_TYPE_SOFTWARE, null);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }  

		mGestureDetector=new GestureDetector(new CusGestureListener());
		setLongClickable(true);
		setOnTouchListener(onTouchListener);
	}

	public void setAdapter(ArrayList<String> headList)
	{
		this.headList=headList;
		current_Page=1;
		current_OffsetX=0;
		current_clickIndex=0;
		current_foucsIndex=0;
		current_longPressIndex=-1;

		if(headWidth==0)
		{
			headWidth=DensityUtil.dip2px(getContext(), 60);
		}
		mCircleBitmap=WindowMgr.getInstance().getCircleBitmap(headWidth, headWidth);
		bitmapArray=WindowMgr.getInstance().getAllBitmaps(headList);
		headRectArray=new Rect[bitmapArray.length];
		for(int i=0;i<headRectArray.length;i++)//随时滑动
		{
			headRectArray[i]=new Rect();
		}
		requestLayout();
	}

	private void calculate()
	{
		if(getMeasuredWidth()<=0)
		{
			return;
		}
		portraitNumberPerScreen=getMeasuredWidth()/headWidth;
		portraitNumberPerScreen--;//少一个元素，使不会那么拥挤
		paddingLeft=(int)((float)(getMeasuredWidth()-portraitNumberPerScreen*headWidth)/(float)(portraitNumberPerScreen+1)+0.5f);

		if(bitmapArray.length>portraitNumberPerScreen)
		{
			maxPage=(bitmapArray.length%portraitNumberPerScreen==0)?bitmapArray.length/portraitNumberPerScreen:this.bitmapArray.length/portraitNumberPerScreen+1;
		}
		else
		{
			maxPage=1;
		}
		int left = 0;
		int top = DensityUtil.dip2px(getContext(), 10);
		int right = 0;
		int bottom = top+headWidth;

		for(int i=0;i<maxPage;i++)//分页效果
		{
			int pageWidthPadding=i*getMeasuredWidth();
			for(int j=0;j<portraitNumberPerScreen&&(i*portraitNumberPerScreen+j)<bitmapArray.length;j++)
			{
				left=pageWidthPadding+paddingLeft*(j+1)+j*headWidth;
				right=left+headWidth;
				headRectArray[i*portraitNumberPerScreen+j].set(left, top, right, bottom);
			}
		}
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int height=DensityUtil.dip2px(getContext(), 80);
		setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), height);
		calculate();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		if(null!=bitmapArray)
		{
			if(current_clickIndex>0)
			{
					canvas.setDrawFilter(pdf);
					for(int i=0;i<bitmapArray.length;i++)
					{
						drawingRect.left=headRectArray[i].left+current_OffsetX+clickOffsetBackDx;
						drawingRect.top=headRectArray[i].top+cuurent_OffsetY;
						drawingRect.right=headRectArray[i].right+current_OffsetX+clickOffsetBackDx;
						drawingRect.bottom=headRectArray[i].bottom+cuurent_OffsetY;

						if(i>current_clickIndex)//还需要优化
						{
							if(current_Page==1)
							{
								drawingRect.left=headRectArray[i].left+current_OffsetX;
								drawingRect.top=headRectArray[i].top+cuurent_OffsetY;
								drawingRect.right=headRectArray[i].right+current_OffsetX;
								drawingRect.bottom=headRectArray[i].bottom+cuurent_OffsetY;
							}
							else if(current_Page>1)
							{

							}
						}

						if(drawingRect.right<getLeft())
						{
							continue;
						}
						else if(drawingRect.left>getRight())
						{
							break;
						}

						if(current_clickIndex!=i)
						{
							//绘制头像
					        canvas.drawBitmap(mCircleBitmap, null, drawingRect, paint);
					        paint.setXfermode(xfermode);
					        canvas.drawBitmap(bitmapArray[i], null, drawingRect, paint);
					        paint.setXfermode(null);

						}
					}

					drawingRect.left=headRectArray[0].left+clickOffsetforwarDx;
					drawingRect.top=headRectArray[0].top;
					drawingRect.right=headRectArray[0].right+clickOffsetforwarDx;
					drawingRect.bottom=headRectArray[0].bottom;

	                int sc = canvas.saveLayer(drawingRect.left, drawingRect.top, drawingRect.right, drawingRect.bottom, null,LAYER_FLAGS);
					//绘制头像
			        canvas.drawBitmap(mCircleBitmap, null, drawingRect, paint);
			        paint.setXfermode(xfermode);
			        canvas.drawBitmap(bitmapArray[current_clickIndex], null, drawingRect, paint);
			        paint.setXfermode(null);

			        canvas.restoreToCount(sc);
			}
			else
			{
					canvas.setDrawFilter(pdf);
					for(int i=0;i<bitmapArray.length;i++)
					{
						drawingRect.left=headRectArray[i].left+current_OffsetX+moving_OffsetX;
						drawingRect.top=headRectArray[i].top+cuurent_OffsetY;
						drawingRect.right=headRectArray[i].right+current_OffsetX+moving_OffsetX;
						drawingRect.bottom=headRectArray[i].bottom+cuurent_OffsetY;

						if(drawingRect.right<getLeft())
						{
							continue;
						}
						else if(drawingRect.left>getRight())
						{
							break;
						}

						if(current_longPressIndex==i)
						{
							int insetDx=(int)((float)drawingRect.height()/(float)8);
							drawingRect.inset(insetDx, insetDx);
						}

						//绘制头像
				        canvas.drawBitmap(mCircleBitmap, null, drawingRect, paint);
				        paint.setXfermode(xfermode);
				        canvas.drawBitmap(bitmapArray[i], null, drawingRect, paint);
				        paint.setXfermode(null);
					}
			}
		}
	}

	private OnTouchListener onTouchListener=new OnTouchListener() {

		@Override
		public boolean onTouch(View v, MotionEvent event) {
			boolean isConsumed =mGestureDetector.onTouchEvent(event);
			if (isConsumed) return true;

			if(event.getAction()==MotionEvent.ACTION_CANCEL||event.getAction()==MotionEvent.ACTION_UP)
			{
				//----分页代码
				int direct=0;//往左边为1，右边为-1,保持不变为0
				if(moving_OffsetX>getMeasuredWidth()/2)//向右边滑过半屏
				{
					current_Page--;
					direct=1;
					if(current_Page<1)
					{
						current_Page=1;
						direct=0;
					}
				}
				else if(moving_OffsetX<-getMeasuredWidth()/2)//向左边滑过半屏
				{
					current_Page++;
					direct=-1;
					if(current_Page>maxPage)
					{
						current_Page=maxPage;
						direct=0;
					}
				}

				int old=current_OffsetX+moving_OffsetX;
				int newX=current_OffsetX+direct*getMeasuredWidth();
				if(direct!=0)
				{
					current_foucsIndex=(current_Page-1)*portraitNumberPerScreen;

					if(null!=headClickListener)
					headClickListener.onItemClick(current_foucsIndex);
				}

Log.v("dx:"+current_OffsetX, "----------------------");

				if(current_longPressIndex!=-1)
				{
					invalidate();
					current_longPressIndex=-1;//恢复
					return false;
				}
				else
				{
					mHandler.post(new SmoothRunnable(old, newX));
				}
				return false;
			}

			invalidate();
			return isConsumed;
		}
	};

	private GestureDetector mGestureDetector;
	private class CusGestureListener extends SimpleOnGestureListener
	{
		private Rect mDragRect=new Rect();
		@Override
		public boolean onSingleTapUp(MotionEvent e) {
			Log.v("CusGestureListener", "onSingleTapUp");

			int x=(int) e.getX();
			int y=(int) e.getY();

			boolean isInner=false;
			Rect mRect=new Rect();
			for(int i=0;i<bitmapArray.length;i++)
			{
				mRect.left=headRectArray[i].left+current_OffsetX+moving_OffsetX;
				mRect.top=headRectArray[i].top+cuurent_OffsetY;
				mRect.right=headRectArray[i].right+current_OffsetX+moving_OffsetX;
				mRect.bottom=headRectArray[i].bottom+cuurent_OffsetY;

				if(!isInner)
				{
					if(mRect.top<=y&&mRect.bottom>=y)
					{
						isInner=true;
					}
					else
					{
						break;
					}
				}

				if(mRect.contains(x, y))
				{
					current_foucsIndex=i;
					current_clickIndex=i;

					//动画：被点击向前移动，未点击向后移动
					if(null!=mClickRunnable)
					{
						mClickRunnable.stop();
					}
					mClickRunnable=new ClickRunnable(current_clickIndex);
					mHandler.post(mClickRunnable);
				}
			}
			return super.onSingleTapUp(e);
		}

		@Override
		public void onLongPress(MotionEvent e) {
//			Log.v("CusGestureListener", "onLongPress");

			int x=(int) e.getRawX();
			int y=(int) (e.getRawY()-WindowMgr.getInstance().getStatusBarHeight(getContext()));

			Rect mRect=new Rect();
			for(int i=0;i<bitmapArray.length;i++)
			{
				mRect.left=headRectArray[i].left+current_OffsetX+moving_OffsetX;
				mRect.top=headRectArray[i].top+cuurent_OffsetY;
				mRect.right=headRectArray[i].right+current_OffsetX+moving_OffsetX;
				mRect.bottom=headRectArray[i].bottom+cuurent_OffsetY;

				if(mRect.contains(x, y))
				{
					current_longPressIndex=i;
					return ;
				}
			}
			super.onLongPress(e);
		}

		@Override
		public boolean onScroll(MotionEvent e1, MotionEvent e2,
				float distanceX, float distanceY) {
//			Log.v("CusGestureListener", "onScroll");

			int tx=(int) e1.getRawX();
			int ty=(int) (e1.getRawY()-WindowMgr.getInstance().getStatusBarHeight(getContext()));

			int tx2=(int) e2.getRawX();
			int ty2=(int) (e2.getRawY()-WindowMgr.getInstance().getStatusBarHeight(getContext()));

			if(mDragRect.contains(tx, ty)&&mDragRect.contains(tx2, ty2))
			{
				moving_OffsetX=(int) (e2.getRawX()-e1.getRawX());
			}
			return super.onScroll(e1, e2, distanceX, distanceY);
		}

		@Override
		public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
				float velocityY) {
//			Log.d("CDH", "onFling currentPage:"+currentPage+" x1:"+e1.getRawX()+" x2:"+e2.getRawX()+" velocityX:"+velocityX+"velocityY:"+velocityY);

			if (Math.abs(velocityX) < 1000) return false;

			int direct=0;//往左边为1，右边为-1,保持不变为0
			if(velocityX > 0)
			{
				current_Page--;
				direct=1;
				if(current_Page<1)
				{
					current_Page=1;
					direct=0;
				}
			}
			else
			{
				current_Page++;
				direct=-1;
				if(current_Page>maxPage)
				{
					current_Page=maxPage;
					direct=0;
				}
			}

			int old=current_OffsetX+moving_OffsetX;
			int newX=current_OffsetX+direct*getMeasuredWidth();
			mHandler.post(new SmoothRunnable(old, newX));

			return true;
		}

		@Override
		public void onShowPress(MotionEvent e) {
//			Log.v("CusGestureListener", "onShowPress");

			super.onShowPress(e);
		}

		@Override
		public boolean onDown(MotionEvent e) {
//			Log.v("CusGestureListener", "onDown");

			moving_OffsetX=0;
			mDragRect.set(getLeft(), getTop(), getRight(), getBottom());
			return super.onDown(e);
		}

		@Override
		public boolean onDoubleTap(MotionEvent e) {
//			Log.v("CusGestureListener", "onDoubleTap");
			return super.onDoubleTap(e);
		}

		@Override
		public boolean onDoubleTapEvent(MotionEvent e) {
//			Log.v("CusGestureListener", "onDoubleTapEvent");

			return super.onDoubleTapEvent(e);
		}

		@Override
		public boolean onSingleTapConfirmed(MotionEvent e) {
//			Log.v("CusGestureListener", "onSingleTapConfirmed");

			return super.onSingleTapConfirmed(e);
		}
	}

	//平滑移动
	private class SmoothRunnable implements Runnable
	{
		private int startDx;
		private int endDx;
		private long duration=250;
		private long interval=10;
		private long startTime;
		private long endTime;

		public SmoothRunnable(int startDx, int endDx) {
			super();
			this.startDx = startDx;
			this.endDx = endDx;
		}

		@Override
		public void run() {
			if(startTime==0)
			{
				moving_OffsetX=0;
				startTime=System.currentTimeMillis();
				endTime=startTime+duration;
			}

			long currentTime=System.currentTimeMillis();
			if(currentTime<endTime)
			{
				current_OffsetX=(int)(startDx+(endDx-startDx)*((float)(currentTime-startTime)/(float)(duration)));
				invalidate();
				mHandler.postDelayed(this, interval);
			}
			else
			{
				current_OffsetX=endDx;
				moving_OffsetX=0;
				invalidate();
			}
		}
	} 

	private int clickOffsetforwarDx=0;
	private int clickOffsetBackDx;
	//点击移动到队头部,其他往后面移动
	private ClickRunnable mClickRunnable=null;
	private class ClickRunnable implements Runnable
	{
		private int current_clickIndex;
		private int forwardDx=0;//到队列头部的总长度
		private int backwardsDx=0;//到第二个的长度
		private long duration=300;
		private long interval=10;
		private long startTime;
		private long endTime;

		public ClickRunnable(int current_clickIndex)
		{
			this.current_clickIndex=current_clickIndex;
			duration=Math.max((long) (duration*(float)current_clickIndex/(float)portraitNumberPerScreen),duration);
			duration=Math.min(duration, 700);
		}

		public void stop()
		{
			mHandler.removeCallbacks(this);
		}

		@Override
		public void run() {
			if(startTime==0)
			{
				Rect mRect=new Rect();
				mRect.left=headRectArray[current_clickIndex].left+current_OffsetX+moving_OffsetX;
				mRect.top=headRectArray[current_clickIndex].top+cuurent_OffsetY;
				mRect.right=headRectArray[current_clickIndex].right+current_OffsetX+moving_OffsetX;
				mRect.bottom=headRectArray[current_clickIndex].bottom+cuurent_OffsetY;

				forwardDx=mRect.left-headRectArray[0].left;

				int left=paddingLeft*2+headWidth;
				int top=DensityUtil.dip2px(getContext(), 10);
				Rect secord=new Rect(left,top, left+headWidth, top+headWidth);
				backwardsDx=secord.left-headRectArray[0].left+Math.abs(current_OffsetX);

				startTime=System.currentTimeMillis();
				endTime=startTime+duration;
			}

			long currentTime=System.currentTimeMillis();
			if(currentTime<endTime)
			{
				clickOffsetforwarDx=(int) (forwardDx-forwardDx*((float)(currentTime-startTime)/(float)(duration)));
				clickOffsetBackDx=(int) (backwardsDx*((float)(currentTime-startTime)/(float)(duration)));
				invalidate();
				mHandler.postDelayed(this, interval);
			}
			else
			{
				clickOffsetforwarDx=0;
				clickOffsetBackDx=0;

				String tmp=headList.remove(current_clickIndex);
				headList.add(0, tmp);
				bitmapArray=WindowMgr.getInstance().getAllBitmaps(headList);

				HorImageListView.this.current_clickIndex=0;
				HorImageListView.this.current_Page=1;
				HorImageListView.this.current_OffsetX=0;
				HorImageListView.this.current_clickIndex=0;
				HorImageListView.this.current_foucsIndex=0;
				HorImageListView.this.current_longPressIndex=-1;
				invalidate();

				if(null!=headClickListener)
				headClickListener.onItemClick(current_clickIndex);
			}
		}
	}

	public void setOnHeadClickListener(IHeadClick headClickListener)
	{
		this.headClickListener=headClickListener;
	}

	public static interface IHeadClick
	{
		public void onItemClick(int position);
	}
}

具体的动画效果如下(效果图是丑了点，有录制gif图片软件请推荐一下吧)：

Demo下载地址: http://download.csdn.net/detail/zz7zz7zz/6340747