实现类似于大众点评客户端的横向listview二级列表

这种横向的listview二级列表在手机软件上还不太常见,但是使用过平板的都应该知道,在平板上市比较常见的。可能是因为平板屏幕比较大,而且也能展现更多的内容。

下面来看一下我的实现步骤。

首先自定义一个listview,代码如下:

  1. public class MyListView extends ListView implements Runnable {
  2. private float mLastDownY = 0f;
  3. private int mDistance = 0;
  4. private int mStep = 10;
  5. private boolean mPositive = false;
  6. public MyListView (Context context, AttributeSet attrs) {
  7. super(context, attrs);
  8. }
  9. public MyListView (Context context, AttributeSet attrs, int defStyle) {
  10. super(context, attrs, defStyle);
  11. }
  12. public MyListView (Context context) {
  13. super(context);
  14. }
  15. @Override
  16. public boolean onTouchEvent(MotionEvent event) {
  17. switch (event.getAction()) {
  18. case MotionEvent.ACTION_DOWN:
  19. if (mLastDownY == 0f && mDistance == 0) {
  20. mLastDownY = event.getY();
  21. return true;
  22. }
  23. break;
  24. case MotionEvent.ACTION_CANCEL:
  25. break;
  26. case MotionEvent.ACTION_UP:
  27. if (mDistance != 0) {
  28. mStep = 1;
  29. mPositive = (mDistance >= 0);
  30. this.post(this);
  31. return true;
  32. }
  33. mLastDownY = 0f;
  34. mDistance = 0;
  35. break;
  36. case MotionEvent.ACTION_MOVE:
  37. if (mLastDownY != 0f) {
  38. mDistance = (int) (mLastDownY - event.getY());
  39. if ((mDistance < 0 && getFirstVisiblePosition() == 0 && getChildAt(0).getTop() == 0) || (mDistance > 0 && getLastVisiblePosition() == getCount() - 1)) {
  40. mDistance /= 2;
  41. scrollTo(0, mDistance);
  42. return true;
  43. }
  44. }
  45. mDistance = 0;
  46. break;
  47. }
  48. return super.onTouchEvent(event);
  49. }
  50. public void run() {
  51. mDistance += mDistance > 0 ? -mStep : mStep;
  52. scrollTo(0, mDistance);
  53. if ((mPositive && mDistance <= 0) || (!mPositive && mDistance >= 0)) {
  54. scrollTo(0, 0);
  55. mDistance = 0;
  56. mLastDownY = 0f;
  57. return;
  58. }
  59. mStep += 1;
  60. this.postDelayed(this, 10);
  61. }
  62. }

然后看一下xml的布局:

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:orientation="horizontal"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent" >
  6. <com.example.multilistview.MyListView
  7. android:id="@+id/listView"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:layout_weight="1"
  11. android:choiceMode="singleChoice"
  12. android:scrollbars="none"
  13. android:divider="@drawable/listitem_divide"
  14. android:listSelector="#00000000"
  15. android:background="#e4e3de"
  16. >
  17. </com.example.multilistview.MyListView>
  18. <com.example.multilistview.MyListView
  19. android:id="@+id/subListView"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:layout_weight="1"
  23. android:background="#e4e3de"
  24. >
  25. </com.example.multilistview.MyListView>
  26. </LinearLayout>

