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

论坛 › 期权论坛 › 脚本     
匿名技术用户   2021-1-2 15:05   11   0

先上效果图:


实现思路:

1.先说右边标题:

首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题.

如果这是第一个条目,就让标题显示出来,再如果这个条目的类型和上一个条目的类型不一样,就让这个条目的标题显示出来,否则,就隐藏标题, 这样我们就做到了每种类型只有第一个数据标题显示出来

接着,在Listview的外层(也就是MainActivity的布局文件中),默认放一个标题(下面都称作是主标题)

最后,设置右边Listview的滚动监听事件 在onScroll方法中,我们要做两件事:

第一件事是每当前第一个可见条目的类型和当前左边Listview选择的类型(红色字体的类型) 不一样时,需要将主标题的内容改变

第二件事 同时切换左边Listview的选中状态

2.再说左边的Listview

左边的Listview需要设置条目点击事件,在点击事件中需要干三件事:

第一 将左边点击条目的字体颜色改变

第二 将右边Listview滚动至左边Listview所选择类型相同的区域

第三 改变主标题的内容


说到这,大家可能还是云里雾里的,还是不知道左边的类型和右边的类型是怎么关联起来的?没关系,在下面的代码解析中你就会明白!下边是具体的实现步骤:

一.写布局

1.在MainActivity的布局文件中 添加应有的控件

[html] view plain copy
  1. <span style="font-size:14px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="horizontal"
  6. tools:context=".MainActivity" >
  8. <ListView
  9. android:id="@+id/lv_left"
  10. android:layout_width="0dp"
  11. android:layout_height="match_parent"
  12. android:layout_weight="1" >
  13. </ListView>
  15. <RelativeLayout
  16. android:layout_width="0dp"
  17. android:layout_height="match_parent"
  18. android:layout_weight="3" >
  20. <ListView
  21. android:id="@+id/lv_Right"
  22. android:layout_width="match_parent"
  23. android:layout_height="match_parent" >
  24. </ListView>
  26. <TextView
  27. android:id="@+id/tv_title"
  28. android:layout_width="match_parent"
  29. android:layout_height="wrap_content"
  30. android:background="#9f9f9f"
  31. android:gravity="center"
  32. android:padding="5dp"
  33. android:textColor="#000000"
  34. android:textSize="18sp" />
  35. </RelativeLayout>
  37. </LinearLayout></span>


注意 这里边将Listview和主标题textView放在一个相对布局中,并且先放Listview,后放textView,目的是将主标题放在Listview的空间的上方


2.左边Listview的Item布局文件

[html] view plain copy
  1. <span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="50dp"
  5. android:background="#f9f9f9"
  6. android:gravity="center"
  7. android:orientation="vertical" >
  9. <TextView
  10. android:id="@+id/tv_left"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:text="左边条目"
  14. android:textColor="#000000"
  15. android:textSize="18sp" />
  17. </LinearLayout></span>
  19. <span style="font-size:18px;">3.右边Listview的Item布局文件</span>
  21. <span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
  22. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  23. android:layout_width="match_parent"
  24. android:layout_height="wrap_content"
  25. android:background="#f9f9f9"
  26. android:gravity="center"
  27. android:orientation="vertical" >
  29. <TextView
  30. android:id="@+id/tv_right"
  31. android:layout_width="match_parent"
  32. android:layout_height="wrap_content"
  33. android:background="#9f9f9f"
  34. android:gravity="center"
  35. android:padding="5dp"
  36. android:text="右边条目"
  37. android:textColor="#000000"
  38. android:textSize="18sp" />
  40. <LinearLayout
  41. android:layout_width="match_parent"
  42. android:layout_height="90dp"
  43. android:gravity="center_vertical"
  44. android:orientation="horizontal" >
  46. <ImageView
  47. android:layout_width="80dp"
  48. android:layout_height="80dp"
  49. android:background="@drawable/jipai" />
  51. <TextView
  52. android:id="@+id/tv_content"
  53. android:layout_width="wrap_content"
  54. android:layout_height="wrap_content"
  55. android:layout_marginLeft="50dp"
  56. android:text="左边条目"
  57. android:textColor="#000000"
  58. android:textSize="18sp" />
  59. </LinearLayout>
  61. </LinearLayout></span>


