您的位置：首页 > 移动开发

App列表之拖拽ListView(上)

2011-10-12 17:26 211 查看
研究了很久的拖拽ListView的实现，受益良多，特此与尔共飨。
鉴于这部分内容网上的资料少而简陋，而具体的实现过程或许对大家才有帮助，为了详尽而不失真，我们一步一步分析，分成两篇文章。

一、准备。

1.需求问题
初步：实现列表的拖拽效果(可参考Android源码下packages/apps/Music中的播放列表TouchInterceptor.java源码)。
(提前说明一下，本文不是完全按照Music中实现的，代码实现方式做了一些调整，去掉来很多无关的东西，方便大家理解，效果上也修改成了另外一种个人认为是更简单更高效的一套。)
拓展：借鉴上一篇文章Android学习系列(9)--App列表之分组ListView，实现分组列表的拖拽效果。
下面以初步实现为例子，逐步展开实现步骤。

2.搭建主界面DragListActivity.java和主布局drag_list_activity.xml。

01
public
class
DragListActivity
extends
Activity{
02
03
//数据列表
04
private
List<String>list=
null
;
05
06
//数据适配器
07
private
DragListAdapteradapter=
null
;
08
09
//存放分组标签
10
public
static
List<String>groupKey=
new
ArrayList<String>();
11
//分组一
12
private
List<String>navList=
new
ArrayList<String>();
13
//分组二
14
private
List<String>moreList=
new
ArrayList<String>();
15
16
@Override
17
public
void
onCreate(BundlesavedInstanceState){
18
super
.onCreate(savedInstanceState);
19
setContentView(R.layout.drag_list_activity);
20
21
//初始化样本数据
22
initData();
23
24
//后面会介绍DragListView
25
DragListViewdragListView=(DragListView)findViewById(R.id.drag_list);
26
adapter=
new
DragListAdapter(
this
,list);
27
dragListView.setAdapter(adapter);
28
}
29
}
3.列表项的布局drag_list_item.xml。

01
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
02
<!--强调一点，使用相对布局-->
03
<
RelativeLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
04
android:layout_width
=
"fill_parent"
05
android:layout_height
=
"wrap_content"
>
06
<
TextView
07
android:id
=
"@+id/drag_list_item_text"
08
android:layout_width
=
"wrap_content"
09
android:layout_height
=
"@dimen/drag_item_normal_height"
10
android:paddingLeft
=
"5dip"
11
android:layout_alignParentLeft
=
"true"
12
android:layout_centerVertical
=
"true"
13
android:gravity
=
"center_vertical"
/>
14
<
ImageView
android:id
=
"@+id/drag_list_item_image"
15
android:src
=
"@drawable/list_icon"
16
android:layout_alignParentRight
=
"true"
17
android:layout_centerVertical
=
"true"
18
android:layout_width
=
"wrap_content"
19
android:layout_height
=
"@dimen/drag_item_normal_height"
/>
20
</
RelativeLayout
>
4.准备样本数据。
我已经准备好了两组数据，在前面提到的initData()方法中执行初始化。

01
public
void
initData(){
02
//数据结果
03
list=
new
ArrayList<String>();
04
05
//groupKey存放的是分组标签
06
groupKey.add(
"A组"
);
07
groupKey.add(
"B组"
);
08
09
for
(
int
i=
0
;i<
5
;i++){
10
navList.add(
"A选项"
+i);
11
}
12
list.add(
"A组"
);
13
list.addAll(navList);
14
15
for
(
int
i=
0
;i<
8
;i++){
16
moreList.add(
"B选项"
+i);
17
}
18
list.add(
"B组"
);
19
list.addAll(moreList);
20
}
这里定义了分组标签集合groupKey后面分组的时候会用到。

5.自定义适配器类DragListAdapter。
接着我们搭建数据适配器，负责把list的数据填充到ListView中。

