Android中GridView拖拽的效果【android進化三十六】

       最近看到聯想，摩托羅拉等，手機launcher中有個效果，進入mainmenu後，裏面的應用程序的圖標可以拖來拖去，所以我也參照網上給的代碼，寫了一個例子。還是很有趣的，實現的流暢度沒有人家的那麼好，我只是模仿這種效果，我寫的這個拖拽是兩個圖標之間進行交換，所以，當從一行的某個位置，換到下一行的另一列的時候，發現有好幾個圖標都改變位置了，因爲是相鄰兩個交換位置，所以每經過相鄰的圖標的時候都改變位置。先弄個雛形，以後再更新優化。

轉載請標明出處：http://blog.csdn.net/wdaming1986/article/details/7436881

先看幾張效果圖，再來研究代碼：

        橫行拖拽：

                              

 

         縱向拖拽的效果圖：

                           

下面貼上代碼---->在GragGridViewApp-4-7這個工程裏面：

1、在包com.cn.daming.adapter中，有三個類----->

   1.1、DragAdapter.java這個類中的代碼如下：   

package com.cn.daming.adapter;

import java.util.ArrayList;
import java.util.Collections;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

public abstract class DragAdapter extends BaseAdapter {
	
	protected Context mContext;
	protected ArrayList<DragMessage> mlist;
	
	public DragAdapter(Context mContext, ArrayList<DragMessage> mlist) {
		this.mContext = mContext;
		this.mlist = mlist;
	}
	
	public int getCount() {
	    if (this.mlist != null) {
	        return this.mlist.size();
	    }
		return 0;
	}
	
	public DragMessage getItem(int position) {
		return (DragMessage)this.mlist.get(position);
	}
	
	public long getItemId(int position) {
		return 0;
	}
	
	 public void addMsg(DragMessage msg){
	    this.mlist.add(msg);
	 }
	
	 final void reFlag(){
	    for (DragMessage msg : this.mlist) {
	      msg.flag = 0;
	    }
	    notifyDataSetChanged();
	 }

	 final void swap(int srcPosition, int dragPosition){
	    Collections.swap(this.mlist, srcPosition, dragPosition);
	    notifyDataSetChanged();
	 }

	 final void setFlag(int position, int flag){
	    getItem(position).flag = flag;
	    notifyDataSetChanged();
	 }
	 
	public abstract View getView(int position, View convertView, ViewGroup parent);

}

 

  

   1.2、DragMessage.java這個類中的代碼如下：

package com.cn.daming.adapter;

public class DragMessage {
	 public static final int MOVE_FLAG = 1;
	 public static final int STATIC_FLAG = 0;
	 public int flag = 0;
}

 

   1.3、GragGridView.java核心類中的代碼如下：

package com.cn.daming.adapter;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.PixelFormat;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Looper;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;

public class GragGridView extends GridView{

	private ImageView dragImageView;//拖動item的preview
	private WindowManager windowManager;
	private WindowManager.LayoutParams windowParams;
	private int dragSrcPosition; //開始拖拽的位置  
	private int dragPosition;    // 結束拖拽的位置 
	private int dragPointX;//相對於item的x座標 
	private int dragPointY;//相對於item的y座標  
	private int dragOffsetX;
	private int dragOffsetY;
	private int dragImageId;
	private int itemHeight;
	private int itemWidth;
	private int moveHeight = 0;
	private int upScrollBounce;
	private int downScrollBounce;
	private int dragColor = Color.GRAY;
	
	private int changePosition = -1;
	private long scrollDelayMillis = 10L;
	
	private int middleX;
	private int middleY;
	private boolean isDrag = false;
	
	private RefreshHandler scrollDelayUp = new RefreshHandler(Looper.getMainLooper(), true);
	private RefreshHandler scrollDelayDown = new RefreshHandler(Looper.getMainLooper(), false);
	
	private int scrollHeight = 4;
	private int maxSH = 20;
	private int minSH = 4;
	
    public void setMoveHeight(int height) {
	    this.moveHeight = height;
	}
	
    public void setDragColor(int color) {
      this.dragColor = color;
    }
    
	public void setDragImageId(int id) {
	    this.dragImageId = id;
	}