二.创建Javabean

[java] view plain copy
  1. <span style="font-size:14px;">public class BaseData {
  2. private String name;
  3. private int type;// 类型 后边要根据类型显示标题
  4. private String title;//
  6. public BaseData(String name, int type, String title) {
  7. super();
  8. this.name = name;
  9. this.type = type;
  10. this.title = title;
  11. }
  13. public BaseData() {
  14. super();
  15. }
  17. public String getTitle() {
  18. return title;
  19. }
  21. public void setTitle(String title) {
  22. this.title = title;
  23. }
  25. public String getName() {
  26. return name;
  27. }
  29. public void setName(String name) {
  30. this.name = name;
  31. }
  33. public int getType() {
  34. return type;
  35. }
  37. public void setType(int type) {
  38. this.type = type;
  39. }
  41. }</span>

三.创建两个adapter

1.左边Listview的adapter

[java] view plain copy
  1. <span style="font-size:14px;">/**
  2. * 左边的adapter 注意要给textview设置tag
  3. * @author HaiPeng
  4. *
  5. */
  6. public class LeftAdapter extends BaseAdapter {
  8. private Context context;
  9. String data[]={"蔬菜1","水果1","姓氏1","蔬菜2","水果2","姓氏2","蔬菜3","水果3","姓氏3"};
  11. public LeftAdapter(Context context) {
  12. super();
  13. this.context = context;
  14. }
  16. @Override
  17. public int getCount() {
  18. return data.length;
  19. }
  21. @Override
  22. public Object getItem(int position) {
  23. return null;
  24. }
  26. @Override
  27. public long getItemId(int position) {
  28. return 0;
  29. }
  31. @Override
  32. public View getView(final int position, View convertView, ViewGroup parent) {
  33. ViewHold vh = null;
  34. if (convertView == null) {
  35. convertView = View.inflate(context, R.layout.item_left, null);
  36. vh = new ViewHold();
  37. convertView.setTag(vh);
  38. vh.tv_left = (TextView) convertView.findViewById(R.id.tv_left);
  39. } else {
  40. vh = (ViewHold) convertView.getTag();
  41. }
  42. vh.tv_left.setTag(position);
  43. vh.tv_left.setText(data[position]);
  44. return convertView;
  45. }
  47. public class ViewHold {
  48. TextView tv_left;
  50. }
  51. }</span>

2.右边Listview的adapter

[java] view plain copy
  1. <span style="font-size:14px;">/**
  2. * 右边listview的adapter
  3. *
  4. * @author HaiPeng
  5. *
  6. */
  7. public class RightAdapter extends BaseAdapter {
  8. private Context context;
  9. private ArrayList<BaseData> data = new ArrayList<BaseData>();
  11. public RightAdapter(Context context) {
  12. super();
  13. this.context = context;
  14. }
  16. /**
  17. * 这个方法是用来更新数据源
  18. *
  19. * @param context
  20. */
  22. public void updateData(ArrayList<BaseData> lists) {
  23. data.clear();
  24. data.addAll(lists);
  25. this.notifyDataSetChanged();
  26. }
  28. @Override
  29. public int getCount() {
  30. // TODO Auto-generated method stub
  31. return data.size();
  32. }
  34. @Override
  35. public Object getItem(int position) {
  37. return null;
  38. }
  40. @Override
  41. public long getItemId(int position) {
  42. // TODO Auto-generated method stub
  43. return 0;
  44. }
  46. @Override
  47. public View getView(int position, View convertView, ViewGroup parent) {
  48. ViewHold vh = null;
  49. if (convertView == null) {
  50. convertView = View.inflate(context, R.layout.item_right, null);
  51. vh = new ViewHold();
  52. convertView.setTag(vh);
  53. vh.tv_content = (TextView) convertView
  54. .findViewById(R.id.tv_content);
  55. vh.tv_right = (TextView) convertView.findViewById(R.id.tv_right);
  56. } else {
  57. vh = (ViewHold) convertView.getTag();
  58. }
  59. vh.tv_content.setText(data.get(position).getName());
  60. if (position == 0) {//如果是第一个 需要显示标题
  61. vh.tv_right.setVisibility(View.VISIBLE);
  62. vh.tv_right.setText(data.get(position).getTitle());
  63. } else if (!TextUtils.equals(data.get(position).getTitle(),
  64. data.get(position - 1).getTitle())) {//如果这个标题和上一个不一样 也需要将标题显示出来
  65. vh.tv_right.setVisibility(View.VISIBLE);
  66. vh.tv_right.setText(data.get(position).getTitle());
  67. } else {
  68. vh.tv_right.setVisibility(View.GONE);
  69. }
  70. return convertView;
  71. }
  73. public class ViewHold {
  74. TextView tv_content;
  75. TextView tv_right;
  76. }
  78. }</span>