01
public
static
class
DragListAdapter
extends
ArrayAdapter<String>{
02
public
DragListAdapter(Contextcontext,List<String>objects){
03
super
(context,
0
,objects);
04
}
05
@Override
06
public
ViewgetView(
int
position,ViewconvertView,ViewGroupparent){
07
Viewview=convertView;
08
if
(view==
null
){
09
//加载列表项模板
10
view=LayoutInflater.from(getContext()).inflate(R.layout.drag_list_item,
null
);
11
}
12
TextViewtextView=(TextView)view.findViewById(R.id.drag_list_item_text);
13
textView.setText(getItem(position));
14
return
view;
15
}
16
}
注意getItem(position)会取得数组适配器中position位置的T（这里是字符串），比较好用的一个方法。

至此，我们准备了一个正常的数据列表，效果如下：



二、实现

上面部分是我们的一个准备工作，接下来我们通过自定义ListView，重写ListView中onInterceptTouchEvent(),onTouchEvent()方法来响应触控事件做相应的界面调整(选中，拖动，数据更改后刷新界面)等等。

6.自定义视图类。

01
//自定义ListView，准备改造成自己想要的ListView
02
//这样的好处是我们不仅可以直接使用ListView很多现成的稳定的方法，而且可以重写方法改写ListView的行为（利用的是java面向对象的继承特性，本人喜欢在任何代码中分析面向对象的特性、原则和模式）
03
public
class
DragListView
extends
ListView{
04
05
private
int
scaledTouchSlop;
//判断滑动的一个距离,scroll的时候会用到
06
public
DragListView(Contextcontext,AttributeSetattrs){
07
super
(context,attrs);
08
scaledTouchSlop=ViewConfiguration.get(context).getScaledTouchSlop();
09
}
10
11
}
7.重写触控拦截事件方法onInterceptTouchEvent()。
为了能在子控件响应触摸事件的情况下此ListView也能监听到触摸事件，我们把重写这个方法，做一些初始化工作。我们在这里捕获down事件，在down事件中，我们做一些拖动的准备工作：
1）获取点击数据项，初始化一些变量；
2）判断是否是拖动还是仅仅点击；
3）如果是拖动，建立拖动影像；
这些工作是我们后面拖动的一个执行基础，非常重要。