	public GragGridView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {

		if (ev.getAction() == MotionEvent.ACTION_DOWN) {
			int x = (int)ev.getX();
			int y = (int)ev.getY();
			
			this.dragSrcPosition = this.dragPosition = pointToPosition(x, y);
			if (this.dragPosition == -1) {
		        return super.onInterceptTouchEvent(ev);
		    }
			ViewGroup itemView = (ViewGroup)getChildAt(this.dragPosition - 
				        getFirstVisiblePosition());
			//得到當前點在item內部的偏移量 即相對於item左上角的座標 
			this.itemHeight = itemView.getHeight();
			this.dragPointX = (x - itemView.getLeft());
		    this.dragPointY = (y - itemView.getTop());
		    this.dragOffsetX = (int)(ev.getRawX() - x);
		    this.dragOffsetY = (int)(ev.getRawY() - y);
		    View dragger = itemView.findViewById(this.dragImageId);
		    if ((dragger != null) && (x > dragger.getLeft()&& x < dragger.getRight()) && 
		    		(y > dragger.getTop() && y < dragger.getBottom())) {
		    	if(this.moveHeight <= 0 || (this.moveHeight >= getHeight()/2)) {
		    		this.upScrollBounce = (getHeight() / 3);
		            this.downScrollBounce = (getHeight() * 2 / 3);
		    	} else {
		    		this.upScrollBounce = this.moveHeight;
		            this.downScrollBounce = (getHeight() - this.moveHeight);
		    	}
		    	
		    	//解決問題3     
		    	//每次都銷燬一次cache，重新生成一個bitmap   
		    	itemView.destroyDrawingCache(); 
		    	itemView.setDrawingCacheEnabled(true);
		        Drawable background = itemView.getBackground();
		        itemView.setBackgroundColor(this.dragColor);
		        Bitmap bitmap = Bitmap.createBitmap(itemView.getDrawingCache());
		        itemView.setBackgroundDrawable(background);
		        //建立item的縮略圖 
		        startDrag(bitmap, x, y);
		    }
		    return false;
		}
		return super.onInterceptTouchEvent(ev);
	}



	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		
		if ((this.dragImageView != null) && (this.dragPosition != -1)) {
			int action = ev.getAction();
			 int moveY = (int)ev.getY();
		     int moveX = (int)ev.getX();
			switch(action) {
			      case MotionEvent.ACTION_UP:
			    	    int upX = (int)ev.getX();                 
			    	    int upY = (int)ev.getY();                 
			    	    stopDrag();                 
			    	    onDrop(upX, upY);
		                break;
		          case MotionEvent.ACTION_MOVE:
				        if (moveX <= 0)
					      this.middleX = 0;
					    else if (moveX >= getWidth())
					      this.middleX = getWidth();
					    else {
					      this.middleX = moveX;
					    }
				        
				        if (moveY <= 0)
				          this.middleY = 0;
				        else if (moveY >= getHeight())
				          this.middleY = getHeight();
				        else {
				          this.middleY = moveY;
				        }
				        dragPositionChanged();
				        onDrag(moveX, moveY);
			}
			return true;
		}
		return super.onTouchEvent(ev);
	}

	private void onDrag(int x, int y) {
		if (this.dragImageView != null) {
			this.windowParams.alpha = 0.8F;
			
			if (this.middleX - this.dragPointX <= 0)
		        this.windowParams.x = this.dragOffsetX;
		    else if (this.middleX - this.dragPointX >= getWidth() - this.itemWidth)
		        this.windowParams.x = (getWidth() - this.itemWidth + this.dragOffsetX);
		    else {
		        this.windowParams.x = (this.middleX - this.dragPointX + this.dragOffsetX);
		    }
			
			if (this.middleY - this.dragPointY <= 0)
		        this.windowParams.y = this.dragOffsetY;
		    else if (this.middleY - this.dragPointY >= getHeight() - this.itemHeight)
		        this.windowParams.y = (getHeight() - this.itemHeight + this.dragOffsetY);
		    else {
		        this.windowParams.y = (this.middleY - this.dragPointY + this.dragOffsetY);
		    }
			this.windowManager.updateViewLayout(this.dragImageView, this.windowParams);
		}
		
		int tempPosition = pointToPosition(this.middleX, this.middleY);
		Log.v("daming", "GragGridView ---> 177 tempPosition == "+tempPosition);
	    if (tempPosition != -1) {
	      this.dragPosition = tempPosition;
	    }
	    
	    if ((y >= this.upScrollBounce) && (y <= this.downScrollBounce)) {
	        this.isDrag = false;
	        return;
	    }
	    
	    if (y < this.upScrollBounce) {
	        float a = this.upScrollBounce - this.middleY;
	        float b = this.upScrollBounce;
	        float c = a / b;
	        this.scrollHeight = (int)(c * (this.maxSH - this.minSH) + this.minSH);
	        this.isDrag = true;
	        this.scrollDelayUp.sleep(0L);
	    } else if (y > this.downScrollBounce) {
	        float a = this.middleY - this.downScrollBounce;
	        float b = this.upScrollBounce;
	        float c = a / b;
	        this.scrollHeight = (int)(c * (this.maxSH - this.minSH) + this.minSH);
	        this.isDrag = true;
	        this.scrollDelayDown.sleep(0L);
	    }
	}
	
	private void startDrag(Bitmap bm, int x, int y) {
		stopDrag();
		
		this.windowParams = new WindowManager.LayoutParams();
		//Gravity.TOP|Gravity.LEFT;這個必須加 
		this.windowParams.gravity = Gravity.TOP|Gravity.LEFT;
		//得到preview左上角相對於屏幕的座標 
	    this.windowParams.x = (x - this.dragPointX + this.dragOffsetX);
	    this.windowParams.y = (y - this.dragPointY + this.dragOffsetY);

	    //設置拖拽item的寬和高 
	    this.windowParams.width = WindowManager.LayoutParams.WRAP_CONTENT;     
	    this.windowParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
	    this.windowParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE                         
	                         | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE                         
	                         | WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON                         
	                         | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN; 
	    this.windowParams.format = PixelFormat.TRANSLUCENT;
	    this.windowParams.windowAnimations = 0;

	    ImageView imageView = new ImageView(getContext());
	    imageView.setImageBitmap(bm);
	    this.windowManager = ((WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE));//“window”
	    this.windowManager.addView(imageView, this.windowParams);
	    this.dragImageView = imageView;
	}

	private void stopDrag() {
	   if (this.dragImageView != null) {
	      this.windowManager.removeView(this.dragImageView);
	      this.dragImageView = null;
	   }
	   this.changePosition = -1;
	   this.isDrag = false;
	}
	
	private void dragPositionChanged(){
	    DragAdapter adapter = (DragAdapter)getAdapter();
	    if (this.changePosition != this.dragPosition) {
	      if (this.changePosition == -1)
	      {
	        this.changePosition = this.dragPosition;
	        adapter.setFlag(this.changePosition, 1);
	        return;
	      }

	      adapter.swap(this.changePosition, this.dragPosition);

	      this.changePosition = this.dragPosition;
	    }
	}
	
	public void setMaxSH(int sh){
	    this.maxSH = sh;
	}

	public void setMinSH(int sh){
	    this.minSH = sh;
	}
	
	private void onDrop(int x, int y){
		//爲了避免滑動到分割線的時候，返回-1的問題        
		int tempPosition = pointToPosition(x, y);         
		if(tempPosition!=INVALID_POSITION){             
			dragPosition = tempPosition;         
		} 
		//超出邊界處理         
		if(y<getChildAt(0).getTop()){             
			//超出上邊界            
			dragPosition = 0;         
		}else if(y>getChildAt(getChildCount()-1).getBottom()||
				(y>getChildAt(getChildCount()-1).getTop()&&x>getChildAt(getChildCount()-1).getRight())){
			//超出下邊界             
			dragPosition = getAdapter().getCount()-1;         
		} 

		//數據交換         
		if(dragPosition!=dragSrcPosition&&dragPosition>-1&&dragPosition<getAdapter().getCount()){
			DragAdapter adapter = (DragAdapter)getAdapter();
			adapter.reFlag();
		} 
		
//	    DragAdapter adapter = (DragAdapter)getAdapter();
//	    adapter.reFlag();
	}
	
	private void actDown(){
	    int tempPosition = pointToPosition(this.middleX, this.middleY);
	    if (tempPosition != AdapterView.INVALID_POSITION) {
	      this.dragPosition = tempPosition;
	    }
	    dragPositionChanged();
	}
	
	private void actUp(){
	  int tempPosition = pointToPosition(this.middleX, this.middleY);
	  if (tempPosition != AdapterView.INVALID_POSITION) {
	    this.dragPosition = tempPosition;
	  }
	  dragPositionChanged();
	}
	
	class RefreshHandler extends Handler {
		boolean isUp;

		 public RefreshHandler(Looper looper, boolean isUp){
		      super(looper);
		      this.isUp = isUp;
		 }

		 public RefreshHandler(Looper l) {
		      super(l);
		 }
		 
		  public void handleMessage(Message msg){
		      if (GragGridView.this.isDrag) {
		        if (this.isUp)
		        	GragGridView.this.actUp();
		        else {
		        	GragGridView.this.actDown();
		        }
		        sleep(GragGridView.this.scrollDelayMillis);
		      }
		  }
		  
		  public void sleep(long delayMillis) {
		      sendMessageDelayed(obtainMessage(0), delayMillis);
		  }
	}
}

 

