仿饿了点餐界面2个listview联动

王丰蛋哥 王丰蛋哥     2022-08-05     243

关键词:

如图是效果图技术分享

是仿饿了的点餐界面

1.点击左侧的ListView,通过在在适配器中设置Item来改变颜色,再通过notifyDataSetInvalidated来刷新并用lv_home.setSelection(showTitle.get(arg2));来关联右侧的

2.右侧的主要是重写下onScroll的方法;来改变左侧ListView的颜色及背景

不过程序中还有个问题,望大神解答就是我右侧的ListView下拉时,上面的TextView能改变;但是上拉时,TextView的不能及时改变应为滑动时我只拿了firstVisibleItem来判断的

Demo的连接:http://download.csdn.net/detail/qq_29774291/9634011

如下是主程序代码

package com.item.jiejie;

import java.util.ArrayList;
import java.util.List;

import com.item.jiejie.adapter.HomeAdapter;
import com.item.jiejie.adapter.MenuAdapter;
import com.item.jiejie.entity.FoodData;
import android.widget.AbsListView.OnScrollListener;
import android.os.Bundle;
import android.app.Activity;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AbsListView;
import android.widget.ListView;
import android.widget.TextView;

/**
 * 防饿了的ListView联动的Demo
 * 有BUG
 * @author Administrator
 *
 */
public class MainActivity extends Activity {
    /**左侧菜单*/
    private ListView lv_menu;
    /**右侧主菜*/
    private ListView lv_home;
    private TextView tv_title;
    
    private MenuAdapter menuAdapter;
    private HomeAdapter homeAdapter;
    private int currentItem;
    /**
     * 数据源
     */
    private List<FoodData> foodDatas;
    private String data[] = {"热销榜","新品套餐","便当套餐","单点菜品","饮料类","水果罐头","米饭"};
    /**
     * 里面存放右边ListView需要显示标题的条目position
     */
    private ArrayList<Integer> showTitle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        setView();
        setData();
    }

    private void setView() {
        // TODO Auto-generated method stub
        lv_menu = (ListView)findViewById(R.id.lv_menu);
        tv_title = (TextView)findViewById(R.id.tv_titile);
        lv_home = (ListView)findViewById(R.id.lv_home);
        
        foodDatas = new ArrayList<FoodData>();
        for(int i =0;i < data.length; i++){
            foodDatas.add(new FoodData(i, data[0] + i, data[0]));
        }
        for(int i =0;i < data.length -1; i++){
            foodDatas.add(new FoodData(i, data[1] + i, data[1]));
        }
        for(int i =0;i < data.length-2; i++){
            foodDatas.add(new FoodData(i, data[2] + i, data[2]));
        }
        for(int i =0;i < data.length-3; i++){
            foodDatas.add(new FoodData(i, data[3] + i, data[3]));
        }
        for(int i =0;i < data.length-4; i++){
            foodDatas.add(new FoodData(i, data[4] + i, data[4]));
        }
        for(int i =0;i < data.length-3; i++){
            foodDatas.add(new FoodData(i, data[5] + i, data[5]));
        }
        for(int i =0;i < 6; i++){
            foodDatas.add(new FoodData(i, data[6] + i, data[6]));
        }
        showTitle = new ArrayList<Integer>();
        for(int i = 0; i < foodDatas.size(); i++){
            if( i ==0){
                showTitle.add(i );
                System.out.println(i + "dd");
            }else if (!TextUtils.equals(foodDatas.get(i).getTitle(), foodDatas.get(i - 1).getTitle())) {
                showTitle.add(i );
                System.out.println(i + "dd");
            }
        }
    }

    private void setData() {
        // TODO Auto-generated method stub
        tv_title.setText(foodDatas.get(0).getTitle());
        menuAdapter = new MenuAdapter(this);
        homeAdapter = new HomeAdapter(this, foodDatas);
        lv_menu.setAdapter(menuAdapter);
        lv_home.setAdapter(homeAdapter);
        lv_menu.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3) {
                // TODO Auto-generated method stub
                menuAdapter.setSelectItem(arg2);
                menuAdapter.notifyDataSetInvalidated();
                lv_home.setSelection(showTitle.get(arg2));
                                
                tv_title.setText(data[arg2]);
                
            }
        });
        lv_home.setOnScrollListener(new OnScrollListener() {
            private int scrollState;
            
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                // TODO Auto-generated method stub
                //System.out.println("onScrollStateChanged" + "   scrollState" + scrollState);
                this.scrollState = scrollState;
            }
            
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem,
                    int visibleItemCount, int totalItemCount) {
                // TODO Auto-generated method stub
                if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {  
                    return;  
                } 
                Log.d("jiejie", "onScroll" + "  firstVisibleItem" + firstVisibleItem
                        +"  visibleItemCount" + visibleItemCount + "  totalItemCount" + totalItemCount);
                int current =showTitle.indexOf(firstVisibleItem );
                System.out.println(current + "dd"  +  firstVisibleItem);
//                lv_home.setSelection(current);
                if(currentItem != current && current >=0){
                    currentItem = current;
                    tv_title.setText(data[current]);
                    menuAdapter.setSelectItem(currentItem);
                    menuAdapter.notifyDataSetInvalidated();
                }
            }
        });
    }



}

