Android 在你的app实现拖放

1. Android 拖放（Drag And Drop)

1.1 在Android实现拖放

随着 Android 4.0的到来View 或ViewGroup已经可以实现拖放功能

1.2 允许view 被 拖曳

要使用 拖曳 view 你需要 注册一个 OnTouchListener 或者 LongClickListener 在将要被拖动的View上。

通过View的startDrag方法实现拖曳操作。在这个方法中，你也需要定义需方 是hi线放置目标 的数据 通过ClipData实现传递

你也需要在往startDrag里放入DragShadowBuilder的实例对象。 这个对象定义了用来实现拖曳的图片。比如你可以直接放入一个View, 那会显示这个View被拖曳的操作

如下例子 是拖曳的设置:

// Assign the touch listener to your view which you want to move
findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener());

// This defines your touch listener
private final class MyTouchListener implements OnTouchListener {
public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
ClipData data = ClipData.newPlainText("", "");
DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
view.startDrag(data, shadowBuilder, view, 0);
view.setVisibility(View.INVISIBLE);
return true;
} else {
return false;
}
}
}

1.3. 定义 放置(drop) 目标

这个 可以实现放置 views 有一个OnDragListener 的实例。 在这个 放置的监听中你能收到 预先定义的拖放的相关事件的回调。

DragEvent.ACTION_DRAG_STARTED

DragEvent.ACTION_DRAG_ENTERED

DragEvent.ACTION_DRAG_EXITED

DragEvent.ACTION_DROP

DragEvent.ACTION_DRAG_ENDED

一个注册了OnDragListener 的 View 可以作为放置区域，通过setOnDragListener注册

findViewById(R.id.bottomright).setOnDragListener(new MyDragListener());

class MyDragListener implements OnDragListener {
Drawable enterShape = getResources().getDrawable(R.drawable.shape_droptarget);
Drawable normalShape = getResources().getDrawable(R.drawable.shape);

@Override
public boolean onDrag(View v, DragEvent event) {
int action = event.getAction();
switch (event.getAction()) {
case DragEvent.ACTION_DRAG_STARTED:
// do nothing
break;
case DragEvent.ACTION_DRAG_ENTERED:
v.setBackgroundDrawable(enterShape);
break;
case DragEvent.ACTION_DRAG_EXITED:
v.setBackgroundDrawable(normalShape);
break;
case DragEvent.ACTION_DROP:
// Dropped, reassign View to ViewGroup
View view = (View) event.getLocalState();
ViewGroup owner = (ViewGroup) view.getParent();
owner.removeView(view);
LinearLayout container = (LinearLayout) v;
container.addView(view);
view.setVisibility(View.VISIBLE);
break;
case DragEvent.ACTION_DRAG_ENDED:
v.setBackgroundDrawable(normalShape);
default:
break;
}
return true;
}
}

2.练习:拖放

2.1 目标练习

在这个练习里，你创建若干ViewGroups能实现里面的Views相互拖放。

2.2.创建项目

创建一个com.vogella.android.draganddrop 项目
activity命名为DragActivity

2.3 创建XML Drawable

在这个练习里你会用到 XML DRAWABLE

这部分你在res/drawable里创建xml drawable

创建shape.xml如下

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<stroke
android:width="2dp"
android:color="#FFFFFFFF" />

<gradient
android:angle="225"
android:endColor="#DD2ECCFA"
android:startColor="#DD000000" />

<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />

</shape>

创建shpae_droptager.xml如下

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<stroke
android:width="2dp"
android:color="#FFFF0000" />

<gradient
android:angle="225"
android:endColor="#DD2ECCFA"
android:startColor="#DD000000" />

<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />

</shape>

2.4. Activity和layout

改变对应的layout文件如下

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:columnWidth="320dp"
android:orientation="vertical"
android:rowCount="2"
android:stretchMode="columnWidth" >

<LinearLayout
android:id="@+id/topleft"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_row="0"
android:background="@drawable/shape" >

<ImageView
android:id="@+id/myimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
android:id="@+id/topright"
android:layout_width="160dp"
android:layout_height="160dp"
android:background="@drawable/shape" >

<ImageView
android:id="@+id/myimage2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
android:id="@+id/bottomleft"
android:layout_width="160dp"
android:layout_height="160dp"
android:background="@drawable/shape" >

<ImageView
android:id="@+id/myimage3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
android:id="@+id/bottomright"
android:layout_width="160dp"
android:layout_height="160dp"
android:background="@drawable/shape" >

<ImageView
android:id="@+id/myimage4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>

</GridLayout>

改变activity代码如下

package com.vogella.android.draganddrop;

import android.app.Activity;
import android.content.ClipData;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.DragEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.DragShadowBuilder;
import android.view.View.OnDragListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;

public class DragActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener());
findViewById(R.id.myimage2).setOnTouchListener(new MyTouchListener());
findViewById(R.id.myimage3).setOnTouchListener(new MyTouchListener());
findViewById(R.id.myimage4).setOnTouchListener(new MyTouchListener());
findViewById(R.id.topleft).setOnDragListener(new MyDragListener());
findViewById(R.id.topright).setOnDragListener(new MyDragListener());
findViewById(R.id.bottomleft).setOnDragListener(new MyDragListener());
findViewById(R.id.bottomright).setOnDragListener(new MyDragListener());

}

private final class MyTouchListener implements OnTouchListener {
public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
ClipData data = ClipData.newPlainText("", "");
DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
view.startDrag(data, shadowBuilder, view, 0);
view.setVisibility(View.INVISIBLE);
return true;
} else {
return false;
}
}
}

class MyDragListener implements OnDragListener {
Drawable enterShape = getResources().getDrawable(R.drawable.shape_droptarget);
Drawable normalShape = getResources().getDrawable(R.drawable.shape);

@Override
public boolean onDrag(View v, DragEvent event) {
int action = event.getAction();
switch (event.getAction()) {
case DragEvent.ACTION_DRAG_STARTED:
// do nothing
break;
case DragEvent.ACTION_DRAG_ENTERED:
v.setBackgroundDrawable(enterShape);
break;
case DragEvent.ACTION_DRAG_EXITED:
v.setBackgroundDrawable(normalShape);
break;
case DragEvent.ACTION_DROP:
// Dropped, reassign View to ViewGroup
View view = (View) event.getLocalState();
ViewGroup owner = (ViewGroup) view.getParent();
owner.removeView(view);
LinearLayout container = (LinearLayout) v;
container.addView(view);
view.setVisibility(View.VISIBLE);
break;
case DragEvent.ACTION_DRAG_ENDED:
v.setBackgroundDrawable(normalShape);
default:
break;
}
return true;
}
}
}

如果你开启开启这个activity你将可以拖动Imageview到另外一个容器里面