一、博客的由来

大神王丰蛋哥 之前一篇博客仿饿了点餐界面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. 仿饿了点餐界面2个ListView联动

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

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

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

  3. Vue.js高仿饿了么WebApp

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

  4. Android 仿PhotoShop调色板应用(三) 主体界面绘制

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(三) 主体界面绘制    关于PhotoShop调色板应用的实现我总结了两个最核心的部分:   1 ...

  5. 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边

    先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...

  6. [js开源组件开发]js手机联动选择地区仿ios 开源git

    js手机联动选择地区 前言:由于网上找到了一个mobiscrool,比较全,但是不开源,只能试用15天,正式版竟然要三千块钱,穷人只能自己动手,写了个只针对弹窗地区选择的. 本站点所有的资源均在git ...

  7. 两listview联动

    package com.mttz; import java.util.ArrayList;import java.util.List; import com.mttz.adapter.CaiDanAD ...

  8. ListView滑动删除 ,仿腾讯QQ

    转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/22961279 在CSDN上开了很多大神们的文章,感觉受益良多,也非常欣赏大家的分 ...

  9. iOS开发之功能模块--高仿Boss直聘的IM界面交互功能

    本人公司项目属于社交类,高仿Boss直聘早期的版本,现在Boss直聘界面风格,交互风格都不如Boss直聘以前版本的好看. 本人通过iPhone模拟器和本人真机对聊,将完成的交互功能通过Mac截屏模拟器 ...

随机推荐

  1. 如何注册微信小程序

    小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验.开发者可以根据平台提供的能力,快速地开发一个小程序. 开放内容包括: 开放注册范围:企业.政府.媒体.其他组织: 开发 ...

  2. php接口

    如果要继承多个类的方法规范,用接口,因为抽象类只能继承一个: 如果要共享一个方法体内容,用抽象类: <?php //接口是为了规范实现它的子类,以达到统一的目的 //接口不能被实例化 inter ...

  3. 还有 3 天,苹果就要关上 HTTP 大门了

    版权声明:本文由贺嘉 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/274113001482113656 来源:腾云阁 h ...

  4. java中关于正则一些基础使用

    希望能帮到有需要的朋友.-----转载请注明出处. 对于正则处理相关的知识,我一开始是从网上找资料配合使用Java API1.6的一个中文版进行学习,很感谢翻译这个版本的团队(机构)或者个人,很感谢那 ...

  5. Ajax工作原理(转)

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  6. Eclipse Java 调试基本技巧

    前言 这一部分是Eclipse中最为重要的部分.调试的重要性想必大家都清楚. 调试无疑是做项目最苦比的事情,但优秀的编码习惯,良好的调试方式能让这没那么苦,甚至还有点乐趣:). 本文讲解使用Eclip ...

  7. Linux下的shell编程(一)BY 四喜三顺

    Ctrl + Alt + Tvim文本编辑器:i(插入模式),v(可视模式),Esc(普通模式),:w(保存),:r(打开),:q(退出)gvim 文本编辑器vim的升级版gedit 更常用的文本编辑 ...

  8. SSH 25 tips

    port ssh -Nf -L 9800:192.168.1.132:22 -l root 10.100.125.76 -v ssh -l root 127.0.0.1 -p 9800 scp -P ...

  9. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  10. centos6.5用户添加到sudoers中

    一.将用户添加到sudoers su vi /etc/sudoers :x! success 二.解释 su 目的是使用最高root权限去进行修改操作 vi /etc/sudoers 使用vi编辑器打 ...