Android客户端的图形化拖放操作的设计实现
为什么要拖放?
拖放在某些UI交互中可以简化用户操作。
拖放的步骤包括哪些?
“Drag and Drop”,拖放,顾名思义,总共就分三步:
1, 开始拖起来;
2, 正在拖;
3, 放下,进行操作;
在这三步里,贯穿的是数据的传输,从拖的地方传输到放的地方。
现在,我们就以一个简单的拖放删除笔记的App来讲解上面三个步骤都怎么实现的。
App见截图,拽住上面的笔记,然后拖至底下的垃圾桶然后放开,笔记就被删除了。
1,开始拖拽:
开始拖拽要解决三个问题:
1, 什么时候开始?如何开始?
一般是在用户长按一个组件的时候,我们开始拖拽,所以给要被拖拽的View定义它的OnLongClickListener,在其中调用View.startDrag()方法就可以了。
startDrag()方法的定义:
1 2 |
boolean android.view.View.startDrag(
ClipData data, DragShadowBuilder shadowBuilder, Object myLocalState, int flags)
|
第一个参数ClipData data是拖拽的对象,下面第2条来讲解;第二个参数DragShadowBuilder shadowBuilder是拖拽时的样子,下面的第3条来讲解。
2, ClipData:拖拽的数据实现?
数据定义通过ClipData和ClipData.Item来定义,看一下它们的定义:
1 2 3 4 5 6 7 8 9 |
/**
* Added in API level 11
* Create a new clip.
* Parameters
* label Label to show to the user describing this clip.
* mimeTypes An array of MIME types this data is available as.
* item The contents of the first item in the clip.
*/
public ClipData (CharSequence label, String[] mimeTypes, ClipData.Item item)
|
由此可见,构造一个ClipData对象,作为拖拽的数据对象,它的构造需要三个参数:
1,label 给一个标签;
2,mimeTypes
3,一个ClipData.Item对象
再来看ClipData.Item的定义:
1 2 3 4 5 6 7 8 9 10 11 12 |
/**
* The types than an individual item can currently contain are:
* Text: a basic string of text. This is actually a CharSequence, so it can be formatted text supported
* by corresponding Android built-in style spans. (Custom application spans are not supported and will be
* stripped when transporting through the clipboard.)
* Intent: an arbitrary Intent object. A typical use is the shortcut to create when pasting a clipped item
* on to the home screen.
* Uri: a URI reference. This may be any URI (such as an http: URI representing a bookmark),
* however it is often a content: URI. Using content provider references as clips like this allows
* an application to share complex or large clips through the standard content provider facilities.
*/
android.content.ClipData.Item
|
ClipData.item有三类构造方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/**
* Create an Item consisting of a single block of (possibly styled) text.
*/
public Item(CharSequence text) {
}
/**
* Create an Item consisting of a single block of (possibly styled) text,
* with an alternative HTML formatted representation. You must
* supply a plain text representation in addition to HTML text; coercion
* will not be done from HTML formated text into plain text.
*/
public Item(CharSequence text, String htmlText) {
}
/**
* Create an Item consisting of an arbitrary Intent.
*/
public Item(Intent intent) {
}
/**
* Create an Item consisting of an arbitrary URI.
*/
public Item(Uri uri) {
}
|
就是分别可以用Text, Intent和Uri来构造。
3, DragShadowBuilder: 拖拽时的样子:
DragShadowBuilder可以用来定义拖拽时的样子,可以直接用其构造方法DragShadowBuilder(View view)来传递一个View做为样子,也可以自己扩展DragShadowBuilder类。
看一下DragShadowBuilder(View view)的构造方法说明:
1 2 3 4 5 6 7 8 9 |
/**
* Added in API level 11
* Constructs a shadow image builder based on a View. By default, the resulting drag shadow will have the same appearance and
* dimensions as the View, with the touch point over the center of the View.
* Parameters
* view A View. Any View in scope can be used.
*/
public View.DragShadowBuilder (View view)
|
OK,拖拽的第一阶段:开始拖拽就讲完了,看一下完整代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//给要被拖拽的View mNote_1添加长按事件
mNote_1.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
//在我的代码实现中,给mNote_1设置了一个Text作为其Tag,这里取出来用来构造Item
ClipData.Item item = new ClipData.Item((CharSequence)v.getTag());
String[] mimeTypes = {ClipDescription.MIMETYPE_TEXT_PLAIN};
//构造一个drag data
ClipData dragData = new ClipData(v.getTag().toString(), mimeTypes, item);
//构造一个shadow
View.DragShadowBuilder myShadow = new DragShadowBuilder(mNote_1);
//发起拖拽
v.startDrag(dragData, myShadow, null, 0);
return true;
}
});
|
2,正在拖拽
只要给View添加一个OnDragListener,就可以得到整个拖拽过程中的所有回调事件。
OnDragListener的方法onDrag定义如下:
1 2 3 4 5 6 7 8 9 10 |
/**
* Added in API level 11
* Called when a drag event is dispatched to a view. This allows listeners to get a chance to override base View behavior.
* Parameters
* v The View that received the drag event.
* event The DragEvent object for the drag event.
* Returns
* true if the drag event was handled successfully, or false if the drag event was not handled. Note that false will trigger the View to call its onDragEvent() handler.
*/
public abstract boolean onDrag (View v, DragEvent event)
|
DragEvent定义了所有拖拽中的事件:
ACTION_DRAG_STARTED
只在应用程序调用startDrag()方法,并且获得了拖拽影子后,View对象的拖拽事件监听器才接收这种事件操作。
ACTION_DRAG_ENTERED
当拖拽影子刚进入View对象的边框时,View对象的拖拽事件监听器会接收这种事件操作类型。
ACTION_DRAG_LOCATION
在View对象收到一个ACTION_DRAG_ENTERED事件之后,并且拖拽影子依然还在这个对象的边框之内时,这个View对象的拖拽事件监听器会接收这种事件操作类型
ACTION_DRAG_EXITED
View对象收到一个ACTION_DRAG_ENTERED和至少一个ACTION_DRAG_LOCATION事件之后,这个对象的事件监听器会接受这种操作类型。
ACTION_DROP
当用户在一个View对象之上释放了拖拽影子,这个对象的拖拽事件监听器就会收到这种操作类型。如果这个监听器在响应ACTION_DRAG_STARTED拖拽事件中返回了true,那么这种操作类型只会发送给一个View对象。如果用户在没有被注册监听器的View对象上释放了拖拽影子,或者用户没有在当前布局的任何部分释放操作影子,这个操作类型就不会被发送。如果View对象成功的处理放下事件,监听器要返回true,否则应该返回false。
ACTION_DRAG_ENDED
当系统结束拖拽操作时,View对象拖拽监听器会接收这种事件操作类型。这种操作类型之前不一定是ACTION_DROP事件。如果系统发送了一个ACTION_DROP事件,那么接收ACTION_DRAG_ENDED操作类型不意味着放下操作成功了。监听器必须调用getResult()方法来获得响应ACTION_DROP事件中的返回值。如果ACTION_DROP事件没有被发送,那么getResult()会返回false。
3,放下的操作
放下就是响应上面说的ACTION_DRAG_ENDED事件。在具体应用中,要明确我们是在哪里放下才采取动作。本文的例子中,就是把作为笔记的TextView拖拽到一个垃圾桶标志的ImageView上放下时,采取删除该TextView的操作。
只要给垃圾桶ImageView添加OnDragListener并且监听到ACTION_DRAG_ENDED事件时采取操作就行了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
trashView.setOnDragListener( new OnDragListener(){
@Override
public boolean onDrag(View v, DragEvent event){
switch(event.getAction())
{
case DragEvent.ACTION_DROP:
Log.d("trash view", "ACTION_DROP event");
ClipData data = event.getClipData();
CharSequence noteName = data.getItemAt(0).getText();
if(noteName.equals(TAG_NOTE_1)) {
mNote_1.setVisibility(View.GONE);
Toast.makeText(MainActivity.this, "Note 1 has been removed.", Toast.LENGTH_SHORT).show();
} else if(noteName.equals(TAG_NOTE_2)) {
Toast.makeText(MainActivity.this, "Note 2 has been removed.", Toast.LENGTH_SHORT).show();
mNote_2.setVisibility(View.GONE);
}
break;
default:
break;
}
return true;
}
});
|