仿饿了吗点餐界面ListView联动的实现

所属分类: 软件编程 / Android 阅读数: 67
收藏 0 赞 0 分享

在上篇文章给大家介绍了仿饿了吗点餐界面两个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联动的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

Android样式和主题之选择器的实例讲解

今天小编就为大家分享一篇关于Android样式和主题之选择器的实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Android应用动态修改主题的方法示例

今天小编就为大家分享一篇关于Android应用动态修改主题的方法示例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Flutter 网络请求框架封装详解

这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Flutter倒计时/计时器的实现代码

这篇文章主要介绍了Flutter倒计时/计时器的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Android使用google breakpad捕获分析native cash

这篇文章主要介绍了Android使用google breakpad捕获分析native cash 的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

详解Flutter WebView与JS互相调用简易指南

这篇文章主要介绍了详解Flutter WebView与JS互相调用简易指南,分为JS调用Flutter和Flutter调用JS,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android开发实现ListView和adapter配合显示图片和文字列表功能示例

这篇文章主要介绍了Android开发实现ListView和adapter配合显示图片和文字列表功能,涉及Android使用ListView结合adapter适配器实现图文显示功能相关的布局、解析、权限控制等操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Android文字基线Baseline算法的使用讲解

今天小编就为大家分享一篇关于Android文字基线Baseline算法的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
收藏 0 赞 0 分享

Flutter自定义实现神奇动效的卡片切换视图的示例代码

这篇文章主要介绍了Flutter自定义实现神奇动效的卡片切换视图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android实现自定义滑动刻度尺方法示例

这篇文章主要给大家介绍了关于Android实现自定义滑动刻度尺的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享
查看更多