android书架，可以拖动的图书

                                           

需要实现这样的功能：

        1）书架的风格可以切换;

        2）书籍在整个书架上可以随意拖动，书架可以上下滚动;

        3）书籍只能放在书架层上;

        4）点击书籍可以动画放大书籍;

依次来解决问题，1）书架的风格可以切换，可以定义几个xml界面，在需要的时候分别切换就可以了。2）书籍可以在书架上随意拖动，而且书架也可以上下滚动，这样会有手势事件冲突的问题，仔细分析一下可以这样解决：点击书籍移动的时候屏蔽掉外层书架的上下滚动事件，点击书架上下查看移动的时候不理会书籍事件的处理。3）要实现书籍只能放在书架层上可以这样做：在书架层上定义一部分空间，当书籍移动后用户的手指离开屏幕时获取书籍在屏幕的位置，依次判断是否在某个书架层上，如果在就将书籍放在合适的位置，若不在就将书籍放回上一个合适的位置。4）点击书籍要放大查看也比较简单，需要定义一个xml动画文件，在监听到书籍点击事件的时候将书籍置于屏幕中央，并且展开动画放大书籍，动画结束之后将书籍放回原位。

这个demo难点在于手势事件的处理，书架的上下滚动我使用了ScrollView来包裹 一个RelativeLayout实现，书籍我使用一个自定义的ImageView来展示。难点在于当手指点住书籍滑动过程中，有可能手滑动得快一点，滑到书籍 Imageview 控件外面去了，也就是滑到了外层的ScrollView上面，这样一来书籍就无法上下滑动了，只能够左右滑动。我的处理方法是将当手滑动到scrollview里面的时候将该滑动时间传递给imageview，同时在scrollview的ontouch方法里面返回true。看代码：

package com.shelfstyles;

import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

/**
 * scrollview的ontouch事件监听器
 * @author swerit
 *
 */
public class ScrollViewOnTouchListener implements OnTouchListener {

	/** scrollview的滑动状态*/
	private final static int SCROLLVIEW_STATE_REST	= -1;
	private final static int SCROLLVIEW_STATE_DOWN	= 0;
	private final static int SCROLLVIEW_STATE_MOVE	= 1;
	private int scrollviewTouchState = SCROLLVIEW_STATE_REST;
	/** scrollview在一次完整的触摸事件中是否经历过DOWN事件*/
	private boolean varTouchStateDOWN = false;
	
	private Book mBook;
	private BookOnTouchListener mBookOnTouchListener;
	
	
	public ScrollViewOnTouchListener(Book book, BookOnTouchListener bookOnTouchListener){
		this.mBook = book;
		this.mBookOnTouchListener = bookOnTouchListener;
	}
	
	
	@Override
	public boolean onTouch(View v, MotionEvent event) {
		
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			scrollviewTouchState = SCROLLVIEW_STATE_DOWN;
			varTouchStateDOWN = true;
			break;
			
		case MotionEvent.ACTION_MOVE:
			if (scrollviewTouchState == SCROLLVIEW_STATE_DOWN){
				//正常滑动scrollview
				scrollviewTouchState = SCROLLVIEW_STATE_MOVE;
				return false;
			}else if (scrollviewTouchState == SCROLLVIEW_STATE_REST){
				//由book滑动进入scrollview，将事件传递给书籍
				if (mBookOnTouchListener != null){
					mBookOnTouchListener.onTouch(mBook, event);
				}
				return true;
			}
			break;
			
		case MotionEvent.ACTION_UP:
			//scrollview上终止滑动
			scrollviewTouchState = SCROLLVIEW_STATE_REST;
			
			if (!varTouchStateDOWN){
				//检测书籍是否包含在可放置区域
				if (mBookOnTouchListener != null){
					mBookOnTouchListener.judgeWhetherContainBook();
				}
			}
			
			varTouchStateDOWN = false;
			
			break;
		}
		
		return false;
	}

}

那么书籍的滑动和点击事件呢也是很重要的，里面需要判断书籍下一步移动位置，和书籍的点击事件的处理。看代码：

package com.shelfstyles;

import android.content.Context;
import android.graphics.Point;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Toast;

/**
 * 书籍ontouch监听事件
 * @author swerit
 *
 */
public class BookOnTouchListener implements OnTouchListener{

