Chinaunix首页 | 论坛 | 博客

木水川

首页　| 　博文目录　| 　关于我

云少嘎嘎嘎

  • 博客访问： 1566766
  • 博文数量： 113
  • 博客积分： 3526
  • 博客等级： 中校
  • 技术积分： 1815
  • 用 户 组： 普通用户
  • 注册时间： 2009-09-08 09:46
个人简介

记录总结自己的工作

文章分类

全部博文（113）

文章存档

2015年（19）

2014年（10）

2013年（6）

2012年（16）

2011年（24）

2010年（21）

2009年（17）

我的朋友
最近访客
推荐博文
相关博文
android中用ExpandableListView实现三级扩展列表（附源码）

分类： Android平台

2014-02-28 10:02:49

       工作中遇到一个选择车型的问题，需要在扩展列表中选择车辆品牌->车型->年款，所以必须得使用三级的扩展列表来实现，而且第三级还得使用GridView来展示。下面就一步步来吧。


       1.定义需要使用的车型类，每个车辆品牌下面包含n个车型，每个车型下面包含n个年款

点击(此处)折叠或打开

  1. /**
  2.  * 汽车的品牌类
  3.  *
  4.  * @author liyanshun 2014-2-21
  5.  */
  6. public class CarBrand {
  7.     /**
  8.      * 汽车的品牌名字
  9.      */
  10.     public String mBrandName;
  11.     public String mSortLetters;
  12.     /** 该品牌下包含的汽车类型 */
  13.     public ArrayList<CarStyle> mCarStyleList;
  14. }

  16. /**
  17.  * 汽车车类型
  18.  *
  19.  * @author liyanshun 2014-2-26
  20.  */
  21. public class CarStyle {
  22.     /** 汽车的类型名 */
  23.     public String mStyleName;
  24.     /** 该类型下包含的年款 */
  25.     public ArrayList<String> mModelList;
  26. }

      2.列表要可以按照首字母快速定位，这个功能参考了别人的实现，详情见这篇博客：http://blog.csdn.net/xiaanming/article/details/12684155

      3.实现第一级扩展列表。第一级比较好实现，只用使用一个ExpandableListView，并定义Adapter就可以了。需要注意的是每个品牌下面的子View个数即为其包含的车型个数，而每个车型都是一个新                                   的ExpandableListView。当然也可以使用一个ExpandableListView来展示所有的车型，但是那样的话会导致点击靠下的车型时，其后面的车型可能会被后一项的品牌给覆盖掉。所以在这里使用多了多                                个ExpandableListView。Adapter的实现如下：