01
//下面定义要使用的所有变量
02
private
ImageViewdragImageView;
//被拖拽项的影像，其实就是一个ImageView
03
private
int
dragSrcPosition;
//手指拖动项原始在列表中的位置
04
private
int
dragPosition;
//手指拖动的时候，当前拖动项在列表中的位置
05
06
private
int
dragPoint;
//在当前数据项中的位置
07
private
int
dragOffset;
//当前视图和屏幕的距离(这里只使用了y方向上)
08
09
private
WindowManagerwindowManager;
//windows窗口控制类
10
private
WindowManager.LayoutParamswindowParams;
//用于控制拖拽项的显示的参数
11
12
private
int
scaledTouchSlop;
//判断滑动的一个距离
13
private
int
upScrollBounce;
//拖动的时候，开始向上滚动的边界
14
private
int
downScrollBounce;
//拖动的时候，开始向下滚动的边界
15
16
@Override
17
public
boolean
onInterceptTouchEvent(MotionEventev){
18
//捕获down事件
19
if
(ev.getAction()==MotionEvent.ACTION_DOWN){
20
int
x=(
int
)ev.getX();
21
int
y=(
int
)ev.getY();
22
23
//选中的数据项位置，使用ListView自带的pointToPosition(x,y)方法
24
dragSrcPosition=dragPosition=pointToPosition(x,y);
25
//如果是无效位置(超出边界，分割线等位置)，返回
26
if
(dragPosition==AdapterView.INVALID_POSITION){
27
return
super
.onInterceptTouchEvent(ev);
28
}
29
30
//获取选中项View
31
//getChildAt(intposition)显示display在界面的position位置的View
32
//getFirstVisiblePosition()返回第一个display在界面的view在adapter的位置position，可能是0，也可能是4
33
ViewGroupitemView=(ViewGroup)getChildAt(dragPosition-getFirstVisiblePosition());
34
35
//dragPoint点击位置在点击View内的相对位置
36
//dragOffset屏幕位置和当前ListView位置的偏移量，这里只用到y坐标上的值
37
//这两个参数用于后面拖动的开始位置和移动位置的计算
38
dragPoint=y-itemView.getTop();
39
dragOffset=(
int
)(ev.getRawY()-y);
40
41
//获取右边的拖动图标，这个对后面分组拖拽有妙用
42
Viewdragger=itemView.findViewById(R.id.drag_list_item_image);
43
//如果在右边位置（拖拽图片左边的20px的右边区域）
44
if
(dragger!=
null
&&x>dragger.getLeft()-
20
){
45
//准备拖动
46
//初始化拖动时滚动变量
47
//scaledTouchSlop定义了拖动的偏差位(一般+-10)
48
//upScrollBounce当在屏幕的上部(上面1/3区域)或者更上的区域，执行拖动的边界，downScrollBounce同理定义
49
upScrollBounce=Math.min(y-scaledTouchSlop,getHeight()/
3
);
50
downScrollBounce=Math.max(y+scaledTouchSlop,getHeight()*
2
/
3
);
51
52
//设置Drawingcache为true，获得选中项的影像bm，就是后面我们拖动的哪个头像
53
itemView.setDrawingCacheEnabled(
true
);
54
Bitmapbm=Bitmap.createBitmap(itemView.getDrawingCache());
55
56
//准备拖动影像(把影像加入到当前窗口，并没有拖动，拖动操作我们放在onTouchEvent()的move中执行)
57
startDrag(bm,y);
58
}
59
return
false
;
60
}
61
return
super
.onInterceptTouchEvent(ev);
62
}
看到上面的一大堆变量和操作，你可能有些眼花缭乱，在后面使用的时候回头再去理解也可。
开始拖动影像startDrag()方法：

01
/**
02
*准备拖动，初始化拖动项的图像
03
*@parambm
04
*@paramy
05
*/
06
public
void
startDrag(Bitmapbm,
int
y){
07
//释放影像，在准备影像的时候，防止影像没释放，每次都执行一下
08
stopDrag();
09
10
windowParams=
new
WindowManager.LayoutParams();
11
//从上到下计算y方向上的相对位置，
12
windowParams.gravity=Gravity.TOP;
13
windowParams.x=
0
;
14
windowParams.y=y-dragPoint+dragOffset;
15
windowParams.width=WindowManager.LayoutParams.WRAP_CONTENT;
16
windowParams.height=WindowManager.LayoutParams.WRAP_CONTENT;
17
//下面这些参数能够帮助准确定位到选中项点击位置，照抄即可
18
windowParams.flags=WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
19
|WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
20
|WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
21
|WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN;
22
windowParams.format=PixelFormat.TRANSLUCENT;
23
windowParams.windowAnimations=
0
;
24
25
//把影像ImagView添加到当前视图中
26
ImageViewimageView=
new
ImageView(getContext());
27
imageView.setImageBitmap(bm);
28
windowManager=(WindowManager)getContext().getSystemService(
"window"
);
29
windowManager.addView(imageView,windowParams);
30
//把影像ImageView引用到变量drawImageView，用于后续操作(拖动，释放等等)
31
dragImageView=imageView;
32
}
stopDrag()方法如下：

1
/**
2
*停止拖动，去除拖动项的头像
3
*/
4
public
void
stopDrag(){
5
if
(dragImageView!=
null
){
6
windowManager.removeView(dragImageView);
7
dragImageView=
null
;
8
}
9
}
运行看看，我们点击一项的时候没有什么反应，但是细心观察的话，其实点击项上有一层淡淡的重影，这就是我们定义的点击项的影像，后面要做的就是拖动这个影像，放下影像以及放下位置的数据项插入和原数据项位置的删除，这部分内容以及后续扩展的内容我们放到下篇中继续分析并实现。
未完待续...
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航