两个自定义的listview  横向布局,然后是父listview的适配器

  1. public class MyAdapter extends BaseAdapter {
  2. Context context;
  3. LayoutInflater inflater;
  4. String [] foods;
  5. int last_item;
  6. int [] images;
  7. private int selectedPosition = -1;
  8. public MyAdapter(Context context,String [] foods,int[] images){
  9. this.context = context;
  10. this.foods = foods;
  11. this.images = images;
  12. inflater=LayoutInflater.from(context);
  13. }
  14. @Override
  15. public int getCount() {
  16. // TODO Auto-generated method stub
  17. return foods.length;
  18. }
  19. @Override
  20. public Object getItem(int position) {
  21. // TODO Auto-generated method stub
  22. return position;
  23. }
  24. @Override
  25. public long getItemId(int position) {
  26. // TODO Auto-generated method stub
  27. return position;
  28. }
  29. @Override
  30. public View getView(int position, View convertView, ViewGroup parent) {
  31. // TODO Auto-generated method stub
  32. ViewHolder  holder = null;
  33. if(convertView==null){
  34. convertView = inflater.inflate(R.layout.mylist_item, null);
  35. holder = new ViewHolder();
  36. holder.textView =(TextView)convertView.findViewById(R.id.textview);
  37. holder.imageView =(ImageView)convertView.findViewById(R.id.imageview);
  38. holder.layout=(LinearLayout)convertView.findViewById(R.id.colorlayout);
  39. convertView.setTag(holder);
  40. }
  41. else{
  42. holder=(ViewHolder)convertView.getTag();
  43. }
  44. // 设置选中效果
  45. if(selectedPosition == position)
  46. {
  47. holder.textView.setTextColor(Color.BLUE);
  48. holder.layout.setBackgroundColor(Color.LTGRAY);
  49. } else {
  50. holder.textView.setTextColor(Color.WHITE);
  51. holder.layout.setBackgroundColor(Color.TRANSPARENT);
  52. }
  53. holder.textView.setText(foods[position]);
  54. holder.textView.setTextColor(Color.BLACK);
  55. holder.imageView.setBackgroundResource(images[position]);
  56. return convertView;
  57. }
  58. public static class ViewHolder{
  59. public TextView textView;
  60. public ImageView  imageView;
  61. public LinearLayout layout;
  62. }
  63. public void setSelectedPosition(int position) {
  64. selectedPosition = position;
  65. }
  66. }

对应的 item布局:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/colorlayout"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent" >
  6. <ImageView
  7. android:id="@+id/imageview"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:layout_marginLeft="10dip"
  11. android:layout_marginTop="5dip"
  12. />
  13. <TextView
  14. android:id="@+id/textview"
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:text=""
  18. android:textSize="16dip"
  19. android:layout_marginTop="8dip"
  20. android:layout_marginLeft="8dip"
  21. android:layout_marginBottom="8dip"/>
  22. <!--  android:background="@drawable/selector"  自定义listview 样式-->
  23. </LinearLayout>

然后是子适配器代码:

  1. public class SubAdapter extends BaseAdapter {
  2. Context context;
  3. LayoutInflater layoutInflater;
  4. String[][] cities;
  5. public int foodpoition;
  6. public SubAdapter(Context context, String[][] cities,int position) {
  7. this.context = context;
  8. this.cities = cities;
  9. layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  10. this.foodpoition = position;
  11. }
  12. @Override
  13. public int getCount() {
  14. // TODO Auto-generated method stub
  15. return cities.length;
  16. }
  17. @Override
  18. public Object getItem(int position) {
  19. // TODO Auto-generated method stub
  20. return getItem(position);
  21. }
  22. @Override
  23. public long getItemId(int position) {
  24. // TODO Auto-generated method stub
  25. return position;
  26. }
  27. @Override
  28. public View getView(int position, View convertView, ViewGroup parent) {
  29. // TODO Auto-generated method stub
  30. ViewHolder viewHolder = null;
  31. final int location=position;
  32. if (convertView == null) {
  33. convertView = layoutInflater.inflate(R.layout.sublist_item, null);
  34. viewHolder = new ViewHolder();
  35. viewHolder.textView = (TextView) convertView
  36. .findViewById(R.id.textview1);
  37. convertView.setTag(viewHolder);
  38. } else {
  39. viewHolder = (ViewHolder) convertView.getTag();
  40. }
  41. viewHolder.textView.setText(cities[foodpoition][position]);
  42. viewHolder.textView.setTextColor(Color.BLACK);
  43. return convertView;
  44. }
  45. public static class ViewHolder {
  46. public TextView textView;
  47. }
  48. }

