Android学习系列(12)--App列表之拖拽GridView

根据前面文章中ListView拖拽的实现原理，我们也是很容易实现推拽GridView的，下面我就以相同步骤实现基本的GridView拖拽效果。
     因为GridView不用做分组处理，代码处理起来更简洁，而且原理前面已经讲解清楚了，代码中只是简单的过下，必要的地方简单的注释一下。
1.主界面DragGridActivity.

1. public class DragGridActivity extends Activity {
2. private static List<String> list = null;
3. //自定义适配器
4. private DragGridAdapter adapter = null;
5. @Override
6. public void onCreate(Bundle savedInstanceState) {
7. super.onCreate(savedInstanceState);
8. setContentView(R.layout.drag_grid_activity);
9. initData();
10. //后面用到的自定义GridView
11. DragGridView dragGridView = (DragGridView)findViewById(R.id.drag_grid);
12. adapter = new DragGridAdapter(this, list);
13. dragGridView.setAdapter(adapter);
14. }
15. public void initData(){
16. //数据结果
17. list = new ArrayList<String>();
18. for(int i=0; i<12; i++){
19. list.add("grid_"+i%12);
20. }
21. }
22. }

复制代码

2.主界面UI布局drag_grid_activity.xml.

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:background="#ffffff"
7. android:padding="10dip"
8. >
9. <com.fengjian.test.DragGridView
10. android:id="@+id/drag_grid"
11. android:layout_width="fill_parent"
12. android:layout_height="wrap_content"
13. android:cacheColorHint="#00000000"
14. android:numColumns="3"
15. android:stretchMode="columnWidth"
16. android:verticalSpacing="5dip"
17. android:horizontalSpacing="20dip"
18. android:background="#ffffff"/>
19. </LinearLayout>

复制代码

3.列表项布局drag_grid_item.xml.

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:paddingLeft="5dip"
6. android:paddingRight="5dip">
7. <ImageView android:id="@+id/drag_grid_item_image"
8. android:src="@drawable/grid_icon"
9. android:layout_margin="5dip"
10. android:layout_alignParentTop="true"
11. android:layout_width="fill_parent"
12. android:layout_height="wrap_content"/>
13. <ImageView android:id="@+id/drag_grid_item_drag"
14. android:src="@drawable/grid_drag"
15. android:layout_alignParentTop="true"
16. android:layout_alignParentRight="true"
17. android:layout_width="wrap_content"
18. android:layout_height="wrap_content"/>
19. </RelativeLayout>

复制代码

4.自定义适配器DragGridAdapter，继承ArrayAdapter<String>.

1. public static class DragGridAdapter extends ArrayAdapter<String>{
2. public DragGridAdapter(Context context, List<String> objects) {
3. super(context, 0, objects);
4. }
5. public List<String> getList(){
6. return list;
7. }
8. @Override
9. public View getView(int position, View convertView, ViewGroup parent) {
10. View view = convertView;
11. if(view==null){
12. view = LayoutInflater.from(getContext()).inflate(R.layout.drag_grid_item, null);
13. }
14. try {
15. //根据文件名获取资源文件夹中的图片资源
16. Field f= (Field)R.drawable.class.getDeclaredField(getItem(position));
17. int i=f.getInt(R.drawable.class);
18. ImageView imageview= (ImageView)view.findViewById(R.id.drag_grid_item_image);
19. imageview.setImageResource(i);
20. } catch (SecurityException e) {
21. e.printStackTrace();
22. } catch (NoSuchFieldException e) {
23. e.printStackTrace();
24. } catch (IllegalArgumentException e) {
25. e.printStackTrace();
26. } catch (IllegalAccessException e) {
27. e.printStackTrace();
28. }
29. return view;
30. }
31. }

复制代码

5.自定义视图类DragGridView，继承GridView.

1. public class DragGridView extends GridView {
2. //定义基本的成员变量
3. private ImageView dragImageView;
4. private int dragSrcPosition;
5. private int dragPosition;
6. //x,y坐标的计算
7. private int dragPointX;
8. private int dragPointY;
9. private int dragOffsetX;
10. private int dragOffsetY;
11. private WindowManager windowManager;
12. private WindowManager.LayoutParams windowParams;
13. private int scaledTouchSlop;
14. private int upScrollBounce;
15. private int downScrollBounce;
16. public DragGridView(Context context, AttributeSet attrs) {
17. super(context, attrs);
18. }
19. }

复制代码

6. 重写触控拦截事件方法onInterceptTouchEvent().

