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

如图是效果图

是仿饿了的点餐界面

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; } }

以上所述是小编给大家介绍的仿饿了点餐界面2个ListView联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

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

仿饿了吗点餐界面两个ListView联动效果的相关文章

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

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

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

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

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

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

6步轻松实现两个listView联动效果

看了网上更新的好多联动demo,感觉写的不是很简洁(表示不知道他们在说什么) 自己写了一个简单的Demo分享给大家- -! 效果图: 直接上车,少说废话! 所用到以下的这几个依赖,直接粘到Build.gradle文件中 compile 'com.squareup.picasso:picasso:2.5.2' compile 'io.reactivex:rxjava:1.2.7' compile 'io.reactivex:rxandroid:1.2.1' compile 'com.squareu

IOS实现左右两个TableView联动效果_IOS

一.先来看看要实现的效果图 二.小解析,可以先看看后面的! 三.实现 tableView联动 主要分两种状况      1.点击 左侧 cell 让右侧 tableView 滚到对应位置      2.滑动 右侧 tableView 让左侧 tableView 滚到对应位置 1.先实现简单的:点击 左侧 cell 让右侧 tableView 滚到对应位置 //MARK: - 点击 cell 的代理方法 - (void)tableView:(UITableView *)tableView didS

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

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

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

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

android 仿饿了么购物车

这次分享的是一个很常见的效果,凡是涉及到购物的app或者旅游类以及订餐类的app都有看到过这种效果,两个list view联动显示,添加购物车时的一个抛物线动画实现,以及图标或者item右上角的数字显示.下面是我空闲时候写的一个demo,界面比较陋,但是基本效果都实现了. 不多说,看效果图: 只对添加按钮做了监听,删除没去写(没什么必要). 讲一些主要的代码,想下载源码的可以去这里下载(https://github.com/bobge/LinkedListView.git): 左边的listvi

js实现仿爱微网两级导航菜单效果代码_javascript技巧

本文实例讲述了js实现仿爱微网两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款仿爱微网两级导航菜单,tab选项卡形式的导航菜单,原生js做的tab选项卡型的导航菜单,需要鼠标点击才切换出二级子菜单,可修改成鼠标移过去就更换内容的形式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/ 具体代码如下: <html> <head> <title&g