对应的xml布局:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. >
  6. <TextView
  7. android:id="@+id/textview1"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:text="aaaaa"
  11. android:textSize="16dip"
  12. android:layout_marginTop="10dip"
  13. android:layout_marginLeft="8dip"
  14. android:layout_marginBottom="8dip"/>
  15. </LinearLayout>

最后看下主activity的实现代码

  1. public class MainActivity extends Activity {
  2. private MyListView listView;
  3. private MyListView subListView;
  4. private MyAdapter myAdapter;
  5. private SubAdapter subAdapter;
  6. String cities[][] = new String[][] {
  7. new String[] {"全部美食", "本帮江浙菜", "川菜", "粤菜", "湘菜","东北菜","台湾菜","新疆/清真","素菜","火锅","自助餐","小吃快餐","日本","韩国料理",
  8. "东南亚菜","西餐","面包甜点","其他"},
  9. new String[] {"全部休闲娱乐","咖啡厅","酒吧","茶馆","KTV","电影院","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  10. "DIY手工坊","桌球馆","桌面游戏","更多休闲娱乐"},
  11. new String[] {"全部购物", "综合商场", "服饰鞋包", "运动户外","珠宝饰品","化妆品","数码家电","亲子购物","家居建材"
  12. ,"书店","书店","眼镜店","特色集市","更多购物场所","食品茶酒","超市/便利店","药店"},
  13. new String[] {"全部休闲娱乐","咖啡厅","酒吧","茶馆","KTV","电影院","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  14. "DIY手工坊","桌球馆","桌面游戏","更多休闲娱乐"},
  15. new String[] {"全","咖啡厅","酒吧","茶馆","KTV","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  16. "DIY手工坊","桌球馆","桌面游戏","更多休闲娱乐"},
  17. new String[] {"全部","咖啡厅","酒吧","茶馆","电影院","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  18. "DIY手工坊","桌球馆","桌面游戏","更多休闲娱乐"},
  19. new String[] {"全部休","咖啡厅","酒吧","茶馆","KTV","电影院","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  20. "DIY手工坊","桌球馆","桌面游戏","更多休闲娱乐"},
  21. new String[] {"全部休闲","咖啡厅","酒吧","茶馆","KTV","电影院","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  22. "DIY手工坊","桌球馆","桌面游戏","更多休闲娱乐"},
  23. new String[] {"全部休闲娱","咖啡厅","酒吧","茶馆","KTV","电影院","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  24. "DIY手工坊","桌球馆","桌面游戏"},
  25. new String[] {"全部休闲娱乐","咖啡厅","酒吧","茶馆","KTV","电影院","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  26. "DIY手工坊","桌球馆","桌面游戏","更多休闲娱乐"},
  27. new String[] {"全部休闲aaa","咖啡厅","酒吧","茶馆","KTV","电影院","游乐游艺","公园","景点/郊游","洗浴","足浴按摩","文化艺术",
  28. "DIY手工坊","桌球馆","桌面游戏"},
  29. };
  30. String foods[] =new String []{"全部频道","美食","休闲娱乐","购物","酒店","丽人","运动健身","结婚","亲子","爱车","生活服务"};
  31. int images[] = new int[]{R.drawable.ic_category_0,R.drawable.ic_category_10,R.drawable.ic_category_30,R.drawable.ic_category_20
  32. ,R.drawable.ic_category_60,R.drawable.ic_category_50,R.drawable.ic_category_45,R.drawable.ic_category_50,R.drawable.ic_category_70,
  33. R.drawable.ic_category_65,R.drawable.ic_category_80};
  34. @Override
  35. public void onCreate(Bundle savedInstanceState) {
  36. super.onCreate(savedInstanceState);
  37. setContentView(R.layout.activity_main);
  38. init();
  39. myAdapter=new MyAdapter(getApplicationContext(), foods, images);
  40. listView.setAdapter(myAdapter);
  41. selectDefult();
  42. listView.setOnItemClickListener(new OnItemClickListener() {
  43. @Override
  44. public void onItemClick(AdapterView<?> arg0, View arg1, int position,
  45. long arg3) {
  46. // TODO Auto-generated method stub
  47. final int location=position;
  48. myAdapter.setSelectedPosition(position);
  49. myAdapter.notifyDataSetInvalidated();
  50. subAdapter=new SubAdapter(getApplicationContext(), cities, position);
  51. subListView.setAdapter(subAdapter);
  52. subListView.setOnItemClickListener(new OnItemClickListener() {
  53. @Override
  54. public void onItemClick(AdapterView<?> arg0, View arg1,
  55. int position, long arg3) {
  56. // TODO Auto-generated method stub
  57. Toast.makeText(getApplicationContext(), cities[location][position], Toast.LENGTH_SHORT).show();
  58. }
  59. });
  60. }
  61. });
  62. }
  63. private void init(){
  64. listView=(MyListView) findViewById(R.id.listView);
  65. subListView=(MyListView) findViewById(R.id.subListView);
  66. }
  67. private void selectDefult(){
  68. final int location=0;
  69. myAdapter.setSelectedPosition(0);
  70. myAdapter.notifyDataSetInvalidated();
  71. subAdapter=new SubAdapter(getApplicationContext(), cities, 0);
  72. subListView.setAdapter(subAdapter);
  73. subListView.setOnItemClickListener(new OnItemClickListener() {
  74. @Override
  75. public void onItemClick(AdapterView<?> arg0, View arg1,
  76. int position, long arg3) {
  77. // TODO Auto-generated method stub
  78. Toast.makeText(getApplicationContext(), cities[location][position], Toast.LENGTH_SHORT).show();
  79. }
  80. });
  81. }
  82. }

默认我选中了第0个,下面看一下运行效果:

【转】http://blog.csdn.net/wangkuifeng0118/article/details/8446661

二级横向菜单实现——ListView的更多相关文章

  1. DIV+CSS制作二级横向弹出菜单,略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  2. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  3. Ajax实现动态的二级级联菜单

    今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...

  4. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 纯CSS二级纵向菜单

    纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...

  6. RDIFramework.NET V3.3 Web框架主界面新增横向菜单功能

    功能描述 响应重多客户的要求与心声,RDIFramework.NET框架Web版本主界面新增横向菜单功能.横向菜单更加直观,用户可操作与展示的空间更多,符合实际应用要求. 一.效果展示 最终界面效果: ...

  7. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

  8. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  9. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

随机推荐

  1. MaterialWidgetLibrary 学习

    studio项目地址:https://github.com/keithellis/MaterialWidget 修改后的eclipse项目地址: 修改后的eclipse项目 Demo地址: activ ...

  2. JavaBean,List,Map转成json格式

    public class User { private String username; private String password; public String getUsername() { ...

  3. PHPer转战Android的学习过程以及Android学习

    原文作者: eoeadmin原文地址: http://my.eoe.cn/shuhai/archive/19684.html-------------------------------------- ...

  4. BZOJ 1196 二分答案+并查集

    http://www.lydsy.com/JudgeOnline/problem.php?id=1196 题目大意:n个城市,m-1条路,每条路有一级公路和二级公路之分,你要造n-1条路,一级公路至少 ...

  5. Super Mario

    Super Mario Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit ...

  6. bLock 回调 就是这么简单!

    转载自:http://blog.csdn.net/mobanchengshuang/article/details/11751671 我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数 ...

  7. Activity与Service之间交互并播放歌曲的实现代码

    Activity与Service之间交互并播放歌曲,为了方便,我把要播放的歌曲定死了,大家可以灵活改进 MService: 复制代码代码如下: package com.tiantian.test;im ...

  8. SpringMvc MultipartFile 图片文件上传

    spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipar ...

  9. Codeforces Round #368 (Div. 2)D. Persistent Bookcase DFS

    题目链接:http://codeforces.com/contest/707/my 看了这位大神的详细分析,一下子明白了.链接:http://blog.csdn.net/queuelovestack/ ...

  10. fsck害了我很久了,必须关掉,因为他每次打卡都要推迟数十分钟。

    http://crashmag.net/disable-filesystem-check-fsck-at-boot-time Disable the filesystem check (fsck) a ...