2、在包com.cn.daming.draggridview中，有兩個類---->

   2.1、GragGridViewAppActivity.java入口類中的代碼：

package com.cn.daming.draggridview;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.cn.daming.adapter.DragAdapter;
import com.cn.daming.adapter.DragMessage;
import com.cn.daming.adapter.GragGridView;

public class GragGridViewAppActivity extends Activity {

	private MyAdapter myAdapter;
	private ArrayList<DragMessage> mlist = new ArrayList<DragMessage>();
	private GragGridView mGridView;
	
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.drag_grid_activity);
        initDate();
        mGridView = (GragGridView)findViewById(R.id.drag_grid);
        myAdapter = new MyAdapter(this, mlist);
        mGridView.setAdapter(myAdapter);
        //設置觸發拖動的區域，用一個ImageView來設置,這個必須設置
        mGridView.setDragImageId(R.id.grag_grid_item_view);
        //以下這些都做了相應的處理，不設置沒關係，而且效果也不錯
        //設置拖動浮項的背景色
//      mListView.setDragColor(Color.RED);
        //設置滾動的最大像素
//      mListView.setMaxSH(sh);
        //設置滾動的最小像素
//      mListView.setMinSH(sh);
        //設置滾動區的高度（2*height應該小於ListView自己的高度）