四.MainActivity中操作

1.初始化数据

[java] view plain copy
  1. <span style="font-size:14px;">private void initData() {
  2. lists = new ArrayList<BaseData>();
  3. String title[] = { "蔬菜1", "水果1", "姓氏1", "蔬菜2", "水果2", "姓氏2", "蔬菜3",
  4. "水果3", "姓氏3" };
  5. String name1[] = { "萝卜", "大葱", "茄子", "大蒜", "生姜", "萝卜", "大葱", "茄子",
  6. "大蒜", "生姜", "萝卜", "大葱" };
  7. String name2[] = { "苹果", "梨", "香蕉", "西瓜", "橘子", "大枣", "菠萝", "红提", "葡萄",
  8. "樱桃", "椰子" };
  9. String name3[] = { "郑", "王", "伊", "荆", "汤", "王", "孙", "李", "钱", "赵",
  10. "祁", "韦", "宏" };
  11. for (int i = 0; i < name1.length; i++) {
  12. lists.add(new BaseData(name1[i] + 1, i, title[0]));
  13. }
  14. for (int i = 0; i < name2.length; i++) {
  15. lists.add(new BaseData(name2[i] + 1, i, title[1]));
  16. }
  17. for (int i = 0; i < name3.length; i++) {
  18. lists.add(new BaseData(name3[i] + 1, i, title[2]));
  19. }
  20. for (int i = 0; i < name1.length; i++) {
  21. lists.add(new BaseData(name1[i] + 2, i, title[3]));
  22. }
  23. for (int i = 0; i < name2.length; i++) {
  24. lists.add(new BaseData(name2[i] + 2, i, title[4]));
  25. }
  26. for (int i = 0; i < name3.length; i++) {
  27. lists.add(new BaseData(name3[i] + 2, i, title[5]));
  28. }
  29. for (int i = 0; i < name1.length; i++) {
  30. lists.add(new BaseData(name1[i] + 3, i, title[6]));
  31. }
  32. for (int i = 0; i < name2.length; i++) {
  33. lists.add(new BaseData(name2[i] + 3, i, title[7]));
  34. }
  35. for (int i = 0; i < name3.length; i++) {
  36. lists.add(new BaseData(name3[i] + 3, i, title[8]));
  37. }
  39. //假数据创建的方式比较low,大家不喜勿喷
  41. //看下边这个集合,这个集合是右边所有要显示标题的条目的position
  43. ArrayList<String> showTitle = new ArrayList<String>();
  44. for (int i = 0; i < lists.size(); i++) {
  45. if (i == 0) {//第一个必须显示
  46. showTitle.add(i + "");
  47. } else if (!TextUtils.equals(lists.get(i).getTitle(),
  48. lists.get(i - 1).getTitle())) {//如果跟上一个条目的type不一样就必须显示
  49. showTitle.add(i + "");
  50. }
  51. }
  52. }
  54. //这个集合也就是就是左边和右边类型联系的桥梁</span>


2.初始化布局,我用的xutils的注解

[java] view plain copy
  1. <span style="font-size:14px;"> @ViewInject(R.id.lv_left)
  2. private ListView lv_left;
  4. @ViewInject(R.id.lv_Right)
  5. private ListView lv_Right;
  7. @ViewInject(R.id.tv_title)
  8. private TextView tv_title;
  10. //但不要忘记在onCreate方法ViewUtils.inject(this);
  12. leftAdapter = new LeftAdapter(context);
  13. lv_left.setAdapter(leftAdapter);
  15. rightAdapter = new RightAdapter(context);
  16. lv_Right.setAdapter(rightAdapter);
  17. rightAdapter.updateData(lists);// 将数据源传递给Listview
  19. tv_title.setText(lists.get(0).getTitle());// 主标题栏设置默认初始值</span>


