解析ListView联动的实现--仿饿了么点餐界面
一、博客的由来
大神王丰蛋哥 之前一篇博客仿饿了点餐界面2个ListView联动(http://www.cnblogs.com/wangfengdange/p/5886064.html)
主要实现了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();
} }
});
五、源码
源代码的实现还是访问大神王丰蛋哥 的博客仿饿了点餐界面2个ListView联动(http://www.cnblogs.com/wangfengdange/p/5886064.html),本文只是对ListView级联的实现作一个解析。
其中文中若分析有错误的地方敬请指出,有不懂的地方欢迎留言,咱们一起学习进步,早上进入大神的队伍。
解析ListView联动的实现--仿饿了么点餐界面的更多相关文章
- 仿饿了吗点餐界面两个ListView联动效果
这篇文章主要介绍了仿饿了点餐界面2个ListView联动效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 如图是效果图: 是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适 ...
- android高仿抖音、点餐界面、天气项目、自定义view指示、爬取美女图片等源码
Android精选源码 一个爬取美女图片的app Android高仿抖音 android一个可以上拉下滑的Ui效果 android用shape方式实现样式源码 一款Android上的新浪微博第三方轻量 ...
- 仿饿了点餐界面2个ListView联动
如图是效果图 是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适配器中设置Item来改变颜色,再通过notifyDataSetInvalidated来刷新并用lv_home.setSele ...
- 仿饿了么增加购物车旋转控件 - 自带闪转腾挪动画 的button
本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/54235736 本文出 ...
- 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)
前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...
- 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)
#高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack ) ##demo [demo 地址](http://liangxiaojuan.github.io/ ...
- Vue.js高仿饿了么WebApp
介绍 学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目.这是一个高仿饿了么外卖WebApp,现已完成商品预览.商品详情.商家预览.添加购物.查看评论等功能. 部分截图 项目预 ...
- Android实现导航菜单随着ListView联动,当导航菜单遇到顶部菜单时停止在哪里,并且listview仍能滑动
需求:现要实现一个特殊UI的处理,如下图所示: 该布局的上面是一个“按钮”,中间是一个“空白布局(当然也可以是ViewPager等)”,下面是一个页面的导航菜单,底部是一个ListView. 要求:滑 ...
- Vuejs 高仿饿了么外卖APP 百度云视频教程下载
Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...
随机推荐
- 嵌入式&iOS:回调函数(C)与block(OC)回调对比
学了OC的block,再写C的回调函数有点别扭,对比下区别,回忆记录下. C的回调函数: callBack.h 1).定义一个回调函数的参数数量.类型. typedef void (*CallBack ...
- 如何使用SHOW WARNINGS?
1.show warnings:显示上一个语句的错误.警告以及注意.如图:
- Dancing Links and Exact Cover
1. Exact Cover Problem DLX是用来解决精确覆盖问题行之有效的算法. 在讲解DLX之前,我们先了解一下什么是精确覆盖问题(Exact Cover Problem)? 1.1 Po ...
- linux系统下基于mono部署asp.net,使用ef6与mysql出现的问题【索引】
git clone github.com/mono的源码,日期:2014-06-19,百度网盘链接:http://pan.baidu.com/s/1kTG9EUb 关于asp.net利用mono部署到 ...
- Mono 3.8发布:性能进一步改进,可伸缩性提升
9月4日,Mono 3.8.0发布了.该版本的运行时带来了一些性能和可伸缩性方面的改进,同时完成了向Windows平台的移植. Mono遵循Gnome和Linux内核的版本编号策略,这意味着3.8是3 ...
- 为什么说每个程序员都应该刷几道LeetCode?
2015年即将过去,最近在回顾和总结过去一年的工作经历,发现自己并不能算是一名合格的程序员. Google某前员工Lucida在文章<白板编程访谈——Why,What,How>当中写道: ...
- ASP.NET Web API 控制器创建过程(一)
ASP.NET Web API 控制器创建过程(一) 前言 在前面对管道.路由有了基础的了解过后,本篇将带大家一起学习一下在ASP.NET Web API中控制器的创建过程,这过程分为几个部分下面的内 ...
- 非阻塞/异步(epoll) openssl
前段时间在自己的异步网络框架handy中添加openssl的支持,当时在网络上搜索了半天也没有找到很好的例子,后来自己慢慢的摸索,耗费不少时间,终于搞定.因此把相关的资料整理一下,并给出简单的例子,让 ...
- WCF学习之旅—WCF服务的WAS寄宿(十二)
上接 WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一) 八.WAS宿主 IIS ...
- ASP.NET Web API与Owin OAuth:调用与用户相关的Web API
在前一篇博文中,我们通过以 OAuth 的 Client Credential Grant 授权方式(只验证调用客户端,不验证登录用户)拿到的 Access Token ,成功调用了与用户无关的 We ...