一、博客的由来

大神王丰蛋哥 之前一篇博客仿饿了点餐界面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联动的实现--仿饿了么点餐界面的更多相关文章

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

    这篇文章主要介绍了仿饿了点餐界面2个ListView联动效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 如图是效果图: 是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适 ...

  2. 仿饿了点餐界面2个ListView联动

    如图是效果图 是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适配器中设置Item来改变颜色,再通过notifyDataSetInvalidated来刷新并用lv_home.setSele ...

  3. 仿饿了么增加购物车旋转控件 - 自带闪转腾挪动画 的button

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/54235736 本文出 ...

  4. 【饿了么】—— Vue2.0高仿饿了么核心模块&amp;移动端Web App项目爬坑(三)

    前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...

  5. 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)

    #高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack )   ##demo [demo 地址](http://liangxiaojuan.github.io/ ...

  6. Vue.js高仿饿了么WebApp

    介绍 学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目.这是一个高仿饿了么外卖WebApp,现已完成商品预览.商品详情.商家预览.添加购物.查看评论等功能. 部分截图 项目预 ...

  7. Android实现导航菜单随着ListView联动,当导航菜单遇到顶部菜单时停止在哪里,并且listview仍能滑动

    需求:现要实现一个特殊UI的处理,如下图所示: 该布局的上面是一个“按钮”,中间是一个“空白布局(当然也可以是ViewPager等)”,下面是一个页面的导航菜单,底部是一个ListView. 要求:滑 ...

  8. Vuejs 高仿饿了么外卖APP 百度云视频教程下载

    Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...

  9. 基于vue2+nuxt构建的高仿饿了么(2018版)

    前言 高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习 项目地址如遇网络不佳,请移步国内镜像加速节点 效果演示 查看demo请戳这里(请用chrome手 ...

随机推荐

  1. 【UWP开发】一个简单的Toast实现

    Toast简介 在安卓里Toast是内置原生支持,它是Android中用来显示显示信息的一种机制.它主要用于向用户显示提示消息,没有焦点,显示的时间有限,过一定的时间就会自动消失.在UWP中虽然没有原 ...

  2. CSS命名格式

    CSS样式命名整理页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目: ...

  3. CentOS下IP的配置

    1.打开命令窗口,切换成root账户:su - root 2.进入目录:/etc/sysconfig/network-scripts,打开文件vi ifcfg-eth0 3.修改参数: ## 名称DE ...

  4. ViewController与outlet绑定

    ViewController的作用 ViewController与XIB一一对应,用于分离独立出可重用组件单元,如单个组件.复合组件.界面片段.整个界面等. 通常继承 UIViewController ...

  5. Android中的文件权限操作

    默认本工程创建的文件本工程对其有读写权限. 我们可以通过context.openFileOutput("文件名", 模式): 我们可以创建私有, 共有, 只读, 只写文件, 默认的 ...

  6. Swift 中的利刃,函数和闭包

    input[type="date"].form-control,.input-group-sm>input[type="date"].input-grou ...

  7. POJ 3468 A Simple Problem with Integers(线段树区间更新,模板题,求区间和)

    #include <iostream> #include <stdio.h> #include <string.h> #define lson rt<< ...

  8. JNI 多线程

    一.概述 JNI编程和Linux上的C/C++编程还是挺相似的,每次java调用JNI中的函数时都会传入有关JVM的一些参数(如JNIEnv,jobject),每次JNI回调java中的方法时都要通过 ...

  9. 齐全的IP地址查询接口及调用方法(转)

    设计蜂巢IP地址查询接口:http://www.hujuntao.com/api/ip/ip.php 腾讯IP地址查询接口:http://fw.qq.com/ipaddress 新浪IP地址查询接口: ...

  10. video详解 HTML5中的视频:

    一.video 视频的方法.属性.事件详解 方法:play() 播放  pause() 暂停  属性:currentTime播放到当前的时间   duration视频的总时长 事件:ended 播放完 ...