多个Listview瀑布流效果

Author Avatar
Felix 4月 19, 2015

效果展示

原理解释

自定义MyLinearLayout，继承至LinearLayout，在布局文件中，将3个listview放置在MyLinearLayout中。
重写MyLinearLayout中的onInterceptTouchEvent方法，返回true，打断向listview传递的触摸事件。
重写onTouchEvent方法，根据触摸位置，将触摸事件通过调用子view的dispatchTouchEvent方法，传递给相应位置的listview。
listview接受到触摸事件后就可以自行处理相关的滑动逻辑。

代码实现

界面布局

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<jamffy.example.waterfalllistview.MyLinearLayout xmlns:android="http://	schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="jamffy.example.waterfalllistview.MainActivity" >
   <ListView
       android:id="@+id/lv1"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_margin="5dp"
       android:layout_weight="1"
       android:divider="@null"
       android:dividerHeight="5dp"
       android:scrollbars="none" >
   </ListView>
   <ListView
       android:id="@+id/lv2"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_margin="5dp"
       android:layout_weight="1"
       android:divider="@null"
       android:dividerHeight="5dp"
       android:scrollbars="none" >
   </ListView>
   <ListView
       android:id="@+id/lv3"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_margin="5dp"
       android:layout_weight="1"
       android:divider="@null"
       android:dividerHeight="5dp"
       android:scrollbars="none" >
   </ListView>
</jamffy.example.waterfalllistview.MyLinearLayout>

自定义控件

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
	/**
	 * @author tmac 如果不做处理MyLinearLayout中的子view能自行处理touch事件。
	 *         现在我希望当我在屏幕中间上方拖动时，整个屏幕的子view一起向上拖动，
	 *         这是就需要在满足条件时，中断该touch事件，交给MyLinearLayout这个父view来处理。
	 *         先中断所有子view的touch事件，然后根据触摸的位置，有父view把点击事件分发给相应的子view。
	 *         在分发之前需要给touch事件的对象event重新设置位置，因为子view的坐标系与父view是不同的。
	 */
	// 这个类专门为三个子listview服务。
	public class MyLinearLayout extends LinearLayout {
	public MyLinearLayout(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}
	public MyLinearLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}
	@Override
	// 返回true中断点击事件
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		// TODO Auto-generated method stub
		return true;
	}
	@Override
	// 用分发的方式决定哪个子view可以收到点击事件
	public boolean dispatchTouchEvent(MotionEvent ev) {
		// TODO Auto-generated method stub
		return super.dispatchTouchEvent(ev);
	}
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		int count = getChildCount();
		// 每个子view的宽度
		int width = getWidth() / count;
		int height = getHeight();
		// 当前触摸的位置
		int currX = (int) event.getX();
		int currY = (int) event.getY();
		// 判断位置
		if (currX < width) { // 处理最左边的逻辑
			// 在分发之前需要给touch事件的对象event重新设置位置，因为子view的坐标系与父view是不同的。
			event.setLocation(width / 2, currY);
			getChildAt(0).dispatchTouchEvent(event);
			return true;
		} else if (currX < 2 * width) { // 处理中间的逻辑
			if (currY > height / 2) { // 如果在下方，只移动中间的子view
				event.setLocation(width / 2, currY);
				getChildAt(1).dispatchTouchEvent(event);
				return true;
			} else {// 如果在上方，拖动三个view
				event.setLocation(width, currY);
			// 同时把touch事件分发给三个子view
				for(int i=0;i<count;i++){
					getChildAt(i).dispatchTouchEvent(event);
				}
				return true;
			}
		} else if (currX < 3 * width) { // 处理最右边的逻辑
			event.setLocation(width / 2, currY);
			getChildAt(2).dispatchTouchEvent(event);
			return true;
		}
		return true;
	}
}

完整代码

github

expand_less