欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-05 20:11:37
在上篇文章给大家介绍了仿饿了吗点餐界面两个listview联动效果 主要实现了2个listview怎样实现互相关联,正好上篇博客review了listview控件常规使用...

在上篇文章给大家介绍了仿饿了吗点餐界面两个listview联动效果

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

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

二、最终的效果图

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

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

则效果图如下:

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

第二次尝试,将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联动的实现,希望对大家有所帮助