//      mListView.setMoveHeight(height);
    }
	
	private void initDate(){
    	for (int i = 1; i <= 100; i++) {
			MyMessage msg = new MyMessage();
			String str = "DM_" + i;
			msg.msg = str;
			mlist.add(msg);
		}
    }
	
    class MyAdapter extends DragAdapter{
    	
    	Drawable background;

		public MyAdapter(Context mContext, ArrayList<DragMessage> mlist) {
			super(mContext, mlist);
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View view = convertView;
			ViewHolder holder = null;
			if (view == null) {
				view = LayoutInflater.from(mContext).inflate(
						R.layout.drag_grid_item, null);
				holder = new ViewHolder();
				holder.tv = (TextView) view
						.findViewById(R.id.drag_grid_item_text);
				holder.iv = (ImageView) view
				        .findViewById(R.id.drag_grid_item_image);
				view.setTag(holder);
			} else {
				holder = (ViewHolder) view.getTag();
			}
			holder.tv.setText(((MyMessage)getItem(position)).msg);
			holder.iv.setBackgroundResource(R.drawable.title2);
			if(background == null){
				background = view.getBackground();}
			if(getItem(position).flag == DragMessage.MOVE_FLAG){
				view.setBackgroundColor(Color.GRAY); 
			}
			else{
				view.setBackgroundDrawable(background);
			}

			return view;
		}
    	
    }
    private class ViewHolder {
		TextView tv;
		ImageView iv;
	}
}

 

   2.2、MyMessage.java中的代碼：

package com.cn.daming.draggridview;

import com.cn.daming.adapter.DragMessage;

public class MyMessage extends DragMessage{
	public String msg;
}

 

3、佈局文件layout有兩個----->

   3.1、drag_grid_activity.xml中的代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

<com.cn.daming.adapter.GragGridView   
       android:id="@+id/drag_grid"   
       android:layout_width="fill_parent"   
       android:layout_height="fill_parent" 
       android:numColumns="auto_fit"
       android:columnWidth="70dp"
       android:stretchMode="columnWidth"
       android:gravity="center"
       android:layout_gravity="center"
       android:cacheColorHint="#00000000"/>  
</LinearLayout>

 

   3.2、drag_grid_item.xml中的代碼如下：

<?xml version="1.0" encoding="utf-8"?>  
<!-- 一定要使用相對佈局 -->  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:background="#FFFFFF" 
	android:id="@+id/grag_grid_item_view" 
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent">  
    <TextView  
       android:id="@+id/drag_grid_item_text"   
       android:layout_width="wrap_content"   
       android:layout_height="50dp"  
       android:paddingLeft="5dip" 
       android:gravity="center"
       android:textColor="#ffff00ff"
       android:layout_below="@+id/drag_grid_item_image" 
       android:capitalize="none"
    />  
    <ImageView 
       android:id="@+id/drag_grid_item_image"
       android:layout_width="50dp"  
       android:layout_height="50dp"
       android:scaleType="center"
     />
</RelativeLayout>  

有問題的可以留言，歡迎大家來討論研究，分享知識，共同進步！

以下是我在開發中遇到問題的參考資料：

http://www.cnblogs.com/qianxudetianxia/archive/2011/06/19/2084886.html

http://lipeng88213.iteye.com/blog/1099621

http://hi.baidu.com/jwq359699768/blog/item/f2caee8741e71131c75cc369.html

源代碼下載地址：http://download.csdn.net/detail/wdaming1986/4207350