点击(此处)折叠或打开

  1. /**
  2.  * 用来选择车辆品牌并且带字母排序的adapter
  3.  *
  4.  * @author liyanshun 2014-2-21
  5.  */
  6. public class CarBrandAdapter extends BaseExpandableListAdapter implements
  7.         SectionIndexer {
  8.     private List<CarBrand> mBrandList = null;
  9.     private Context mContext;

  11.     public CarBrandAdapter(Context mContext, List<CarBrand> list) {
  12.         this.mContext = mContext;
  13.         this.mBrandList = list;
  14.     }

  16.     /**
  17.      * 当ListView数据发生变化时,调用此方法来更新ListView
  18.      *
  19.      * @param mBrandList
  20.      */
  21.     public void updateListView(List<CarBrand> list) {
  22.         this.mBrandList = list;
  23.         notifyDataSetChanged();
  24.     }

  26.     public int getCount() {
  27.         return this.mBrandList.size();
  28.     }

  30.     public Object getItem(int position) {
  31.         return mBrandList.get(position);
  32.     }

  34.     public long getItemId(int position) {
  35.         return position;
  36.     }

  38.     final static class ViewHolder {
  39.         TextView tvLetter;
  40.         TextView tvTitle;
  41.         ImageView carBrand;
  42.         ImageView close;
  43.         View body;
  44.         View titleBar;
  45.     }

  47.     final static class CarStyleViewHolder {
  48.         ExpandableListView styleList;
  49.     }

  51.     /**
  52.      * 根据ListView的当前位置获取分类的首字母的Char ascii值
  53.      */
  54.     public int getSectionForPosition(int position) {
  55.         return mBrandList.get(position).mSortLetters.charAt(0);
  56.     }

  58.     /**
  59.      * 根据分类的首字母的Char ascii值获取其第一次出现该首字母的位置
  60.      */
  61.     public int getPositionForSection(int section) {
  62.         for (int i = 0; i < getCount(); i++) {
  63.             String sortStr = mBrandList.get(i).mSortLetters;
  64.             char firstChar = sortStr.toUpperCase().charAt(0);
  65.             if (firstChar == section) {
  66.                 return i;
  67.             }
  68.         }

  70.         return -1;
  71.     }

  73.     /**
  74.      * 提取英文的首字母，非英文字母用#代替。
  75.      *
  76.      * @param str
  77.      * @return
  78.      */
  79.     private String getAlpha(String str) {
  80.         String sortStr = str.trim().substring(0, 1).toUpperCase();
  81.         // 正则表达式，判断首字母是否是英文字母
  82.         if (sortStr.matches("[A-Z]")) {
  83.             return sortStr;
  84.         } else {
  85.             return "#";
  86.         }
  87.     }

  89.     @Override
  90.     public Object[] getSections() {
  91.         return null;
  92.     }

  94.     @Override
  95.     public int getGroupCount() {
  96.         return mBrandList == null ? 0 : mBrandList.size();
  97.     }

  99.     @Override
  100.     public int getChildrenCount(int groupPosition) {
  101.         return mBrandList == null ? 0
  102.                 : (mBrandList.get(groupPosition) == null ? 0 : (mBrandList
  103.                         .get(groupPosition).mCarStyleList == null ? 0
  104.                         : mBrandList.get(groupPosition).mCarStyleList.size()));
  105.     }

  107.     @Override
  108.     public Object getGroup(int groupPosition) {
  109.         return mBrandList.get(groupPosition);
  110.     }

  112.     @Override
  113.     public Object getChild(int groupPosition, int childPosition) {
  114.         return mBrandList.get(groupPosition).mCarStyleList.get(childPosition);
  115.     }

  117.     @Override
  118.     public long getGroupId(int groupPosition) {
  119.         return groupPosition;
  120.     }

  122.     @Override
  123.     public long getChildId(int groupPosition, int childPosition) {
  124.         return groupPosition;
  125.     }

  127.     @Override
  128.     public boolean hasStableIds() {
  129.         return false;
  130.     }

  132.     @Override
  133.     public View getGroupView(int groupPosition, boolean isExpanded,
  134.             View convertView, ViewGroup parent) {
  135.         ViewHolder viewHolder = null;
  136.         final CarBrand mContent = mBrandList.get(groupPosition);
  137.         if (convertView == null) {
  138.             viewHolder = new ViewHolder();
  139.             convertView = LayoutInflater.from(mContext).inflate(
  140.                     R.layout.car_brand_item, null);
  141.             viewHolder.tvTitle = (TextView) convertView
  142.                     .findViewById(R.id.title);
  143.             viewHolder.tvLetter = (TextView) convertView
  144.                     .findViewById(R.id.catalog);
  145.             viewHolder.carBrand = (ImageView) convertView
  146.                     .findViewById(R.id.item_img);
  147.             viewHolder.close = (ImageView) convertView
  148.                     .findViewById(R.id.close_img);
  149.             viewHolder.body = convertView.findViewById(R.id.item_body);
  150.             viewHolder.titleBar = convertView.findViewById(R.id.title_bar);
  151.             convertView.setTag(viewHolder);
  152.         } else {
  153.             viewHolder = (ViewHolder) convertView.getTag();
  154.         }

  156.         // 根据position获取分类的首字母的Char ascii值
  157.         int section = getSectionForPosition(groupPosition);

  159.         // 如果当前位置等于该分类首字母的Char的位置 ，则认为是第一次出现
  160.         if (groupPosition == getPositionForSection(section)) {
  161.             viewHolder.titleBar.setVisibility(View.VISIBLE);
  162.             viewHolder.tvLetter.setText(mContent.mSortLetters);
  163.         } else {
  164.             viewHolder.titleBar.setVisibility(View.GONE);
  165.         }

  167.         viewHolder.tvTitle
  168.                 .setText(this.mBrandList.get(groupPosition).mBrandName);

  170.         if (isExpanded) {
  171.             viewHolder.close.setVisibility(View.VISIBLE);
  172.         } else {
  173.             viewHolder.close.setVisibility(View.GONE);
  174.         }

  176.         return convertView;

  178.     }

  180.     @Override
  181.     public View getChildView(int groupPosition, int childPosition,
  182.             boolean isLastChild, View convertView, ViewGroup parent) {
  183.         CarStyleAdapter carStyleAdapter = new CarStyleAdapter(mContext,
  184.                 mBrandList.get(groupPosition).mCarStyleList.get(childPosition));
  185.         CustExpListview SecondLevelexplv = new CustExpListview(mContext);
  186.         SecondLevelexplv.setAdapter(carStyleAdapter);
  187.         SecondLevelexplv.setGroupIndicator(null);
  188.         return SecondLevelexplv;
  189.     }

  191.     @Override
  192.     public boolean isChildSelectable(int groupPosition, int childPosition) {
  193.         return true;
  194.     }

  196.     public class CustExpListview extends ExpandableListView {

  198.         public CustExpListview(Context context) {
  199.             super(context);
  200.         }

  202.         protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  203.             widthMeasureSpec = MeasureSpec.makeMeasureSpec(960,
  204.                     MeasureSpec.AT_MOST);
  205.             heightMeasureSpec = MeasureSpec.makeMeasureSpec(600,
  206.                     MeasureSpec.AT_MOST);
  207.             super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  208.         }
  209.     }
  210. }
      
     4 .将这个Adapter加到ExpandableListView中就可以实现二级的扩展菜单了，下面来实现带GridView的三级扩展菜单。与二级的不同，三级的GridView必须使用一个来实现，也就是说
     每个车型下面的n个年款使用一个GridView来展示。所以需要注意的就是返回ChildCount的时候只能返回1。这个Adapter的实现如下：


