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

时间: 2025-01-02 03:57:32

仿饿了吗点餐界面ListView联动的实现的相关文章

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

在上篇文章给大家介绍了仿饿了吗点餐界面两个ListView联动效果 主要实现了2个ListView怎样实现互相关联,正好上篇博客review了ListView控件常规使用,因此本篇博客主要对大神的那篇博客的实现进行代码层的剖析. 一方面,方便自己,在以后的代码实现上加以参考.另一方面,供刚入门的Android菜鸟们共同学习. 二.最终的效果图 如上图效果图为仿饿了么点餐界面的ListView级联 三.实现ListView级联的困难点 为了好做区分,在本文中左侧的ListView称之为MenuLi

仿饿了吗点餐界面两个ListView联动效果_Android

如图是效果图 是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适配器中设置Item来改变颜色,再通过notifyDataSetInvalidated来刷新并用lv_home.setSelection(showTitle.get(arg2));来关联右侧的 2.右侧的主要是重写下onScroll的方法:来改变左侧ListView的颜色及背景 不过程序中还有个问题,望大神解答就是我右侧的ListView下拉时,上面的TextView能改变:但是上拉时,TextView的不能及时改变应为滑

仿饿了吗点餐界面两个ListView联动效果

如图是效果图 是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适配器中设置Item来改变颜色,再通过notifyDataSetInvalidated来刷新并用lv_home.setSelection(showTitle.get(arg2));来关联右侧的 2.右侧的主要是重写下onScroll的方法:来改变左侧ListView的颜色及背景 不过程序中还有个问题,望大神解答就是我右侧的ListView下拉时,上面的TextView能改变:但是上拉时,TextView的不能及时改变应为滑

Android仿eleme点餐页面二级联动列表_Android

本周末外卖点得多,就仿一仿"饿了么"好了.先上图吧,这样的订单页面是不是很眼熟: 右边的listview分好组以后,在左边的Tab页建立索引.可以直接导航,是不是很方便.关键在于右边滑动,左边也会跟着滑:而点击左边呢,也能定位右边的项.它们存在这样一种特殊的交互.像这种联动的效果,还有些常见的例子呢,比如知乎采用了常见的toolbar+viewPager的联动,只不过是上下布局: 再看看点评,它的城市选择页面也有这种联动的影子,只是稍微弱一点.侧边栏可以对listview进行索引,这最

Android仿eleme点餐页面二级联动列表

本周末外卖点得多,就仿一仿"饿了么"好了.先上图吧,这样的订单页面是不是很眼熟: 右边的listview分好组以后,在左边的Tab页建立索引.可以直接导航,是不是很方便.关键在于右边滑动,左边也会跟着滑:而点击左边呢,也能定位右边的项.它们存在这样一种特殊的交互.像这种联动的效果,还有些常见的例子呢,比如知乎采用了常见的toolbar+viewPager的联动,只不过是上下布局: 再看看点评,它的城市选择页面也有这种联动的影子,只是稍微弱一点.侧边栏可以对listview进行索引,这最

c#winform界面listview图片列表如何实现多选按钮的批量删除

问题描述 c#winform界面listview图片列表如何实现多选按钮的批量删除 本人C#新做了一个listview自动加载图片的界面,每个加载的图片都是可以多选的,现在我想通过多选按钮实现批量删除加载的图片以及图片对应的文件里的图片,请高手指教,谢谢! 解决方案 listview的可以显示复选框listView1.CheckBoxes = true;然后遍历 foreach (ListViewItem item in listView1.Items) { if (item.Checked)

仿Android微信6.0主界面开发 实现切换图标变色

1.概述 学习Android少不了模仿各种app的界面,自从微信6.0问世以后,就觉得微信切换时那个变色的Tab图标??诺模?裉煳揖痛?蠹易远ㄒ蹇丶???惚渖?涞梅善?~ 好了,下面先看下效果图: 开发 实现切换图标变色-qt主界面中多窗口切换"> 清晰度不太好,大家凑合看~~有木有觉得这个颜色弱爆了了的,,,下面我动动手指给你换个颜色: 有没有这个颜色比较妖一点~~~好了~下面开始介绍原理. 2.原理介绍 通过上面的效果图,大家可能也猜到了,我们的图标并非是两张图片,而是一张图,并且目标

Android实现仿网易今日头条等自定义频道listview 或者grideview等item上移到另一个view中_Android

我这里只是简单的用了两个listview来实现的,先上效果图.比较粗糙.预留了自定义的空间. 思路: 从上图应该可以看的出来.就是上下两个listview.点击下面的ltem.会动态的移动到上一个listview的最后.上面的listview 为listview1,下面的为listview2. 点击listview2,获取到view ,设置一个动画,移动到listview1 ,listview2中删除被点的item.listview1中新增一个. 上代码: Mainactivity.java 部

Android仿饿了么加入购物车旋转控件自带闪转腾挪动画的按钮效果(实例详解)

概述 在上文,酷炫Path动画已经预告了,今天给大家带来的是利用 纯自定义View,实现的仿饿了么加入购物车控件,自带闪转腾挪动画的按钮. 效果图如下: 图1 项目中使用的效果,考虑到了View的回收复用, 并且可以看到在RecyclerView中使用,切换LayoutManager也是没有问题的, 图2 Demo效果,测试各种属性值 注意,本控件非继承自ViewGroup,而是纯自定义View实现.理由如下: 1 减少布局层级,从而提高性能 2 文字和图形纯draw,用到什么draw什么,没有