左侧ListView的适配器代码

package com.item.jiejie.adapter;

import com.item.jiejie.R;

import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

/**
 * 左侧菜单ListView的适配器
 * @author Administrator
 *
 */
public class MenuAdapter extends BaseAdapter{
    
    private Context context;
    private int selectItem = 0;
    private String data[] = {"热销榜","新品套餐","便当套餐","单点菜品","饮料类","水果罐头","米饭"};
    
    public MenuAdapter(Context context) {
        this.context = context;
    }
    
    public int getSelectItem() {
        return selectItem;
    }

    public void setSelectItem(int selectItem) {
        this.selectItem = selectItem;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return data.length;
    }

    @Override
    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int arg0, View arg1, ViewGroup arg2) {
        // TODO Auto-generated method stub
        ViewHolder holder = null;
        if(arg1 == null) {
            holder = new ViewHolder();
            arg1 = View.inflate(context, R.layout.item_menu, null);
            holder.tv_name = (TextView)arg1.findViewById(R.id.item_name);
            arg1.setTag(holder);
        }else {
            holder = (ViewHolder)arg1.getTag();
        }
        if(arg0 == selectItem){
            holder.tv_name.setBackgroundColor(Color.WHITE);
            holder.tv_name.setTextColor(context.getResources().getColor(R.color.text_green));
        }else {
            holder.tv_name.setBackgroundColor(context.getResources().getColor(R.color.ll_coachback));
            holder.tv_name.setTextColor(context.getResources().getColor(R.color.text_deep));
        }
        holder.tv_name.setText(data[arg0]);
        return arg1;
    }
    static class ViewHolder{
        private TextView tv_name;
    }
}

右侧的适配器代码

技术分享
package com.item.jiejie.adapter;

import java.util.List;

import com.item.jiejie.R;
import com.item.jiejie.entity.FoodData;

import android.content.Context;
import android.text.TextUtils;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

/**
 * 右侧主界面ListView的适配器
 * 
 * @author Administrator
 * 
 */
public class HomeAdapter extends BaseAdapter {
    private Context context;
    private List<FoodData> foodDatas;
    
    public HomeAdapter(Context context, List<FoodData> foodDatas) {
        this.context = context;
        this.foodDatas = foodDatas;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        if(foodDatas!=null){
            return foodDatas.size();
        }else {        
            return 10;
        }        
    }

    @Override
    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int arg0, View arg1, ViewGroup arg2) {
        // TODO Auto-generated method stub
        ViewHold holder = null;
        if(arg1 == null){
            arg1 = View.inflate(context, R.layout.item_home, null);
            holder = new ViewHold();
            holder.tv_title = (TextView)arg1.findViewById(R.id.item_home_title);
            holder.tv_name = (TextView)arg1.findViewById(R.id.item_home_name);
            arg1.setTag(holder);
        }else {
            holder = (ViewHold)arg1.getTag();
        }
        holder.tv_name.setText(foodDatas.get(arg0).getName());
        holder.tv_title.setText(foodDatas.get(arg0).getTitle());
        if(arg0 == 0){
            holder.tv_title.setVisibility(View.VISIBLE);
        }else if (!TextUtils.equals(foodDatas.get(arg0).getTitle(), foodDatas.get(arg0 -1).getTitle())) {
            holder.tv_title.setVisibility(View.VISIBLE);
        }else {
            holder.tv_title.setVisibility(View.GONE);
        }
        return arg1;
    }
    private static class ViewHold{
        private TextView tv_title;
        private TextView tv_name;
    }
}
View Code

 

android仿饿了么购物车

...者旅游类以及订餐类的app都有看到过这种效果,两个listview联动显示,添加购物车时的一个抛物线动画实现,以及图标或者item右上角的数字显示。下面是我空闲时候写的一个 查看详情

饿了么购物车动画(代码片段)

...物车动画,所以想看看别人是怎么实现的,但是看了很多仿饿了么的demo都是实现了一个完整的大的项目,要找到那个小模块很麻烦,所以自己将联动菜单和动画提取出来写了一个demo,方便学习。目的只是想突出功能所以界面细... 查看详情

