你的位置:首页 > 操作系统

[操作系统]解析ListView联动的实现

一、博客的由来

大神王丰蛋哥 之前一篇博客仿饿了点餐界面2个ListView联动(http://www.cnblogs.com/wangfengdange/p/5886064.html)

主要实现了2个ListView怎样实现互相关联,正好上篇博客review了ListView控件常规使用,因此本篇博客主要对大神的那篇博客的实现进行代码层的剖析。

一方面,方便自己,在以后的代码实现上加以参考。另一方面,供刚入门的Android菜鸟们共同学习。

二、最终的效果图

如上图效果图为仿饿了么点餐界面的ListView级联

三、实现ListView级联的困难点

为了好做区分,在本文中左侧的ListView称之为MenuListView,右侧的ListView称之为ItemListView。

1.两个ListView在整个Activity中的Layout布局问题

2.手动点击MenuListView的item,ItemListView怎么触发与之关联显示

如当点击MenuListView中的“新品套餐”,右侧ItemListView的getView如何显示新品套餐的内容。

3.手动滑动ItemListView时,MenuListView怎么关联到当前点击项

如当手动滑动ItemListView为“饮料类”时,左侧的MenuListView的当前点击Item显示为饮料类,即背景色为白色。

四、代码实现

1.ListView的布局问题

看到这个截图的时候,第一想到的是用权重的显示,即Android:layout_weight

第一次尝试

 1 <??> 2 <LinearLayout ="http://schemas.android.com/apk/res/android" 3   ="http://schemas.android.com/tools" 4   android:layout_width="match_parent" 5   android:layout_height="match_parent" 6   android:orientation="horizontal" 7   > 8  9   <ListView10     android:id="@+id/lv_menu"11     android:layout_weight="1"12     android:layout_height="match_parent"13     android:layout_width="wrap_content" />14   <ListView15     android:id="@+id/lv_item"16     android:layout_height="match_parent"17     android:layout_weight="2"18     android:layout_width="wrap_content" />19 </LinearLayout>

View Code

则效果图如下:

第二次尝试,将android:layout_width="wrap_content"替换为android:layout_width="0dp"

则可以按需要显示。

2.手动点击MenuListView的item,ItemListView怎么触发与之关联显示

MenuListView和ItemListView的关联显示主要是通过listView自带的函数setSelection()来关联的

比如说,当MenuListView显示第i项时候,则ItemListView根据i值关联到i项的第一个值,然后设置他为当前的setSelection.

代码中的实现如下:

 1 对MenuListView的item进行监听 2 mListMenu.setOnItemClickListener(new ListView.OnItemClickListener(){ 3       @Override 4       public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { 5         //设置当前点击项为i项 6         mMenuAdapter.setSelectItem(i); 7         mMenuAdapter.notifyDataSetInvalidated();// 8         //设置ItemListView的点击项为i项的第一个item 9         mListItem.setSelection(mTitleList.get(i));10       }11     });  

而i项的第一个item的获取则是通过如下代码来实现的

 1 mTitleList = new ArrayList<Integer>(); 2 //遍历所有item.size(),然后将第一个title不同的项对应的值保存起来,则关联到每一个item对应到size中的值 3 for (int i=0;i<mfoodDatas.size();i++){ 4   if (i==0){ 5     mTitleList.add(i); 6   }else if(!TextUtils.equals(mfoodDatas.get(i).getTitle(),mfoodDatas.get(i-1).getTitle())){ 7     mTitleList.add(i); 8   } 9 }

3.手动滑动ItemListView时,MenuListView怎么关联到当前点击项

 1 mListItem.setOnScrollListener(new AbsListView.OnScrollListener() { 2  3       private int scrollState; 4  5       @Override 6       public void onScrollStateChanged(AbsListView absListView, int i) { 7         this.scrollState = i; 8       } 9 10       @Override11       public void onScroll(AbsListView absListView,12                 int firstVisibleItem,13                 int visibleItemCount,14                 int totalItemCount) {15         if(scrollState== AbsListView.OnScrollListener.SCROLL_STATE_IDLE){16           return;17         }18         //判断当前的item是否是view中第一个可见的item19         int current = mTitleList.indexOf(firstVisibleItem);20         if(current!=currentItem && current>0){21           currentItem=current;22           //若不是的话,将menuListView的item设置currentItem,来与itemListView关联23           mMenuAdapter.setSelectItem(currentItem);24           mMenuAdapter.notifyDataSetInvalidated();25         }26 27 28       }29     });                        

 五、源码

源代码的实现还是访问大神王丰蛋哥 的博客仿饿了点餐界面2个ListView联动(http://www.cnblogs.com/wangfengdange/p/5886064.html),本文只是对ListView级联的实现作一个解析。

其中文中若分析有错误的地方敬请指出,有不懂的地方欢迎留言,咱们一起学习进步,早上进入大神的队伍。