1. @Override
2. public boolean onInterceptTouchEvent(MotionEvent ev) {
3. if(ev.getAction()==MotionEvent.ACTION_DOWN){
4. int x = (int)ev.getX();
5. int y = (int)ev.getY();
6. dragSrcPosition = dragPosition = pointToPosition(x, y);
7. if(dragPosition==AdapterView.INVALID_POSITION){
8. return super.onInterceptTouchEvent(ev);
9. }
10. ViewGroup itemView = (ViewGroup) getChildAt(dragPosition-getFirstVisiblePosition());
11. dragPointX = x - itemView.getLeft();
12. dragPointY = y - itemView.getTop();
13. dragOffsetX = (int) (ev.getRawX() - x);
14. dragOffsetY = (int) (ev.getRawY() - y);
15. View dragger = itemView.findViewById(R.id.drag_grid_item_drag);
16. //如果选中拖动图标
17. if(dragger!=null&&dragPointX>dragger.getLeft()&&dragPointX<dragger.getRight()&&dragPointY>dragger.getTop()&&dragPointY<dragger.getBottom()+20){
18. upScrollBounce = Math.min(y-scaledTouchSlop, getHeight()/4);
19. downScrollBounce = Math.max(y+scaledTouchSlop, getHeight()*3/4);
20. itemView.setDrawingCacheEnabled(true);
21. Bitmap bm = Bitmap.createBitmap(itemView.getDrawingCache());
22. startDrag(bm, x, y);
23. }
24. return false;
25. }
26. return super.onInterceptTouchEvent(ev);
27. }

复制代码

startDrag和stopDrag方法如下：

1. public void startDrag(Bitmap bm, int x, int y){
2. stopDrag();
3. windowParams = new WindowManager.LayoutParams();
4. windowParams.gravity = Gravity.TOP|Gravity.LEFT;
5. windowParams.x = x - dragPointX + dragOffsetX;
6. windowParams.y = y - dragPointY + dragOffsetY;
7. windowParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
8. windowParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
9. windowParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
10. | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
11. | WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
12. | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN;
13. windowParams.format = PixelFormat.TRANSLUCENT;
14. windowParams.windowAnimations = 0;
15. ImageView imageView = new ImageView(getContext());
16. imageView.setImageBitmap(bm);
17. windowManager = (WindowManager)getContext().getSystemService("window");
18. windowManager.addView(imageView, windowParams);
19. dragImageView = imageView;
20. }
21. public void onDrag(int x, int y){
22. if(dragImageView!=null){
23. windowParams.alpha = 0.8f;
24. windowParams.x = x - dragPointX + dragOffsetX;
25. windowParams.y = y - dragPointY + dragOffsetY;
26. windowManager.updateViewLayout(dragImageView, windowParams);
27. }
28. int tempPosition = pointToPosition(x, y);
29. if(tempPosition!=INVALID_POSITION){
30. dragPosition = tempPosition;
31. }
32. //滚动
33. if(y<upScrollBounce||y>downScrollBounce){
34. //使用setSelection来实现滚动
35. setSelection(dragPosition);
36. }
37. }

复制代码

7.重写onTouchEvent()方法. 

1. @Override
2. public boolean onTouchEvent(MotionEvent ev) {
3. if(dragImageView!=null&&dragPosition!=INVALID_POSITION){
4. int action = ev.getAction();
5. switch(action){
6. case MotionEvent.ACTION_UP:
7. int upX = (int)ev.getX();
8. int upY = (int)ev.getY();
9. stopDrag();
10. onDrop(upX,upY);
11. break;
12. case MotionEvent.ACTION_MOVE:
13. int moveX = (int)ev.getX();
14. int moveY = (int)ev.getY();
15. onDrag(moveX,moveY);
16. break;
17. default:break;
18. }
19. return true;
20. }
21. return super.onTouchEvent(ev);
22. }

复制代码

其中onDrag方法如下：

1. public void onDrag(int x, int y){
2. if(dragImageView!=null){
3. windowParams.alpha = 0.8f;
4. windowParams.x = x - dragPointX + dragOffsetX;
5. windowParams.y = y - dragPointY + dragOffsetY;
6. windowManager.updateViewLayout(dragImageView, windowParams);
7. }
8. int tempPosition = pointToPosition(x, y);
9. if(tempPosition!=INVALID_POSITION){
10. dragPosition = tempPosition;
11. }
12. //滚动
13. if(y<upScrollBounce||y>downScrollBounce){
14. //使用setSelection来实现滚动
15. setSelection(dragPosition);
16. }
17. }

复制代码

8.放下影像，数据更新。
在onDrop方法中实现：

1. public void onDrop(int x, int y){
2. //为了避免滑动到分割线的时候，返回-1的问题
3. int tempPosition = pointToPosition(x, y);
4. if(tempPosition!=INVALID_POSITION){
5. dragPosition = tempPosition;
6. }
7. //超出边界处理
8. if(y<getChildAt(0).getTop()){
9. //超出上边界
10. dragPosition = 0;
11. }else if(y>getChildAt(getChildCount()-1).getBottom()||(y>getChildAt(getChildCount()-1).getTop()&&x>getChildAt(getChildCount()-1).getRight())){
12. //超出下边界
13. dragPosition = getAdapter().getCount()-1;
14. }
15. //数据交换
16. if(dragPosition!=dragSrcPosition&&dragPosition>-1&&dragPosition<getAdapter().getCount()){
17. DragGridAdapter adapter = (DragGridAdapter)getAdapter();
18. String dragItem = adapter.getItem(dragSrcPosition);
19. adapter.remove(dragItem);
20. adapter.insert(dragItem, dragPosition);
21. Toast.makeText(getContext(), adapter.getList().toString(), Toast.LENGTH_SHORT).show();
22. }
23. }

复制代码

这篇文章也算是前面文章的一个补充和扩展。