(转载)自定义ExpandableListView,实现二级列表效果

先看效果图:

上图是我们要实现的效果,那么现在我们开始着手去做,主要分为以下几步:

一丶我们需要根据效果图去思考该如何动手,从上图分析看,我们可以用一个相对布局RelativeLayout来完成group(一级item)的布局设计,至于child(二级item)的布局,我们可以用一个TextView来完成,当然,如果如要更复杂的效果可以参照一级item的布局方式进行。

以下是main.xml丶group.xml和child.xml的布局:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >
  <ExpandableListView 
    android:id="@+id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:cacheColorHint="#00000000"
    android:listSelector="#00000000" 
  >
</ExpandableListView>
</LinearLayout>

group.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" 
  android:id="@+id/group_layout">

<ImageView
    android:id="@+id/group_logo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerInParent="true"
    android:layout_marginLeft="10dp"
    android:contentDescription="@string/list_logo" />

<TextView
    android:id="@+id/group_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_toRightOf="@id/group_logo"
    android:textColor="#130c0e"
    android:textSize="18sp" />

<TextView
    android:id="@+id/group_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/group_title"
    android:layout_marginLeft="10dp"
    android:layout_toRightOf="@id/group_logo"
    android:textColor="#838B8B"
    android:textSize="15sp" />

<ImageView
    android:id="@+id/group_state"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerInParent="true"
    android:layout_marginRight="10dp"
    android:contentDescription="@string/list_state" />

</RelativeLayout>

child.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

<TextView
    android:id="@+id/child_text"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:layout_centerInParent="true"
    android:layout_marginTop="15dp"
    android:textColor="#130c0e"
    android:textSize="15sp" />

</RelativeLayout>

二、布局文件设置好以后,我们开始着手去实现代码,首先谈谈我在实现过程中遇到的问题:

一:在刚开始为二级item(expandableListView.setOnChildClickListener)设置点击事件时,自己思维进入了一个误区,刷新代码写错位置导致二级item不能实时表明选中状态,实验了一番发现自己脑子发抽,其实把代码转移到点击事件中就OK了。

二:为一级item设置点击事件时,刚开始想套用二级Item点击事件的方法去做,发现行不通后,自己实验了一番,定义了一个整型数组来存放对应groupPosition的点击次数,根据点击次数来设置状态图标,功能虽然实现了,但是感觉自己的这个方法不大实用,如果是动态加入就有点问题了,这个还希望各位看官给点建议。

好了,废话不多说了,下面是实现的代码,希望各位不吝指教:

/**
* 自定义ExpandableList列表类

* @author jgduan

*/
public class ExpandableList extends Activity {

// 这个数组是用来存储一级item的点击次数的,根据点击次数设置一级标签的选中、为选中状态
  private int[] group_checked = new int[]{0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};
  // 用来标识是否设置二級item背景色为绿色,初始值为-1既为选中状态
  private int child_groupId = -1;
  private int child_childId = -1;

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 隐藏标题
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    // 指定布局
    setContentView(R.layout.main);
    // 新建一个ExpandableListView
    ExpandableListView expandableListView = (ExpandableListView) findViewById(R.id.list);
    // 设置默认图标为不显示状态
    expandableListView.setGroupIndicator(null);
    // 为列表绑定数据源
    expandableListView.setAdapter(adapter);
    // 设置一级item点击的监听器
    expandableListView.setOnGroupClickListener(new OnGroupClickListener() {

@Override
    public boolean onGroupClick(ExpandableListView parent, View v,
    int groupPosition, long id) {
        group_checked[groupPosition] = group_checked[groupPosition]+1;
        // 刷新界面
        ((BaseExpandableListAdapter) adapter).notifyDataSetChanged();
        return false;
      }
    });

// 设置二级item点击的监听器
    expandableListView.setOnChildClickListener(new OnChildClickListener() {

@Override
      public boolean onChildClick(ExpandableListView parent, View v,
      int groupPosition, int childPosition, long id) {
        // 将被点击的一丶二级标签的位置记录下来
        child_groupId = groupPosition;
        child_childId = childPosition;
        // 刷新界面
        ((BaseExpandableListAdapter) adapter).notifyDataSetChanged();
        return false;
      }
  });
}