3.先看右边的Listview的滚动监听事件

[java] view plain copy
  1. <span style="font-size:14px;">lv_Right.setOnScrollListener(new OnScrollListener() {
  3. @Override
  4. public void onScroll(AbsListView view, int firstVisibleItem,
  5. int visibleItemCount, int totalItemCount) {
  6. int currentPosition = showTitle.indexOf(firstVisibleItem + "");//当前选中的一级条目的position
  8. //firstVisibleItem是右边Listview当前第一个可见条目的position 根据//showTitle.indexOf(firstVisibleItem + "")可以得到这个数字在showTitle集合中的排序(是第几个),而这个排序刚好就是
  10. //左边Listview当前所选中的条目的position 这样我们就能根据左边的类型判断右边的类型了
  12. // updateLeftListview(firstVisibleItem, currentPosition);//这个方法下面会说 是一个抽出来的方法 左边//Listview的点击事件也会用到
  14. }
  16. @Override
  17. public void onScrollStateChanged(AbsListView view, int scrollState) {
  18. }
  20. });</span>


4.左边Listview的点击事件

[java] view plain copy
  1. <span style="font-size:14px;">lv_left.setOnItemClickListener(new OnItemClickListener() {
  3. @Override
  4. public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
  5. long arg3) {
  6. int firstVisibleItem = lv_Right.getFirstVisiblePosition();
  7. //右边Listview当前第一个可见条目的position
  8. updateLeftListview(firstVisibleItem, arg2);
  9. lv_Right.setSelection(Integer.parseInt(showTitle.get(arg2)));
  10. //arg2是点击(选择)左边条目的第几个
  11. //根据这个数字我们就能通过Integer.parseInt(showTitle.get(arg2))得到在点击左边后应该跳转到右边第几个条目
  12. // 通过etSelection方法跳转
  13. }
  14. });</span>


5.updateLeftListview方法


[java] view plain copy
  1. <span style="font-size:14px;"> /**
  2. * 更新左边Listview字体颜色 并且更改主标题的内容
  3. *
  4. * @param firstVisibleItem
  5. * 右边当前第一个可见的条目position
  6. * @param currentPosition
  7. * 左边listview当前被点击或者要显示为红色的条目position
  8. */
  9. private void updateLeftListview(int firstVisibleItem, int currentPosition) {
  10. if (showTitle.contains(firstVisibleItem + "")) {//右边的Listview滑动到这firstVisibleItem这个条目时
  11. // 而showTitle中包含firstVisibleItem 那么这个时候我们就需要将主标题的内容修改和firstVisibleItem的标题一样
  12. // 并且左边Listview需要更改颜色的条目(点击需要更改或者右边滑动应该改变的textView)的字体颜色改变掉
  14. tv_title.setText(lists.get(firstVisibleItem).getTitle());//将主标题的内容修改和firstVisibleItem的标题一样
  15. TextView lasTextView = (TextView) lv_left
  16. .findViewWithTag(lastPosition);
  17. if (lasTextView != null) {//在右边Listview第一次加载过程中会一直调用监听中的onscroll 这时的textView可能为空
  18. lasTextView.setTextColor(Color.BLACK);//先将上一个textView字体的颜色改成黑色
  19. }
  20. TextView currenTextView = (TextView) lv_left
  21. .findViewWithTag(currentPosition);
  22. if (currenTextView != null) {//再将当前要改变的extView字体的颜色改成红色
  23. currenTextView.setTextColor(Color.RED);
  24. }
  25. lastPosition = currentPosition;
  27. }
  28. }</span>


到这大家应该大概明白左边点击切换右边,右边滑动切换左边是怎么实现的了吧

这里是源码的下载地址http://download.csdn.net/detail/jeff169/9520261


回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16级独孤
匿名技术用户

积分:7942463
帖子:1588486
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP