16.创建拖放视图

16.1 问题

应用程序的UI需要允许用户将一些视图在屏幕上进行拖动，而且可以将它们放置到其他视图的上面。

16.2 解决方案

（API Level 11）
使用框架中可用的拖放API。View类包含了对管理屏幕上的所有拖动事件的改进，而onDragListener接口则可以关联到任何拖动事件发生时需要得到通知的View。要想开始拖动事件，只需要在希望用户开始拖动的视图上简单地调用startDrag()方法即可。这个方法需要一个DragShadowBuilder实例，它用来构建视图中拖动部分的外观。另外还有两个参数将会传递给放置时的目标和监听器。
在所有传递的参数中首先是一个ClipData对象，用来传递文本或Uri实例。它在传递文件路径或查询ContentProvider的场景下非常有用。第二个参数是一个对象，表示拖动事件的“本地状态”。这个参数可以为任何对象，它是一个轻量级的实例，用来对拖动进行一些应用程序相关的描述。ClipData只会用于拖动视图放下事件的监听器，而本地状态对于所有的监听器都是可访问的（任何时刻调用DragEvent的getLocalState()方法即可）。
在拖放过程中发生的每个特定事件都会调用onDragListener.onDrag()方法，同时传回一个描述每个事件特征的DragEvent。每个DragEvent都具有 以下动作中的一个：

• ACTION_DRAG_STARTED ：当调用startDrag()以开始一个新的拖动事件时会向所有视图发送该动作。
  位置信息可以通过getX()和getY() 。
• ACTION_DRAG_ENTERED :
• ACTION_DRAG_EXITED :
• ACTION_DRAG_LOCATION :
• ACTION_DRAG_DROP ：
• ACTION_DRAG_ENED :

这个方法和自定义触摸事件的工作方式类似，即监听器返回的值决定了后续的事件传递。如果某个特殊的OnDragListener并没有对ACTION_DRAG_STARTED动作返回true，那么除了ACTION_DRAG_ENDED以外，它将不会收到拖动过程中任何后续的事件。

16.3 实现机制

让我们看一个拖放功能的实现，首先是采用以下代码清单。这里我们创建了一个自定义的ImageView，它实现了onDragListener接口。

自定义视图实现了OnDragListener

public class DropTargetView extends ImageView implements OnDragListener {

    private boolean mDropped;

    public DropTargetView(Context context) {
        super(context);
        init();
    }

    public DropTargetView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public DropTargetView(Context context, AttributeSet attrs, int defaultStyle) {
        super(context, attrs, defaultStyle);
        init();
    }

    private void init() {
        //我们必须设置一个有效的监听器来接收DragEvent
        setOnDragListener(this);
    }

    @Override
    public boolean onDrag(android.view.View v, DragEvent event) {
        PropertyValuesHolder pvhX, pvhY;
        switch (event.getAction()) {
        case DragEvent.ACTION_DRAG_STARTED:
            //React to a new drag by shrinking the view
            pvhX = PropertyValuesHolder.ofFloat("scaleX", 0.5f);
            pvhY = PropertyValuesHolder.ofFloat("scaleY", 0.5f);
            ObjectAnimator.ofPropertyValuesHolder(this, pvhX, pvhY).start();
            //Clear the current drop image on a new event
            setImageDrawable(null);
            mDropped = false;
            break;
        case DragEvent.ACTION_DRAG_ENDED:
            // React to a drag ending by resetting the view size
            // if we weren't the drop target.
            if (!mDropped) {
                pvhX = PropertyValuesHolder.ofFloat("scaleX", 1f);
                pvhY = PropertyValuesHolder.ofFloat("scaleY", 1f);
                ObjectAnimator.ofPropertyValuesHolder(this, pvhX, pvhY).start();
                mDropped = false;
            }
            break;
        case DragEvent.ACTION_DRAG_ENTERED:
            //React to a drag entering this view by growing slightly
            pvhX = PropertyValuesHolder.ofFloat("scaleX", 0.75f);
            pvhY = PropertyValuesHolder.ofFloat("scaleY", 0.75f);
            ObjectAnimator.ofPropertyValuesHolder(this, pvhX, pvhY).start();
            break;
        case DragEvent.ACTION_DRAG_EXITED:
            //React to a drag leaving this view by returning to previous size
            pvhX = PropertyValuesHolder.ofFloat("scaleX", 0.5f);
            pvhY = PropertyValuesHolder.ofFloat("scaleY", 0.5f);
            ObjectAnimator.ofPropertyValuesHolder(this, pvhX, pvhY).start();
            break;
        case DragEvent.ACTION_DROP:
            // React to a drop event with a short animation keyframe animation
            // and setting this view's image to the drawable passed along with
            // the drag event
            
            // This animation shrinks the view briefly down to nothing
            // and then back.
            Keyframe frame0 = Keyframe.ofFloat(0f, 0.75f);
            Keyframe frame1 = Keyframe.ofFloat(0.5f, 0f);
            Keyframe frame2 = Keyframe.ofFloat(1f, 0.75f);
            pvhX = PropertyValuesHolder.ofKeyframe("scaleX", frame0, frame1,
                    frame2);
            pvhY = PropertyValuesHolder.ofKeyframe("scaleY", frame0, frame1,
                    frame2);
            ObjectAnimator.ofPropertyValuesHolder(this, pvhX, pvhY).start();
            //Set our image from the Object passed with the DragEvent
            setImageDrawable((Drawable) event.getLocalState());
            //We set the dropped flag to the ENDED animation will not also run
            mDropped = true;
            break;
        default:
            //Ignore events we aren't interested in
            return false;
        }
        //Declare interest in all events we have noted
        return true;
    }
}

这个Image View用来监控新产生的拖动事件并自己运行相应的动画。每次新的拖动行为出现时，ACTION_DRAG_STARTED事件就会被发送到这里，这个ImageView就会自己缩小50%。这对用户是一个非常好的引导，可以告诉用户他们刚刚选择的视图可以拖动到哪里。这里我们还确保这个监听器会对此事件返回true，这样就可以接收拖动过程中的其他事件了。
如果用户将他们的视图拖动到这个ImageView上，这就会ACTION_DRAG_ENTERED，这时ImageView会稍微放大一下，表示该ImageView可以接收的视图放置行为。当视图被拖离时会触发ACTION_DRAG_EXITED事件，这时ImageView会恢复到刚进入“拖放模式”时的大小。如果用户在该ImageView的上方松手，会触发ACTION_DROP事件，同时会进行一段特殊的动画表示放置动作已经收到。这时我们会读取事件中的本地状态变量，如果是一个Drawable，就把它设置为ImageView的图片内容。
ACTION_DRAG_ENDED会通知该ImageView恢复到之前的大小，因为此时已经不再处于“拖动模式”了。但是，如果这个ImageView就是放置的目标，我们希望保持它的大小，因此这种情况下会忽略掉这个事件。
以下两段代码显示了一个示例Activity,该Activity允许用户长按一个图片，然后可以拖动该图片到我们自定义的放置目标上。
res/layout/main.xml

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

    <!-- 顶部一行是可拖放的条目 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <ImageView
            android:id="@+id/image1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_send" />
        <ImageView
            android:id="@+id/image2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_share" />
        <ImageView
            android:id="@+id/image3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_favorite" />
    </LinearLayout>
    
    <!-- 底部一行是可放置的目标 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >
        <com.examples.dragtouch.DropTargetView
            android:id="@+id/drag_target1"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="#A00" />
        <com.examples.dragtouch.DropTargetView
            android:id="@+id/drag_target2"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="#0A0" />
        <com.examples.dragtouch.DropTargetView
            android:id="@+id/drag_target3"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="#00A" />
    </LinearLayout>
</RelativeLayout>

转发触摸事件的Activity

public class DragTouchActivity extends Activity implements OnLongClickListener {
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //为每个ImageView关联长按监听器
        findViewById(R.id.image1).setOnLongClickListener(this);
        findViewById(R.id.image2).setOnLongClickListener(this);
        findViewById(R.id.image3).setOnLongClickListener(this);
    }

	@Override
	public boolean onLongClick(View v) {
		DragShadowBuilder shadowBuilder = new DragShadowBuilder(v);
            //开始拖动，将View的图片作为本地状态传递出去
	    v.startDrag(null, shadowBuilder, ((ImageView) v).getDrawable(), 0);    
		return true;
	}
}

这个示例会在屏幕的顶部显示一行三张图片，同时在屏幕的底部显示三个我们自定义的目标视图。为每张图片都设置了一个长按事件监听器，长按动作会通过startDrag()触发一个新的拖动事件。拖动事件初始化时传入的DragShadowBuilder,但本节中视图在拖动时会创建一个透明的副本并显示在触摸点的正下方。
我们还通过getDrawable()得到了用户选择的视图的图片内容并把它作为拖动的本地状态传递出去，自定义的放置目标会使用它来设置图片。这样就会产生视图已经放置到目标上的效果。参见下图，查看加载时的效果、拖动操作过程时的效果以及图片被放置到某个放置目标后的效果。

自定义DragShadowBuilder

DragShadowBuilder的默认实现非常方便。但有可能并不是应用程序需要的。让我们看一下以下代码，它实现了自定义的DragShadowBuilder。
自定义DragShadowBuilder

public class DrawableDragShadowBuilder extends DragShadowBuilder {
    private Drawable mDrawable;

    public DrawableDragShadowBuilder(View view, Drawable drawable) {
        super(view);
        // 设置Drawable并使用一个绿色的过滤器
        mDrawable = drawable;
        mDrawable.setColorFilter(new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.MULTIPLY));
    }
    
    @Override
    public void onProvideShadowMetrics(Point shadowSize, Point touchPoint) {
        // 填充大小
        shadowSize.x = mDrawable.getIntrinsicWidth();
        shadowSize.y = mDrawable.getIntrinsicHeight();
        // 设置阴影相对于触摸点的位置
        // 这里阴影位于手指下方的中心
        touchPoint.x = mDrawable.getIntrinsicWidth() / 2;
        touchPoint.y = mDrawable.getIntrinsicHeight() / 2;

        mDrawable.setBounds(new Rect(0, 0, shadowSize.x, shadowSize.y));
    }

    @Override
    public void onDrawShadow(Canvas canvas) {
        //在提供的 Canvas上绘制阴影视图
        mDrawable.draw(canvas);
    }
}

此自定义实现会使用一个单独的Drawable参数，阴影的显示会使用该图片而不是使用源视图的可见副本。另外，我们还对该图片使用了绿色的ColorFilter来增加一些效果。DragShadowBuilder是一个非常容易扩展的类，只需要有效地覆写两个主要的方法。
第一个方法是onProviderShadowMetrics(),它会在DragShadowBuilder初始化时调用一次并使用两个Point对象填充DragShadowBuilder的内容。首先会填充阴影使用的图片的大小，即会将期望的宽度设置为x值，将期望的高度设置为y值。本例中会将该大小设置为图片本来的宽度和高度。另外需要填充的阴影期望触摸的位置。这里会定义阴影图片相对于用户手指的位置，例如将x和y都设置为0时，手指会位于图片的左上角。在我们的示例中，我们设置到了图片的中心点，因此手指会位于图片中心上方。
第二个方法是onDrawShadow()，它会被重复调用以渲染阴影图片。这个方法中传入的Canvas是由框架根据onProviderShadowMetric()中包含的信息创建的。这里你可以像其他自定义视图一样进行各种自定义绘制。我们的示例只是简单地告诉Drawable在Canvas上绘制它自己。