final ExpandableListAdapter adapter = new BaseExpandableListAdapter() {
  // 一级标签上的logo图片数据源
  int[] group_logo_array = new int[] { R.drawable.map,
  R.drawable.message, R.drawable.music, R.drawable.children };
  // 一级标签上的标题数据源
  private String[] group_title_arry = new String[] { "中医常识", "中医养生",
  "美容养颜", "育儿百科" };
  // 一级标签的描述文本数据源
  private String[] group_text_array = new String[] { "四诊法、穴位、经络等",
  "药膳食疗,安神醒脑等", "减肥、明目等", "关注幼儿保健" };
  // 子视图显示文字
  private String[][] child_text_array = new String[][] {
  { "孕吐怎么办", "新生儿黄疸的治疗", "婴儿吐奶怎么办", "小儿感冒咳嗽怎么办" },
  { "孕吐怎么办", "新生儿黄疸的治疗", "婴儿吐奶怎么办", "小儿感冒咳嗽怎么办" },
  { "孕吐怎么办", "新生儿黄疸的治疗", "婴儿吐奶怎么办", "小儿感冒咳嗽怎么办" },
  { "孕吐怎么办", "新生儿黄疸的治疗", "婴儿吐奶怎么办", "小儿感冒咳嗽怎么办" } };
  // 一级标签上的状态图片数据源
  int[] group_state_array = new int[] { R.drawable.group_down,
  R.drawable.group_up };

// 重写ExpandableListAdapter中的各个方法
  /**
  * 获取一级标签总数
  */
  @Override
  public int getGroupCount() {
    return group_text_array.length;
  }

/**
  * 获取一级标签内容
  */
  @Override
  public Object getGroup(int groupPosition) {
    return group_text_array[groupPosition];
  }

/**
  * 获取一级标签的ID
  */
  @Override
  public long getGroupId(int groupPosition) {
    return groupPosition;
  }

/**
  * 获取一级标签下二级标签的总数
  */
  @Override
  public int getChildrenCount(int groupPosition) {
    return child_text_array[groupPosition].length;
  }

/**
  * 获取一级标签下二级标签的内容
  */
  @Override
  public Object getChild(int groupPosition, int childPosition) {
    return child_text_array[groupPosition][childPosition];
  }

/**
  * 获取二级标签的ID
  */
  @Override
  public long getChildId(int groupPosition, int childPosition) {
    return childPosition;
  }

/**
  * 指定位置相应的组视图
  */
  @Override
  public boolean hasStableIds() {
    return true;
  }

/**
  * 对一级标签进行设置
  */
  @Override
  public View getGroupView(int groupPosition, boolean isExpanded,
  View convertView, ViewGroup parent) {
    // 为视图对象指定布局
    convertView = (RelativeLayout) RelativeLayout.inflate(
    getBaseContext(), R.layout.group, null);
    /**
    * 声明视图上要显示的控件
    */
    // 新建一个ImageView对象,用来显示一级标签上的logo图片
    ImageView group_logo = (ImageView) convertView
    .findViewById(R.id.group_logo);
    // 新建一个TextView对象,用来显示一级标签上的标题信息
    TextView group_title = (TextView) convertView
    .findViewById(R.id.group_title);
    // 新建一个TextView对象,用来显示一级标签上的大体描述的信息
    TextView group_text = (TextView) convertView
    .findViewById(R.id.group_text);
    // 新建一个ImageView对象,根据用户点击来标识一级标签的选中状态
    ImageView group_state = (ImageView) convertView
    .findViewById(R.id.group_state);
    /**
    * 设置相应控件的内容
    */
    // 设置要显示的图片
    group_logo.setBackgroundResource(group_logo_array[groupPosition]);
    // 设置标题上的文本信息
    group_title.setText(group_title_arry[groupPosition]);
    // 设置整体描述上的文本信息
    group_text.setText(group_text_array[groupPosition]);

if(group_checked[groupPosition] % 2 == 1){
      // 设置默认的图片是选中状态
      group_state.setBackgroundResource(group_state_array[1]);
    }else{
      for(int test : group_checked){
        if(test == 0 || test % 2 == 0){
          // 设置默认的图片是未选中状态
          group_state.setBackgroundResource(group_state_array[0]);
        }
      }
  }
  // 返回一个布局对象
  return convertView;
}

/**
  * 对一级标签下的二级标签进行设置
  */
  @Override
  public View getChildView(int groupPosition, int childPosition,
  boolean isLastChild, View convertView, ViewGroup parent) {
    // 为视图对象指定布局
    convertView = (RelativeLayout) RelativeLayout.inflate(
    getBaseContext(), R.layout.child, null);
    /**
    * 声明视图上要显示的控件
    */
    // 新建一个TextView对象,用来显示具体内容
    TextView child_text = (TextView) convertView
    .findViewById(R.id.child_text);
    /**
    * 设置相应控件的内容
    */
    // 设置要显示的文本信息
    child_text.setText(child_text_array[groupPosition][childPosition]);
    // 判断item的位置是否相同,如相同,则表示为选中状态,更改其背景颜色,如不相同,则设置背景色为白色
    if (child_groupId == groupPosition
    && child_childId == childPosition) {
      // 设置背景色为绿色
      convertView.setBackgroundColor(Color.GREEN);
    } else {
      // 设置背景色为白色
      convertView.setBackgroundColor(Color.WHITE);
    }
  // 返回一个布局对象
  return convertView;
}

/**
  * 当选择子节点的时候,调用该方法
  */
   @Override
   public boolean isChildSelectable(int groupPosition, int childPosition) {
       return true;
    }

};

}

}