	/** 受事件影响的书籍对象*/
	private Book mBook;
	/** 书架层对象数组*/
	private OneFloor[] mFloorList;
	/** 整个书架的宽度和高度*/
	private int shelfWidth, shelfHeight;
	private Context mContext;
	
	
	public BookOnTouchListener(Context context, Book book, OneFloor[] floorList){
		this.mBook = book;
		this.mFloorList = floorList;
		this.mContext = context;
	}
	
	
	@Override
	public boolean onTouch(View v, MotionEvent event) {
		Book book = (Book) v;
		
		switch (event.getAction()) {
		
		case MotionEvent.ACTION_DOWN:
			book.setnTraceX((int) event.getRawX());
			book.setnTraceY((int)event.getRawY());
			break;
			
		case MotionEvent.ACTION_MOVE:
			int deltaX = (int) (event.getRawX() - book.getnTraceX());
			int deltaY = (int) (event.getRawY() - book.getnTraceY());
			
			int top = book.getTop() + deltaY;
			int left = book.getLeft() + deltaX;
			if (top < 0){
				top = 0;
			}
			if (top > shelfHeight - book.getHeight()){
				top = shelfHeight - book.getHeight();
			}
			
			if (left > shelfWidth - book.getWidth()){
				left = shelfWidth - book.getWidth();
			}
			if (left < 0){
				left = 0;
			}
			
			book.layout(left, top, left + book.getWidth(), top + book.getHeight());
			
			book.setnTraceX((int)event.getRawX());
			book.setnTraceY((int)event.getRawY());
			
			break;
			
		case MotionEvent.ACTION_UP:
			//手指抬起时判断书籍是否在可以放置的位置
			judgeWhetherContainBook();
//			Toast.makeText(mContext, "点击书籍", Toast.LENGTH_SHORT).show();
			//将书籍放在屏幕中央
			int l = MainActivity.screenWidth / 2 - mBook.getWidth() / 2;
			int t = MainActivity.screenHeight / 2 - mBook.getHeight() / 2;
			int r = MainActivity.screenWidth / 2 + mBook.getWidth() / 2;
			int b = MainActivity.screenHeight / 2 + mBook.getHeight() / 2;
			
			mBook.layout(l, t, r, b);
			Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.anim);
			mBook.startAnimation(animation);
			mBook.postDelayed(new Runnable() {
				@Override
				public void run() {
					int left 	= mBook.getnLastLocationX();
					int bottom	= mBook.getnLastLocationY();
					if (left == 0 && bottom == 0){
						return;
					}
					mBook.layout(left, bottom - mBook.getHeight(), left + mBook.getWidth(), bottom);
				}
			}, animation.getDuration());
			break;
		}
		
		return true;
	}

	
	public void judgeWhetherContainBook(){
		Point pointLeftTop, pointLeftBottom, pointRightTop, pointRightBottom;
		pointLeftTop 		= new Point(mBook.getLeft(), mBook.getTop());
		pointLeftBottom 	= new Point(mBook.getLeft(), mBook.getBottom());
		pointRightTop 		= new Point(mBook.getRight(), mBook.getTop());
		pointRightBottom 	= new Point(mBook.getRight(), mBook.getBottom());
		
		
		for (int i = 0; i < mFloorList.length; i++){
			if (judge(mFloorList[i].judgeContain(pointLeftTop, Book.POINT_LEFT_TOP, mBook), mBook) 
					|| judge(mFloorList[i].judgeContain(pointLeftBottom, Book.POINT_LEFT_BOTTOM, mBook), mBook)
					|| judge(mFloorList[i].judgeContain(pointRightTop, Book.POINT_RIGHT_TOP, mBook), mBook) 
					|| judge(mFloorList[i].judgeContain(pointRightBottom, Book.POINT_RIGHT_BOTTOM, mBook), mBook)){
				
				//检测到书籍包含在可放置区域
				break;
			}
		}
	}
	

	private boolean judge(Point newLeftBottom, Book book){
		if (newLeftBottom != null){
			//找到下一个放置的位置
			book.setnLastLocationX(newLeftBottom.x);
			book.setnLastLocationY(newLeftBottom.y);
			//这里可以添加移动时的动画效果
			/**
			 * TODO
			 */
			
			book.layout(newLeftBottom.x, newLeftBottom.y - book.getHeight(), newLeftBottom.x + book.getWidth(), newLeftBottom.y);
			return true;
			
		}else {
			//书籍没有到达正确的放置空间，将书籍放回原位
			int left 	= book.getnLastLocationX();
			int bottom	= book.getnLastLocationY();
			if (left == 0 && bottom == 0){
				return false;
			}
			book.layout(left, bottom - book.getHeight(), left + book.getWidth(), bottom);
		}
		
		return false;
	}
	
	
	public void setShelfWidth(int shelfWidth){
		this.shelfWidth = shelfWidth;
	}
	public void setShelfHeight(int shelfHeight){
		this.shelfHeight = shelfHeight;
	}
}

重点提醒，在这个demo中对坐标的计算都是以子控件相对于父控件的坐标来实现的，特别要理清楚子控件坐标位置的来源，大家都使用同一个参照物才能计算准确。

整个工程源代码下载地址：点击打开下载链接