仿饿了吗点餐界面ListView联动的实现
在上篇文章给大家介绍了仿饿了吗点餐界面两个ListView联动效果
主要实现了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
第一次尝试
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <ListView android:id="@+id/lv_menu" android:layout_weight="1" android:layout_height="match_parent" android:layout_width="wrap_content" /> <ListView android:id="@+id/lv_item" android:layout_height="match_parent" android:layout_weight="2" android:layout_width="wrap_content" /> </LinearLayout>
则效果图如下:
第二次尝试,将android:layout_width="wrap_content"替换为android:layout_width="0dp"
则可以按需要显示。
2.手动点击MenuListView的item,ItemListView怎么触发与之关联显示
MenuListView和ItemListView的关联显示主要是通过listView自带的函数setSelection()来关联的
比如说,当MenuListView显示第i项时候,则ItemListView根据i值关联到i项的第一个值,然后设置他为当前的setSelection.
代码中的实现如下:
对MenuListView的item进行监听
mListMenu.setOnItemClickListener(new ListView.OnItemClickListener(){ @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { //设置当前点击项为i项 mMenuAdapter.setSelectItem(i); mMenuAdapter.notifyDataSetInvalidated();// //设置ItemListView的点击项为i项的第一个item mListItem.setSelection(mTitleList.get(i)); } });
而i项的第一个item的获取则是通过如下代码来实现的
mTitleList = new ArrayList<Integer>(); //遍历所有item.size(),然后将第一个title不同的项对应的值保存起来,则关联到每一个item对应到size中的值 for (int i=0;i<mfoodDatas.size();i++){ if (i==0){ mTitleList.add(i); }else if(!TextUtils.equals(mfoodDatas.get(i).getTitle(),mfoodDatas.get(i-1).getTitle())){ mTitleList.add(i); } }
3.手动滑动ItemListView时,MenuListView怎么关联到当前点击项
mListItem.setOnScrollListener(new AbsListView.OnScrollListener() { private int scrollState; @Override public void onScrollStateChanged(AbsListView absListView, int i) { this.scrollState = i; } @Override public void onScroll(AbsListView absListView, int firstVisibleItem, int visibleItemCount, int totalItemCount) { if(scrollState== AbsListView.OnScrollListener.SCROLL_STATE_IDLE){ return; } //判断当前的item是否是view中第一个可见的item int current = mTitleList.indexOf(firstVisibleItem); if(current!=currentItem && current>0){ currentItem=current; //若不是的话,将menuListView的item设置currentItem,来与itemListView关联 mMenuAdapter.setSelectItem(currentItem); mMenuAdapter.notifyDataSetInvalidated(); } } });
以上所述是小编给大家介绍的仿饿了吗点餐界面ListView联动的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- ListView 分组(实现联系人)、 ExpandableListView (可拓展ListView实现,简单三国杀界面)、Spinner(二级联动)
- 使CxGrid实现如ListView一样的界面.
- ExpandableListView 功能界面布局探究之二(只展开一个group的实现)
- 【Android界面实现】解决ScrollView中嵌套Listview,Listview中嵌套Listview显示不完整和滑动冲突的问题
- 【Android界面实现】listview中item的各种进入效果实现
- 【Android界面实现】解决ScrollView中嵌套Listview,Listview中嵌套Listview显示不完整和滑动冲突的问题
- 用ListView和ImageList实现了和acdsee98%相似的界面
- 【Android界面实现】ZListView,一个最强大的刷新、加载、滑动删除的ListView控件(二)
- 【Android界面实现】listview中item的各种进入效果实现
- Android实现导航菜单随着ListView联动,当导航菜单遇到顶部菜单时停止在哪里,并且listview仍能滑动
- Android联动ListView的实现
- ExpandableListView 功能界面布局探究之三(没有child的下拉列表,group不展开的实现)
- Android的Master/Detail风格界面中实现自定义ListView的单选
- Android开发:setContentView切换界面,自定义带CheckBox的ListView显示SQlite条目-----实现
- 两个ListView 实现 淘点点 点菜界面效果
- XAF 如何实现两个ListView联动
- android expandablelistview--实现类似qq界面的效果
- android仿天猫精品页列表界面WIN8风格列表Listview实现
- 【Android界面实现】整合了刷新、加载更多、滑动删除功能的XListview
- 【Android界面实现】ZListView,一个最强大的刷新、加载、滑动删除的ListView控件(一)