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

r囧r小猫 2022-10-16 07:27 208阅读 0赞

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

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

二、最终的效果图

![b55ae24056b2a73906a09c39c3835417.png][]

如上图效果图为仿饿了么点餐界面的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

第一次尝试

xmlns:tools="http://schemas.android.com/tools"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"

android:orientation="horizontal"

android:id="@+id/lv\_menu"

android:layout\_weight="1"

android:layout\_height="match\_parent"

android:layout\_width="wrap\_content" />

android:id="@+id/lv\_item"

android:layout\_height="match\_parent"

android:layout\_weight="2"

android:layout\_width="wrap\_content" />

则效果图如下：

![306a8935b61b65c825abd7728620ef73.png][]

第二次尝试，将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();

//遍历所有item.size(),然后将第一个title不同的项对应的值保存起来，则关联到每一个item对应到size中的值

for (int i=0;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联动的实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

[b55ae24056b2a73906a09c39c3835417.png]: /images/20221014/c0f21770ef18490094d3de9e4e839748.png
[306a8935b61b65c825abd7728620ef73.png]: /images/20221014/743f634d44884e4190f9209a584e35a6.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关基于Android的点餐系统设计与实现

相关点餐系统,餐厅点餐系统,外卖点餐系统python计算机毕业设计

相关微信小程序轮子 - 外卖点餐左右联动界面完整源码（类似美团饿了么点餐界面）

相关仿蜜雪冰城点餐小程序

相关 android 高仿点餐,仿饿了吗点餐界面ListView联动的实现

相关 android+仿点餐页面,android 仿微信主界面UI(不含代码逻辑)

相关 Vue高仿饿了吗学习笔记

相关基于Vue与jQuery模拟饿了么点餐Demo

相关点餐平台项目之仿饿了么等APP底部菜单

相关 Java后台——点餐小程序启动点餐系统