前言
上篇博客我們說到了今日頭條頻道管理的操作交互體驗，我也介紹了2個GridView之間Item的相互移動，詳情請參考：Android 仿今日頭條頻道管理（上）（GridView之間Item的移動和拖拽）
今天把相對比較複雜的gridView的拖拽也記錄下，在開始之前我們事先要了解下Android的事件分發機制，網上這方面的資料也比較多。因爲自定義控件大部分要用到事件分發機制的知識。
實現思路
要實現Item的拖拽，其實並不是真正要去拖拽GridView的Item，而是使用WindowManager添加一個Item的鏡像來代替Item，進行移動拖拽的操作。
1、首先我們對touch事件進行分發，設置長按監聽器。
2、獲取我們長按的Item 隱藏它，然後用WindowManager添加一個Item的鏡像View顯示在屏幕上。
3、然後對touch事件進行處理，在手勢移動的時候我們更新WindowManager中View的位置（也就是移動），並且根據移動的位置來處理gridview其它item位置的變化。
4、在手勢移動結束後、擡起手勢時，我們清理鏡像，gridview交互數據，刷新視圖。
實現代碼
說了這麼多，來看看怎麼實現，先看下我們的自定義gridView：
package com.test.drag.view;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.PixelFormat;
import android.os.Vibrator;
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.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import com.test.drag.DragAdapter;
import com.test.drag.R;
/**
* Created by fuweiwei on 2016/1/9.
*/
public class DragGridView extends GridView{
/** 點擊時候的X位置 */
public int downX;
/** 點擊時候的Y位置 */
public int downY;
/** 點擊時候對應整個界面的X位置 */
public int windowX;
/** 點擊時候對應整個界面的Y位置 */
public int windowY;
/** VIEW相對自己的X */
private int win_view_x;
/**VIEW相對自己的Y*/
private int win_view_y;
/** 長按時候對應postion */
public int dragPosition;
/** Up後對應的ITEM的Position */
private int dropPosition;
/** 開始拖動的ITEM的Position*/
private int startPosition;
/** item高 */
private int itemHeight;
/** item寬 */
private int itemWidth;
/** 拖動的時候對應ITEM的VIEW */
private View dragImageView = null;
/** 長按的時候ITEM的VIEW*/
private ViewGroup dragItemView = null;
/** WindowManager管理器 */
private WindowManager windowManager = null;
/** */
private WindowManager.LayoutParams windowParams = null;
/** item總量*/
private int itemTotalCount;
/** 一行的ITEM數量*/
private int nColumns = 4;
/** 行數 */
private int nRows;
/** 剩餘部分 */
private int Remainder;
/** 是否在移動 */
private boolean isMoving = false;
/** */
private int holdPosition;
/** 拖動的時候放大的倍數 */
private double dragScale = 1.2D;
/** 震動器 */
private Vibrator mVibrator;
/** 每個ITEM之間的水平間距 */
private int mHorizontalSpacing = 15;
/** 每個ITEM之間的豎直間距 */
private int mVerticalSpacing = 15;
/** 移動時候最後個動畫的ID */
private String LastAnimationID;
public DragGridView(Context context) {
super(context);
init(context);
}
public DragGridView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public DragGridView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
/**
* dip轉爲 px
*/
public int dip2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
public void init(Context context){
mVibrator = (Vibrator) context.getSystemService(Context.VIBRATOR_SERVICE);
//將佈局文件中設置的間距dip轉爲px
mHorizontalSpacing = dip2px(context, mHorizontalSpacing);
}
/** 在ScrollView內，所以要進行計算高度 */
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_DOWN) {
downX = (int) ev.getX();
downY = (int) ev.getY();
windowX = (int) ev.getX();
windowY = (int) ev.getY();
setOnItemClickListener(ev);
}
return super.dispatchTouchEvent(ev);
}
/** 停止拖動 ，釋放並初始化 */
private void stopDrag() {
if (dragImageView != null) {
windowManager.removeView(dragImageView);
dragImageView = null;
}
}
/** 在拖動的情況更新View的位置 */
private void onDrag(int x, int y , int rawx , int rawy) {
if (dragImageView != null) {
windowParams.alpha = 0.6f;
windowParams.x = rawx - win_view_x;
windowParams.y = rawy - win_view_y;
windowManager.updateViewLayout(dragImageView, windowParams);
}
}
/**
*創建窗口對象、添加我們要移動的View
* @param dragBitmap
* @param x
* @param y
*/
public void startDrag(Bitmap dragBitmap, int x, int y) {
stopDrag();
windowParams = new WindowManager.LayoutParams();// 獲取WINDOW界面的
//Gravity.TOP|Gravity.LEFT;這個必須加
windowParams.gravity = Gravity.TOP | Gravity.LEFT;
//得到要移動的View左上角相對於屏幕的座標
windowParams.x = x - win_view_x;
windowParams.y = y - win_view_y;
//設置拖拽item的寬和高
windowParams.width = (int) (dragScale * dragBitmap.getWidth());// 放大dragScale倍，可以設置拖動後的倍數
windowParams.height = (int) (dragScale * dragBitmap.getHeight());// 放大dragScale倍，可以設置拖動後的倍數
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 iv = new ImageView(getContext());
iv.setImageBitmap(dragBitmap);
windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);// "window"
windowManager.addView(iv, windowParams);
dragImageView = iv;
}
/** 隱藏 放下 的ITEM*/
private void hideDropItem() {
((DragAdapter) getAdapter()).setShowDropItem(false);
}
/** 在鬆手下放的情況，更新界面 */
private void onDrop(int x, int y) {
// 根據拖動到的x,y座標獲取拖動位置下方的ITEM對應的POSTION
int tempPostion = pointToPosition(x, y);
dropPosition = tempPostion;
DragAdapter mDragAdapter = (DragAdapter) getAdapter();
//顯示剛拖動的ITEM
mDragAdapter.setShowDropItem(true);
//刷新適配器，讓對應的ITEM顯示
mDragAdapter.notifyDataSetChanged();
}
/**
* 長按點擊監聽
* @param ev
*/
public void setOnItemClickListener(final MotionEvent ev) {
setOnItemLongClickListener(new OnItemLongClickListener() {
@Override
public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
int x = (int) ev.getX();// 長按事件的X位置
int y = (int) ev.getY();// 長按事件的y位置
startPosition = position;// 第一次點擊的postion
dragPosition = position;
if (startPosition <= 1) {//前2個默認不點擊、可以設置
return false;
}
ViewGroup dragViewGroup = (ViewGroup) getChildAt(dragPosition - getFirstVisiblePosition());
TextView dragTextView = (TextView)dragViewGroup.findViewById(R.id.text_item);
dragTextView.setSelected(true);
dragTextView.setEnabled(false);
itemHeight = dragViewGroup.getHeight();
itemWidth = dragViewGroup.getWidth();
itemTotalCount = DragGridView.this.getCount();
// 如果特殊的這個不等於拖動的那個,並且不等於-1
if (dragPosition != AdapterView.INVALID_POSITION) {
// 釋放的資源使用的繪圖緩存。如果你調用buildDrawingCache()手動沒有調用setDrawingCacheEnabled(真正的),你應該清理緩存使用這種方法。
win_view_x = windowX - dragViewGroup.getLeft();//VIEW相對自己的X，半斤
win_view_y = windowY - dragViewGroup.getTop();//VIEW相對自己的y，半斤
dragItemView = dragViewGroup;
dragViewGroup.destroyDrawingCache();
dragViewGroup.setDrawingCacheEnabled(true);
Bitmap dragBitmap = Bitmap.createBitmap(dragViewGroup.getDrawingCache());
mVibrator.vibrate(50);//設置震動時間
startDrag(dragBitmap, (int)ev.getRawX(), (int)ev.getRawY());
hideDropItem();
dragViewGroup.setVisibility(View.INVISIBLE);
isMoving = false;
return true;
}
return false;
}
});
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (dragImageView != null && dragPosition != AdapterView.INVALID_POSITION) {
// 移動時候的對應x,y位置
int x = (int) ev.getX();
int y = (int) ev.getY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = (int) ev.getX();
windowX = (int) ev.getX();
downY = (int) ev.getY();
windowY = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE:
onDrag(x, y ,(int) ev.getRawX() , (int) ev.getRawY());
if (!isMoving){
OnMove(x, y);
}
if (pointToPosition(x, y) != AdapterView.INVALID_POSITION){
break;
}
break;
case MotionEvent.ACTION_UP:
stopDrag();
onDrop(x, y);
requestDisallowInterceptTouchEvent(false);
break;
default:
break;
}
}
return super.onTouchEvent(ev);
}
/** 移動的時候觸發，移動所有改變的Item*/
public void OnMove(int x, int y) {
// 拖動的VIEW下方的POSTION
int dPosition = pointToPosition(x, y);
// 判斷下方的POSTION是否是最開始2個不能拖動的
if (dPosition > 1) {
if ((dPosition == -1) || (dPosition == dragPosition)){
return;
}
dropPosition = dPosition;
if (dragPosition != startPosition){
dragPosition = startPosition;
}
int movecount;
//拖動的=開始拖的，並且 拖動的 不等於放下的
if ((dragPosition == startPosition) || (dragPosition != dropPosition)){
//移需要移動的動ITEM數量
movecount = dropPosition - dragPosition;
}else{
//移需要移動的動ITEM數量爲0
movecount = 0;
}
if(movecount == 0){
return;
}
int movecount_abs = Math.abs(movecount);
if (dPosition != dragPosition) {
//dragGroup設置爲不可見
ViewGroup dragGroup = (ViewGroup) getChildAt(dragPosition);
dragGroup.setVisibility(View.INVISIBLE);
float to_x = 1;//移動的X偏移量
float to_y;// 移動的Y偏移量
//x_vlaue移動的距離百分比（相對於自己長度的百分比）
float x_vlaue = ((float) mHorizontalSpacing / (float) itemWidth) + 1.0f;
//y_vlaue移動的距離百分比（相對於自己寬度的百分比）
float y_vlaue = ((float) mVerticalSpacing / (float) itemHeight) + 1.0f;
Log.d("x_vlaue", "x_vlaue = " + x_vlaue);
for (int i = 0; i < movecount_abs; i++) {
to_x = x_vlaue;
to_y = y_vlaue;
//向右
if (movecount > 0) {
// 判斷是不是同一行的
holdPosition = dragPosition + i + 1;
if (dragPosition / nColumns == holdPosition / nColumns) {
to_x = - x_vlaue;
to_y = 0;
} else if (holdPosition % 4 == 0) {
to_x = 3 * x_vlaue;
to_y = - y_vlaue;
} else {
to_x = - x_vlaue;
to_y = 0;
}
}else{
//向左,下移到上，右移到左
holdPosition = dragPosition - i - 1;
if (dragPosition / nColumns == holdPosition / nColumns) {
to_x = x_vlaue;
to_y = 0;
} else if((holdPosition + 1) % 4 == 0){
to_x = -3 * x_vlaue;
to_y = y_vlaue;
}else{
to_x = x_vlaue;
to_y = 0;
}
}
ViewGroup moveViewGroup = (ViewGroup) getChildAt(holdPosition);
Animation moveAnimation = getMoveAnimation(to_x, to_y);
moveViewGroup.startAnimation(moveAnimation);
//如果是最後一個移動的，那麼設置他的最後個動畫ID爲LastAnimationID
if (holdPosition == dropPosition) {
LastAnimationID = moveAnimation.toString();
}
moveAnimation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
isMoving = true;
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
// 如果爲最後個動畫結束，那執行下面的方法
if (animation.toString().equalsIgnoreCase(LastAnimationID)) {
DragAdapter mDragAdapter = (DragAdapter) getAdapter();
mDragAdapter.exchange(startPosition,dropPosition);
startPosition = dropPosition;
dragPosition = dropPosition;
isMoving = false;
}
}
});
}
}
}
}
/** 獲取移動的動畫 */
public Animation getMoveAnimation(float toXValue, float toYValue) {
TranslateAnimation mTranslateAnimation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0F,
Animation.RELATIVE_TO_SELF,toXValue,
Animation.RELATIVE_TO_SELF, 0.0F,
Animation.RELATIVE_TO_SELF, toYValue);// 當前位置移動到指定位置
mTranslateAnimation.setFillAfter(true);// 設置一個動畫效果執行完畢後，View對象保留在終止的位置。
mTranslateAnimation.setDuration(300L);
return mTranslateAnimation;
}
}
適配器代碼：
package com.test.drag;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import java.util.List;
public class DragAdapter extends BaseAdapter {
/** TAG*/
private final static String TAG = "DragAdapter";
/** 是否顯示底部的ITEM */
private boolean isItemShow = false;
private Context context;
/** 控制的postion */
private int holdPosition;
/** 是否改變 */
private boolean isChanged = false;
/** 列表數據是否改變 */
private boolean isListChanged = false;
/** 是否可見 */
boolean isVisible = true;
/** 可以拖動的列表（即用戶選擇的頻道列表） */
public List<String> channelList;
/** TextView 頻道內容 */
private TextView item_text;
/** 要刪除的position */
public int remove_position = -1;
/** 是否是用戶頻道 */
private boolean isUser = false;
public DragAdapter(Context context, List<String> channelList,boolean isUser) {
this.context = context;
this.channelList = channelList;
this.isUser = isUser;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return channelList == null ? 0 : channelList.size();
}
@Override
public String getItem(int position) {
// TODO Auto-generated method stub
if (channelList != null && channelList.size() != 0) {
return channelList.get(position);
}
return null;
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = LayoutInflater.from(context).inflate(R.layout.adapter_mygridview_item, null);
item_text = (TextView) view.findViewById(R.id.text_item);
String channel = getItem(position);
item_text.setText(channel);
if(isUser){
if ((position == 0) || (position == 1)){
item_text.setEnabled(false);
}
}
if (isChanged && (position == holdPosition) && !isItemShow) {
item_text.setText("");
item_text.setSelected(true);
item_text.setEnabled(true);
isChanged = false;
}
if (!isVisible && (position == -1 + channelList.size())) {
item_text.setText("");
item_text.setSelected(true);
item_text.setEnabled(true);
}
if(remove_position == position){
item_text.setText("");
}
return view;
}
/** 添加頻道列表 */
public void addItem(String channel) {
channelList.add(channel);
isListChanged = true;
notifyDataSetChanged();
}
/** 拖動變更頻道排序 */
public void exchange(int dragPostion, int dropPostion) {
holdPosition = dropPostion;
String dragItem = getItem(dragPostion);
Log.d(TAG, "startPostion=" + dragPostion + ";endPosition=" + dropPostion);
if (dragPostion < dropPostion) {
channelList.add(dropPostion + 1, dragItem);
channelList.remove(dragPostion);
} else {
channelList.add(dropPostion, dragItem);
channelList.remove(dragPostion + 1);
}
isChanged = true;
isListChanged = true;
notifyDataSetChanged();
}
/** 獲取頻道列表 */
public List<String> getChannnelLst() {
return channelList;
}
/** 設置刪除的position */
public void setRemove(int position) {
remove_position = position;
notifyDataSetChanged();
}
/** 刪除頻道列表 */
public void remove() {
channelList.remove(remove_position);
remove_position = -1;
isListChanged = true;
notifyDataSetChanged();
}
/** 設置頻道列表 */
public void setListDate(List<String> list) {
channelList = list;
}
/** 獲取是否可見 */
public boolean isVisible() {
return isVisible;
}
/** 排序是否發生改變 */
public boolean isListChanged() {
return isListChanged;
}
/** 設置是否可見 */
public void setVisible(boolean visible) {
isVisible = visible;
}
/** 顯示放下的ITEM */
public void setShowDropItem(boolean show) {
isItemShow = show;
}
}代碼比較多，我一 一解釋下：
dispatchTouchEvent()：因爲gridview也是繼承ViewGroup的，覆寫它的事件分發方法。在這裏設置長按事件監聽。
startDarg():根據長按獲取的Item，獲取緩存對象Bitmap，new一個Imageview代替Item，然後創建我們的窗口對象WindowManager ，把Imageview添加到我們的WindowManager中。
hideDropItem():隱藏我們長按的Item，因爲我們已經用WindowManager來代替我們的Item。
onTouchEvent():對分發來的事件進行處理，手勢移動的時候，進行相應的操作。
onDrag()：移動的時候刷新WindowManager中View的位置。
onMove():根據手勢移動的位置，獲取X、Y座標，判斷移動到了gridview的哪個位置、是向左移動、還是向右移動、是否處於同一行，因爲取代了其它Item的位置，會導致一些item的位置也會發生改變，所以我們要移動改變位置了的Item，裏面的邏輯有點複雜，不過我都帶代碼裏註釋了，很容易看懂。
onDrop():當手勢移動完畢後、擡起手勢時、我們就顯示移動時隱藏的Item。
stopDrop():移動完畢後、我們要清除WindowManager中的View，防止重複。
適配器中的代碼跟上一篇博客中適配器基本沒什麼不同，就是加了一個交換數據的方法exchange(),認真看的也很好理解，就是當移動item的位置大於初始位置時，就是把移動的item放到後面一個位置，然後刪除之前的item，這樣位置就發生變化，反之也是一樣的道理。
效果如下：
其實只要思路正確了，我們就有方法實現以比較難的功能了，網上也有很多其他的方法來實現這個功能，也可以多看看別人是怎麼實現的，自己動手寫，對自己幫助還是很大的，我這個也是參考網上一些資料改造的，有什麼問題，歡迎大家指正，下面有項目源碼，Android studio環境。