点击(此处)折叠或打开

  1. /**
  2.  * 显示车型和年款的adapter
  3.  *
  4.  * @author liyanshun 2014-2-27
  5.  */
  6. public class CarStyleAdapter extends BaseExpandableListAdapter implements
  7.         OnItemClickListener {
  8.     private static final String TAG = "CarStyleAdapter";
  9.     private CarStyle mCarStyle = null;
  10.     private Context mContext;

  12.     public CarStyleAdapter(Context mContext, CarStyle carStyle) {
  13.         this.mContext = mContext;
  14.         this.mCarStyle = carStyle;
  15.     }

  17.     @Override
  18.     public int getGroupCount() {
  19.         return mCarStyle == null ? 0 : 1;
  20.     }

  22.     @Override
  23.     public int getChildrenCount(int groupPosition) {
  24.         //只显示一个Child，否则会造成GridView的重复显示
  25.         return mCarStyle == null ? 0 : (mCarStyle.mModelList == null ? 0 : 1);
  26.     }

  28.     @Override
  29.     public Object getGroup(int groupPosition) {
  30.         return mCarStyle;
  31.     }

  33.     @Override
  34.     public Object getChild(int groupPosition, int childPosition) {
  35.         return mCarStyle.mModelList.get(childPosition);
  36.     }

  38.     @Override
  39.     public long getGroupId(int groupPosition) {
  40.         return groupPosition;
  41.     }

  43.     @Override
  44.     public long getChildId(int groupPosition, int childPosition) {
  45.         return groupPosition;
  46.     }

  48.     @Override
  49.     public boolean hasStableIds() {
  50.         return false;
  51.     }

  53.     @Override
  54.     public View getGroupView(int groupPosition, boolean isExpanded,
  55.             View convertView, ViewGroup parent) {
  56.         Logger.d(TAG, "groupPosition:" + groupPosition);
  57.         ViewHolder viewHolder = null;
  58.         if (convertView == null) {
  59.             viewHolder = new ViewHolder();
  60.             convertView = LayoutInflater.from(mContext).inflate(
  61.                     R.layout.car_style_item, null);
  62.             viewHolder.tvTitle = (TextView) convertView
  63.                     .findViewById(R.id.style_name);
  64.             viewHolder.bottmLine = (View) convertView
  65.                     .findViewById(R.id.style_bottom_line);
  66.             viewHolder.styleArrow = (ImageView) convertView
  67.                     .findViewById(R.id.style_arrow);
  68.             viewHolder.closeView = (ImageView) convertView
  69.                     .findViewById(R.id.style_close_img);
  70.             convertView.setTag(viewHolder);
  71.         } else {
  72.             viewHolder = (ViewHolder) convertView.getTag();
  73.         }
  74.         viewHolder.tvTitle.setText(mCarStyle.mStyleName);
  75.         if (isExpanded) {
  76.             viewHolder.styleArrow.setVisibility(View.VISIBLE);
  77.             viewHolder.closeView.setVisibility(View.VISIBLE);
  78.         } else {
  79.             viewHolder.styleArrow.setVisibility(View.GONE);
  80.             viewHolder.closeView.setVisibility(View.GONE);
  81.         }
  82.         return convertView;
  83.     }

  85.     @Override
  86.     public View getChildView(int groupPosition, int childPosition,
  87.             boolean isLastChild, View convertView, ViewGroup parent) {
  88.         GridView gridView = null;
  89.         if (convertView == null) {
  90.             LayoutInflater layoutInflater = (LayoutInflater) mContext
  91.                     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  92.             convertView = layoutInflater.inflate(R.layout.car_model_grid, null);

  94.             gridView = (GridView) convertView.findViewById(R.id.gridview);
  95.             gridView.setNumColumns(2);// 设置每行列数
  96.             gridView.setGravity(Gravity.CENTER);// 位置居中
  97.             gridView.setHorizontalSpacing(10);// 水平间隔

  99.             gridView.setAdapter(new GridAdapter());

  101.             //计算并设置gridView的高度
  102.             final int rowHeightDp = 40;
  103.             final float ROW_HEIGHT = mContext.getResources()
  104.                     .getDisplayMetrics().density * rowHeightDp;
  105.             double size = mCarStyle.mModelList.size();
  106.             int rowCount = (int) Math.ceil(size/2);
  107.             final int GRID_HEIGHT = (int) (ROW_HEIGHT * rowCount);
  108.             gridView.getLayoutParams().height = GRID_HEIGHT;
  109.             gridView.setOnItemClickListener(this);
  110.         }

  112.         return convertView;

  114.     }

  116.     @Override
  117.     public boolean isChildSelectable(int groupPosition, int childPosition) {
  118.         return true;
  119.     }

  121.     final static class ViewHolder {
  122.         TextView tvTitle;
  123.         View bottmLine;
  124.         ImageView styleArrow;
  125.         ImageView closeView;
  126.     }

  128.     private class GridAdapter extends BaseAdapter {
  129.         @Override
  130.         public int getCount() {
  131.             return mCarStyle.mModelList.size();
  132.         }

  134.         @Override
  135.         public Object getItem(int position) {
  136.             return mCarStyle.mModelList.get(position);
  137.         }

  139.         @Override
  140.         public long getItemId(int position) {
  141.             return 0;
  142.         }

  144.         @Override
  145.         public View getView(int position, View convertView, ViewGroup parent) {
  146.             ViewHolder viewHolder = null;
  147.             if (convertView == null) {
  148.                 viewHolder = new ViewHolder();
  149.                 convertView = LayoutInflater.from(mContext).inflate(
  150.                         R.layout.car_model_item, null);
  151.                 viewHolder.tvTitle = (TextView) convertView
  152.                         .findViewById(R.id.name);
  153.                 convertView.setTag(viewHolder);
  154.             } else {
  155.                 viewHolder = (ViewHolder) convertView.getTag();
  156.             }
  157.             viewHolder.tvTitle.setText((mCarStyle.mModelList.get(position)));
  158.             return convertView;
  159.         }

  161.     }

  163.     @Override
  164.     public void onItemClick(AdapterView<?> parent, View view, int position,
  165.             long id) {
  166.         Toast.makeText(mContext, "" + position, Toast.LENGTH_SHORT).show();
  167.     }
  168. }

    5.好了，最重要的两个Adapter已经实现了，只需要将其加入了界面中就可以了。在这里我使用了一个fragment来进行展示：
   

