Android自定义GridView之仿支付宝首页可拖动、可删除的九宫格

       由于项目需要，实现一个类似支付宝首页九宫格的功能。参考了网络多个项目都不能满足需求。最后决定自己修改一个，先看下效果图

第三张图片是拖动修改过位置的。

下面是主函数的布局

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.   
8.     <LinearLayout  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content"  
11.         android:orientation="vertical" >  
12.           
13.         <com.tisson.test.DragGrid  
14.             android:id="@+id/userGridView"  
15.             android:layout_width="fill_parent"  
16.             android:layout_height="match_parent"  
17.             android:layout_gravity="center_horizontal"  
18.             android:gravity="center"  
19.             android:listSelector="@android:color/transparent"  
20.             android:numColumns="4"  
21.             android:scrollbars="vertical"  
22.             android:stretchMode="columnWidth" />  
23.   
24.     </LinearLayout>  
25.   
26. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >                <com.tisson.test.DragGrid            android:id="@+id/userGridView"            android:layout_width="fill_parent"            android:layout_height="match_parent"            android:layout_gravity="center_horizontal"            android:gravity="center"            android:listSelector="@android:color/transparent"            android:numColumns="4"            android:scrollbars="vertical"            android:stretchMode="columnWidth" />    </LinearLayout></LinearLayout>

     对于ITEM的分割线的，ListView设置分割线是很容易的，只需设置ListView的分割线颜色和宽度，在布局中定义Android:divider和android:dividerHeight属性即可。但GridView并没有这样的属性和方法，这里采用的是用每个ITEM设置背景，背景定义了selector，在里面设置一个形状为矩形rectangle，设置这个矩形的stroke描边属性的颜色为分割线的颜色，这样item四周就有了分割线。定义了一个，下面是选择器bg_gv.xml的布局

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:state_pressed="true"><shape android:shape="rectangle">  
5.             <stroke android:width="1.0px" android:color="#ffd3dde6" />  
6.   
7.             <gradient android:angle="270.0" android:endColor="#ffe8ecef" android:startColor="#ffe8ecef" />  
8.         </shape></item>  
9.           
10.     <item android:state_focused="true"><shape android:shape="rectangle">  
11.             <gradient android:angle="270.0" android:endColor="#ffe8ecef" android:startColor="#ffe8ecef" />  
12.   
13.             <stroke android:width="1.0px" android:color="#ffd3dde6" />  
14.         </shape></item>  
15.     <item><shape android:shape="rectangle">  
16.             <gradient android:angle="270.0" android:endColor="#ffffffff" android:startColor="#ffffffff" />  
17.   
18.             <stroke android:width="1.0px" android:color="#ffd3dde6" />  
19.         </shape></item>  
20.   
21. </selector>  

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true"><shape android:shape="rectangle">            <stroke android:width="1.0px" android:color="#ffd3dde6" />            <gradient android:angle="270.0" android:endColor="#ffe8ecef" android:startColor="#ffe8ecef" />        </shape></item>            <item android:state_focused="true"><shape android:shape="rectangle">            <gradient android:angle="270.0" android:endColor="#ffe8ecef" android:startColor="#ffe8ecef" />            <stroke android:width="1.0px" android:color="#ffd3dde6" />        </shape></item>    <item><shape android:shape="rectangle">            <gradient android:angle="270.0" android:endColor="#ffffffff" android:startColor="#ffffffff" />            <stroke android:width="1.0px" android:color="#ffd3dde6" />        </shape></item></selector>

继承GridView自定义DragGrid,ITEM的拖动是通过cache机制保存为bitmap。隐藏点击的ITEM。通过onTouchEvent(MotionEvent ev)在里面修改bitmap的位置。拖动完成之后通过适配器DragAdapter更新ITEM的位置，显示之前被隐藏的ITEM。

下面是部分代码

1. dragItemView = (ViewGroup) getChildAt(downPos- getFirstVisiblePosition());  
2. win_view_x = windowX - dragItemView.getLeft();// VIEW相对自己的X，  
3. win_view_y = windowY - dragItemView.getTop();// VIEW相对自己的y，  
4. //cache机制保存为bitmap  
5. dragItemView.destroyDrawingCache();  
6. dragItemView.setDrawingCacheEnabled(true);  
7.     Bitmap dragBitmap = Bitmap.createBitmap(dragItemView.getDrawingCache());  
8.     mVibrator.vibrate(50);// 设置震动时间  
9.     startDrag(dragBitmap, (int) ev.getRawX(),(int) ev.getRawY());  
10.     hideDropItem();  
11.     dragItemView.setVisibility(View.INVISIBLE);  

dragItemView = (ViewGroup) getChildAt(downPos- getFirstVisiblePosition());win_view_x = windowX - dragItemView.getLeft();// VIEW相对自己的X，win_view_y = windowY - dragItemView.getTop();// VIEW相对自己的y，//cache机制保存为bitmapdragItemView.destroyDrawingCache();dragItemView.setDrawingCacheEnabled(true);Bitmap dragBitmap = Bitmap.createBitmap(dragItemView.getDrawingCache());mVibrator.vibrate(50);// 设置震动时间startDrag(dragBitmap, (int) ev.getRawX(),(int) ev.getRawY());hideDropItem();dragItemView.setVisibility(View.INVISIBLE);

删除是通过点击位置与删除的imageView的范围判断。点击的点击分三种情况处理(1.删除事件，2.取消拖动状态时间，3.item的点击时间，优先级分别是从1-3)。这避免了与ITEM点击事件的冲突。下面是删除事件的处理的部分代码

1. ViewGroup dragViewGroup = (ViewGroup) getChildAt(clickPos- getFirstVisiblePosition());  
2. ImageView deleteIcon = (ImageView) dragViewGroup.findViewById(R.id.delete_icon);  
3. int dragIconViewX = dragViewGroup.getRight() - deleteIcon.getWidth();  
4. int dragIconViewY = dragViewGroup.getTop();  
5. if (dragIconViewX<clickX && clickX<dragViewGroup.getRight() &&  
6.    dragIconViewY < clickY && clickY < (dragIconViewY + deleteIcon.getHeight())) {  
7. DragAdapter mDragAdapter = (DragAdapter) getAdapter();  
8. mDragAdapter.remove(clickPos);  
9. mDragAdapter.setReset(true);  
10. return;  
11. }  

ViewGroup dragViewGroup = (ViewGroup) getChildAt(clickPos- getFirstVisiblePosition());ImageView deleteIcon = (ImageView) dragViewGroup.findViewById(R.id.delete_icon);int dragIconViewX = dragViewGroup.getRight() - deleteIcon.getWidth();int dragIconViewY = dragViewGroup.getTop();if (dragIconViewX<clickX && clickX<dragViewGroup.getRight() &&   dragIconViewY < clickY && clickY < (dragIconViewY + deleteIcon.getHeight())) {DragAdapter mDragAdapter = (DragAdapter) getAdapter();mDragAdapter.remove(clickPos);mDragAdapter.setReset(true);return;}

      具体可参考下面的项目代码。有不懂的再更新说明内容。

      项目链接：项目源码

        补充：关于反馈说ITEM8不能拖动的问题，之前的构想是ITEM8是作为添加模块功能的，而不是作为可拖动的功能模块。解决办法：在DragGrid.Java中找到这个段代码，if (startPosition == getCount() - 1) {return false;}注释掉就可以了。