vue.js高仿饿了么外卖app

1.架构从传统的MVC向RESTAPI+前端MV*迁移参考链接:http://blog.csdn.net/broadview2006/article/details/8615055http://blog.csdn.net/u013628152/article/details/42709033MV*包括:MVC、MVP、MVVMvue.js是MVVM框架 2.Iconmoon制作图标字体2 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用:vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、准备工作1.大前提:已安装好node、npm、vue、vue-cli、stylus(此项目使用stylus来编译)2.开发软件:GoogleChrome(建议安装插件vue-devtools,方便调试),webstorm/sublimeText/VSCode(推荐使用webstorm,sublime和VSCode需要安装相应的插件)3.... 查看详情

高仿饿了么mock本地数据(代码片段)

新版webpack.dev.conf.js配置本地数据访问://引入express模块constexpress=require(‘express‘)//创建express对象constapp=express()//引入请求文件加载本地数据文件constappData=require(‘../data.json‘)//获取对应的本地数据constseller=appData.sellerconstg 查看详情

仿饿了么首页导航栏(viewpager)

1、需求分析在饿了么首页中我们能看到这样的布局(如下图)。红框内是一个可以左右滑动的页面,每一个页面类似于九宫格,都有可供点击图标。对于这样的布局,我在网上找了很久都没有找到相关的名称,所以我这里暂时... 查看详情

美团饿了么外卖点菜界面联动菜单性能优化(代码片段)

1.业务逻辑描述2.优化后的性能提升对比相当明显3.常规处理逻辑把左侧菜单的一项成为分类(category),把右侧每一项称为项(item)。DOM更新后,获取整个content的高度(包裹所有item的盒子的高度);获取每个category在content上的高度,... 查看详情

基于vue2+nuxt构建的高仿饿了么(2018版)(代码片段)

前言高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vuessr的同学参考和学习项目地址如遇网络不佳,请移步国内镜像加速节点效果演示查看demo请戳这里(请用chrome手机模式预览)移动端扫描下方二维码API接口文... 查看详情

仿饿了么项目-vue-cli开启项目

环境搭建安装nodeJs在用vue-cli开启项目之前,首先我们需要安装Node环境,安装Node很简单,只需要去官网下载http://nodejs.cn/download/,下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量。检... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、抽出头部作为一个组件,在底部导航的时候可以相应的显示不同的标题技术点:使用slot进行组件间的通信;父组件给子组件传值(子组件里面通过props接收父组件传过来的数据)查看链接:https://blog.csdn.net/sinat_17775997/article/... 查看详情

基于springboot+redis+vue仿饿了么外卖系统(后台+移动端)

优质文章,第一时间送达 六、运行效果前端展示(点击图片查看大图)后台管理(点击图片查看大图) 七、源码下载源码下载云盘链接:链接:https://pan.baidu.com/s/1djb2BmP3S6l9OfzT62Nd6A提取码:lry9复制这... 查看详情

仿饿了么加入购物车旋转控件-自带闪转腾挪动画的按钮

转载请标明出处:http://blog.csdn.net/zxt0601/article/details/54235736本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)代码传送门:喜欢的话,随手点个star。多谢https://github.com/mcxtzhang/AnimShopButton概述在上文,酷炫Path动画已经预告了,今... 查看详情

我们发现了点餐系统的严重bug!!!

故事改编自知乎高赞回答作者:Heshawn链接:https://www.zhihu.com/question/21747929/answer/241143178<END> 查看详情

listview与imagelist联动使用

...:大图标视图图3:详细排列试图 步骤:1.在窗体添加listview和imagelist控件(listview1,imagelist1),并用imagelist1选择图像添加图片,找到文件夹并添加(图片类型为ico类型).2.窗体中添加三个按钮button控件,分别命名大图标,小图标,... 查看详情

vue.js高仿饿了么外卖app2016最火前端框架百度云

ReactReact和Vue有许多相似之处,它们都有:使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。保持注意力集中在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。相似的作用域,我们会用更多... 查看详情

android-recycleview的双向列表左右联动效果

...A有一个需求,需要做一个左右双向联动的列表。类似于饿了么点餐页面,但是远没有那么复杂,只是用于展示的一个页面。只用了两个RecycleView加适配器,没有调用Fragment。(另加RecycleView中Item的,点击改变颜色,点击其他项改... 查看详情

织梦联动筛选单选版-支持手机站使用

警告:操作之前先备份你的程序这2个文件。/include/arc.listview.class.php/include/extend.func.php织梦联动筛选【单选版】下载https://pan.baidu.com/s/1lusq3thwEpzA6yLWeHvcww密码:a1at安装说明1、根据自己程序编码,把下载到的include文件夹里的2个文件... 查看详情