• 【深入篇】自定义ExpandableListView,实现二级列表效果


     先看效果图:

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

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

    以下是main.xmlgroup.xmlchild.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;
        }

        };

      }

    }

  • 相关阅读:
    React个人学习笔记
    electron 学习笔记
    微信小程序学习笔记
    算法
    17 django中间件
    16 django用户认证组件
    15 django_cookie&session
    14 django_forms
    13 django分页器
    12 django_ajax
  • 原文地址:https://www.cnblogs.com/tbcxy/p/3345738.html
Copyright © 2020-2023  润新知