标签: ExpandableListView自定义ExpandableListView二级ExpandableListViewExpandableListView自定义ExpandableListView的使用

好文要顶 关注我 收藏该文  

土鳖程序员
关注 - 1
粉丝 - 2

+加关注

1

0

?上一篇:【基础篇】Android中获取Drawable的方法

posted on 2013-09-29 15:03 土鳖程序员 阅读(2780) 评论(2)  编辑 收藏

评论

#1楼 2013-09-29 15:13 FXSOL UK

有用,不错

支持(0)反对(0)

回复引用

#2楼[楼主] 2013-09-29 15:16 土鳖程序员

@ FXSOL UK
如有遗漏还望多多指教

支持(0)反对(0)

回复引用

刷新评论刷新页面返回顶部

发表评论

昵称:

评论内容:

     

退出 订阅评论

[Ctrl+Enter快捷键提交]

【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【推荐】极光开发者服务平台,五大功能一站集齐
【推荐】腾讯云域名+云解析 限时折扣抓紧抢购
【推荐】阿里云“全民云计算”优惠升级
【推荐】一小时搭建人工智能应用,让技术更容易入门

最新IT新闻:
·  攻击者利用Android发动DDoS攻击
·  Facebook在巴西推出教学中心:面向企业家和程序员
·  “小朋友”画廊刷屏背后:带你认识保有原生力量的WABC和苗世明
·  顺丰控股:将会认真研究并积极参与中国铁路总公司的改革
·  Facebook“神童”将跳槽谷歌开发语音助手 年仅21岁
更多新闻...

最新知识库文章:

·  做到这一点,你也可以成为优秀的程序员
·  写给立志做码农的大学生
·  架构腐化之谜
·  学会思考,而不只是编程
·  编写Shell脚本的最佳实践

更多知识库文章...

Powered by: 
博客园 
Copyright ? 土鳖程序员

时间: 2024-08-06 02:18:21

(转载)自定义ExpandableListView,实现二级列表效果的相关文章

ExpandableListView控件实现二级列表

效果图如下: 二级列表附有点击事件. 1.布局文件: 此处加了一个自定义的导航RelativeLayout,记得注activity的时候添加 android:theme="@style/Theme.AppCompat.Light.NoActionBar" 去掉自带的导航. 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="ht

ExpandableListView二级列表

XMl 1 <RelativeLayout 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 too

ExpandableListView 安卓二级菜单

ExpandableListView可以显示一个视图垂直滚动显示两级列表中的条目,这不同于列表视图(ListView).ExpandableListView允许有两个层次:一级列表中有二级列表.比如在手机设置中,对于分类,有很好的效果.手机版QQ也是这样的效果. 使用ExpandableListView的整体思路 (1)给ExpandableListView设置适配器,那么必须先设置数据源. (2)数据源,就是此处的适配器类ExpandableAdapter,此方法继承了BaseExpandab

某网站品牌的列表效果(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>某网站品牌的列表效果</title> <script src="jquery-1.7.1.min.js" type

两个GridView之间数据转移,交互,实现拖拽,网易新闻列表效果实现

两个GridView之间数据转移,交互,实现拖拽,网易新闻列表效果实现 摘要 :android 高仿频道管理网易新闻. 新闻频道增删,排序,以及一些动画的实现 可拖动的GridView 地址  :  http://www.itnose.net/detail/6035345.html

Bootstrap提供了六种列表效果

列表--简介 在HTML文档中,列表结构主要有三种:有序列表.无序列表和定义列表.具体使用的标签说明如下: 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootstrap根据平时的使用情形提供了六种形式

(转载)c/c++优先级列表

注:文章转载于网络. C优先级列表 Precedence Operator Description Example Associativity 1 ()[]->.::++-- Grouping operatorArray accessMember access from a pointerMember access from an objectScoping operatorPost-incrementPost-decrement (a + b) / 4;array[4] = 2;ptr->a

JavaScript实现Div二级联动效果(响应键盘按钮)

最近在学习javascript,给了一个题目给我,写一个二级联动效果.当做练习. 写一个二级联动的HTML页面,具体要求如下: 1.页面支持通过键盘上的上下左右键实现焦点的移动 2.页面左侧为父栏目名称,如电影.电视剧.体育.音乐.少儿.综艺.咨询等 3.焦点在对应父栏目上时,展示子栏目信息,如电影栏目下有1,2,3,4,5等子栏目: 4.页面数据为静态数据,可以配置修改: 效果: <html> <head> <title>二级联动</title> <

JavaScript实现的购物车效果-好友列表效果

JavaScript实现的购物车效果,当然这个效果可以运用在好多地方,比如好友的选择,人力资源模块,计算薪资,人员的选择等等.下面看类似某种购物车的效果图: code: goodsCar.js:这个js写成了一个单独的文件.主要是控制上面的列表显示的. window.onload=function(){ initStore(); }; var goods=["火腿","美女","御姐","火星一日游","跑车&quo