Android联动ListView的实现

文章出自：　http://blog.csdn.net/qibin0506/article/details/42085711

今天带来的是两列并排ListView关联滑动，这里面有两个知识点：1、两个ListView如何并列显示。2、如何关联滑动。

第一个问题，好像我之前的博客提到过，就是让ListView的width有wrap_content的能力，可以参考我的另一篇博客《并排ListView——仿京东分类列表》。

今天的重点在第二个问题上，如何让两个ListView联动起来。

虽然，重点在第二个问题上，但是，任何事都得一步步的来，首先，我们要先让ListView的width有wrap_content的能力。

[java]  view plain copy

1. public class RelationListView extends ListView {  
2.     private RelationListView mListView;  
3.       
4.     public RelationListView(Context context, AttributeSet attrs) {  
5.         this(context, attrs, 0);  
6.     }  
7.   
8.     public RelationListView(Context context, AttributeSet attrs, int defStyle) {  
9.         super(context, attrs, defStyle);  
10.     }  
11.       
12.     @Override  
13.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
14.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
15.         int width = 0;  
16.         int height = getMeasuredHeight();  
17.           
18.         int widthMode = MeasureSpec.getMode(widthMeasureSpec);  
19.         int widthSize = MeasureSpec.getSize(widthMeasureSpec);  
20.           
21.         if(widthMode == MeasureSpec.EXACTLY) {  
22.             width = widthSize;  
23.         }else if(widthMode == MeasureSpec.AT_MOST) {  
24.             final int childCount = getChildCount();  
25.             for(int i=0;i<childCount;i++) {  
26.                 View item = getChildAt(i);  
27.                 measureChild(item, widthMeasureSpec, heightMeasureSpec);  
28.                 width = Math.max(width, item.getMeasuredWidth());  
29.             }  
30.         }  
31.         setMeasuredDimension(width, height);  
32.     }  
33. }  

可以看到，要让ListView的width有wrap_content的能力，主要是去重写ListView的onMeasure方法，这部分内容这里不多说了，可以去看我之前的那篇博客。可以看到，我们主要是改变了width的值，让width的值等于最宽的那个item的宽度。

继续往下走，如何让两个ListView关联，肯定是要保存另一个ListView的实例，才能去操作它，细心的朋友，可能看到在RelationListView中有一个成员变量：

[java]  view plain copy

1. private RelationListView mListView;  

怎么去设置它的值呢？ 当然是自定义一个方法了：

[java]  view plain copy

1. public void setRelatedListView(RelationListView listView) {  
2.     mListView = listView;  
3. }  

我们在外部通过调用该方法来声明，哪个ListView要与该ListView联动。

如何控制联动？ 首先我们要知道当前ListView滑动了，我选择了onTouchEvent， 这个方法有个参数MotionEvent 我们直接将这个参数传给要联动的那个ListView的onTouchEvent就ok，直接在onTouchEvent中传吗？ 当然不是，那样就造成死循环了。

来看代码：

[java]  view plain copy

1. public void onTouch(MotionEvent ev) {  
2.     super.onTouchEvent(ev);  
3. }  
4.       
5. @Override  
6. public boolean onTouchEvent(MotionEvent ev) {  
7.     if(null != mListView) {  
8.         mListView.onTouch(ev);  
9.     }  
10.           
11.     return super.onTouchEvent(ev);  
12. }  

我是定义了一个onTouch方法方法，然后在onTouchEvent中调用该方法。 有什么不一样吗？ 在onTouch中，我们直接调用父类的onTouchEvent而不是重写的那个onTouchEvent，这样就避免了死循环。

来使用一下吧， 布局文件：

[html]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:paddingBottom="@dimen/activity_vertical_margin"  
6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
7.     android:paddingRight="@dimen/activity_horizontal_margin"  
8.     android:paddingTop="@dimen/activity_vertical_margin"  
9.     android:orientation="horizontal"  
10.     tools:context=".MainActivity" >  
11.       
12.     <org.loader.relationlistview.RelationListView  
13.         android:id="@+id/listView1"  
14.         android:layout_width="wrap_content"  
15.         android:layout_height="wrap_content" />  
16.       
17.        
18.     <org.loader.relationlistview.RelationListView  
19.         android:id="@+id/listView2"  
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content" />  
22. </LinearLayout>  

没有联动的情况：

[java]  view plain copy

1. public class MainActivity extends Activity {  
2.     private RelationListView mListView1;  
3.     private RelationListView mListView2;  
4.       
5.     private String[] mData1 = new String[] { "listView1", "listView1",  
6.             "listView1", "listView1", "listView1", "listView1", "listView1",  
7.             "listView1", "listView1", "listView1", "listView1", "listView1",  
8.             "listView1", "listView1", "listView1", "listView1", "listView1",  
9.             "listView1", "listView1", "listView1", "listView1", "listView1",  
10.             "listView1", "listView1" };  
11.     private String[] mData2 = new String[] { "ListView2", "ListView2",  
12.             "ListView2", "ListView2", "ListView2", "ListView2", "ListView2",  
13.             "ListView2", "ListView2", "ListView2", "ListView2", "ListView2",  
14.             "ListView2", "ListView2", "ListView2", "ListView2", "ListView2",  
15.             "ListView2", "ListView2", "ListView2", "ListView2", "ListView2",  
16.             "ListView2", "ListView2", "ListView2", "ListView2" };  
17.       
18.     @Override  
19.     protected void onCreate(Bundle savedInstanceState) {  
20.         super.onCreate(savedInstanceState);  
21.         setContentView(R.layout.activity_main);  
22.           
23.         mListView1 = (RelationListView) findViewById(R.id.listView1);  
24.         mListView2 = (RelationListView) findViewById(R.id.listView2);  
25.           
26.         mListView1.setAdapter(new ArrayAdapter<String>(this,  
27.                 android.R.layout.simple_list_item_1, mData1));  
28.         mListView2.setAdapter(new ArrayAdapter<String>(this,  
29.                 android.R.layout.simple_list_item_1, mData2));  
30.     }  
31. }  

看看效果，是不是两列ListView了，第一个问题已经实现了。

再来看看单向联动，ok，添加一行代码：

[java]  view plain copy

1. mListView1.setRelatedListView(mListView2);  

是不是很爽？ 相信你已经知道双向联动该如何做了， 对，再添加一行代码：

[java]  view plain copy

1. mListView2.setRelatedListView(mListView1);  

这样就实现了ListView的双向联动。

最后是所有的代码下载地址：http://git.oschina.net/qibin/RelationListView