点击(此处)折叠或打开

  1. /**
  2.  * 选择汽车品牌
  3.  *
  4.  * @author liyanshun 2014-2-21
  5.  */
  6. public class SelectBrandFragment extends FatherFragment implements
  7.         OnClickListener, OnItemClickListener {
  8.     private static final String TAG = "SelectBrandFragment";
  9.     private ExpandableListView mSortListView;
  10.     private SideBar mSideBar;
  11.     private TextView mDialog;
  12.     private CarBrandAdapter mAdapter;
  13.     /**
  14.      * 汉字转换成拼音的类
  15.      */
  16.     private CharacterParser characterParser;
  17.     private List<CarBrand> SourceDateList;

  19.     /**
  20.      * 根据拼音来排列ListView里面的数据类
  21.      */
  22.     private PinyinComparator pinyinComparator;

  24.     String[] data={"奥迪","宝马","奔驰","雪铁龙","大众","牧马人"};
  25.     @Override
  26.     public void onStart() {
  27.         super.onStart();
  28.         Logger.d(TAG,"onStart");
  29.         //已经设置过layout了，无需再次设定
  30.         if(mLayoutAdded){
  31.             return;
  32.         }
  33.         super.setLayout(R.layout.select_brand);
  34.         mSortListView = (ExpandableListView) mBodyView.findViewById(R.id.lv);
  35.         mSideBar = (SideBar) mBodyView.findViewById(R.id.sidrbar);
  36.         mDialog = (TextView) mBodyView.findViewById(R.id.dialog);
  37.         mSideBar.setTextView(mDialog);
  38.         mTitle.setText(R.string.select_brand);
  39.         mRightTitle.setText(R.string.jump);
  40.         mRightTitle.setOnClickListener(this);

  42.         // 实例化汉字转拼音类
  43.         characterParser = CharacterParser.getInstance();
  44.         pinyinComparator = new PinyinComparator();

  46.         mSortListView.setOnItemClickListener(this);
  47.         // 设置右侧触摸监听
  48.         mSideBar.setOnTouchingLetterChangedListener(new OnTouchingLetterChangedListener() {

  50.             @Override
  51.             public void onTouchingLetterChanged(String s) {
  52.                 // 该字母首次出现的位置
  53.                 int position = mAdapter.getPositionForSection(s.charAt(0));
  54.                 if (position != -1) {
  55.                     mSortListView.setSelection(position);
  56.                 }

  58.             }
  59.         });

  61.          SourceDateList = filledData(data);
  62. //        
  63. //        // 根据a-z进行排序源数据
  64.         Collections.sort(SourceDateList, pinyinComparator);
  65.         mAdapter = new CarBrandAdapter(mContext, SourceDateList);
  66. //        CarStyleAdapter carStyleAdapter=new CarStyleAdapter(mContext,SourceDateList.get(2).mCarStyleList);
  67.         mSortListView.setAdapter(mAdapter);
  68.     }

  70.     @Override
  71.     public void onClick(View v) {
  72.         int id = v.getId();
  73.         switch (id) {
  74.         case R.id.right_button:
  75.             Logger.d(TAG,"rightbutton");
  76.             break;
  77.         }

  79.     }

  81.     @Override
  82.     public void onItemClick(AdapterView<?> parent, View view, int position,
  83.             long id) {
  84.         Logger.d(TAG,"onItemClick:"+position);

  86.     }
  87.     
  88.     /**
  89.      * 为ListView填充数据
  90.      * @param date
  91.      * @return
  92.      */
  93.     private List<CarBrand> filledData(String [] date){
  94.         List<CarBrand> mBrandList = new ArrayList<CarBrand>();
  95.         for(int i=0; i<date.length; i++){
  96.             CarBrand carBrand = new CarBrand();
  97.             carBrand.mBrandName=date[i];
  98.             //汉字转换成拼音
  99.             String pinyin = characterParser.getSelling(date[i]);
  100.             String sortString = pinyin.substring(0, 1).toUpperCase();
  101.             
  102.             // 正则表达式，判断首字母是否是英文字母
  103.             if(sortString.matches("[A-Z]")){
  104.                 carBrand.mSortLetters=sortString.toUpperCase();
  105.             }else{
  106.                 carBrand.mSortLetters="#";
  107.             }
  108.             ArrayList<CarStyle> mStyleList = new ArrayList<CarStyle>();
  109.             for(int j=0;j<=i;j++){
  110.                 CarStyle carStyle=new CarStyle();
  111.                 carStyle.mStyleName=date[i]+"201"+j;
  112.                 ArrayList<String> mModelList = new ArrayList<String>();
  113.                 for(int k=0;k<=j;k++){
  114.                     mModelList.add(carStyle.mStyleName+":"+"手动款");
  115.                 }
  116.                 carStyle.mModelList=mModelList;
  117.                 mStyleList.add(carStyle);
  118.             }
  119.             carBrand.mCarStyleList=mStyleList;
  120.             mBrandList.add(carBrand);
  121.         }
  122.         return mBrandList;
  123.         
  124.     }
  125. }

      6.大功告成了，来看一下显示的效果吧。



源码又重新整理一下放在github上。














      
阅读(34020) | 评论(17) | 转发(1) |
1

上一篇：在android中进行视频的分割

下一篇：调整surfaceView播放视频时的显示比例

给主人留下些什么吧！~~

云少嘎嘎嘎2015-06-19 13:40:36

say_sorry：你好，我想问下，为什么第二级列表listView.setOnChildClickListener(new OnChildClickListener() 不起作用啊，急用呢，谢谢楼主

第二级只有一个child，也就是第三级的gridview，你的点击事件应该是被gridview里面的内容给消费了。不过我不明白你需要监听这个点击事件干嘛用呢？

回复 | 举报

say_sorry2015-06-18 10:14:16

你好，我想问下，为什么第二级列表listView.setOnChildClickListener(new OnChildClickListener() 不起作用啊，急用呢，谢谢楼主

回复 | 举报

第一伤心人2015-02-03 17:38:52

云少嘎嘎嘎：布局很简单啊，就几个textView而已

能否共享下代码？

回复 | 举报

云少嘎嘎嘎2015-02-03 17:37:05

第一伤心人：能否贴上布局文件

布局很简单啊，就几个textView而已

回复 | 举报

第一伤心人2015-02-03 16:02:03

能否贴上布局文件

回复 | 举报
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6