简单的ExpandableList控件例子

展开列表控件ExpandableList,这里直接用一个简单的例子来介绍,先上效果图(默认为展开的列表):


先分析一下,应该是有两个布局,一个用于显示根,一个用显示子,显示根的布局命名为:list_item_expand_group.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="wrap_content"
              android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/group_layout"
        android:layout_width="fill_parent"
        android:layout_height="45dp">

        <TextView
            android:id="@+id/group_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerInParent="true"
            android:textSize="@dimen/one_level_word"
            android:textColor="@color/word_color_999999"
            android:text="-"/>

        <ImageView
            android:id="@+id/group_state"
            android:layout_width="16dp"
            android:layout_height="12dp"
            android:layout_toRightOf="@+id/group_title"
            android:layout_centerInParent="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/group_down"/>
        <TextView
            android:id="@+id/group_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:textSize="@dimen/one_level_word"
            android:textColor="@color/word_color_666666"/>

    </RelativeLayout>

</LinearLayout>

显示子的布局命名为:list_item_expand_group_child.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="match_parent"
                android:background="@color/wirte_ffffff">

    <TextView
        android:id="@+id/child_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:paddingLeft="50dp"
        android:text="test"
        android:textSize="@dimen/two_level_word"
        android:textColor="@color/word_color_666666"/>
</LinearLayout>
布局定义好了,接下来就是定义它的适配器,ExpanableList的适配器继承于BaseExpandableListAdapter,要显示两级我们需要两个列表,一个用于存根,一个用于存子,这里跟已经定了,是四种情况:迟到人数,请假人数,旷课人数和公假人数,但是子是需要传入的,然后分别要重写其getGroupView()获取根布局的方法和getChildView()获取子布局方法,适配器如下:


import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.gta.zssx.R;
import com.gta.zssx.pub.util.LogUtil;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by lan.zheng on 2016/6/24.
 */
public class CheckExpandableListAdapter extends BaseExpandableListAdapter {
    public static 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 ,0};
    private String[] group_title_array = new String[] { "迟到人数", "请假人数","旷课人数","公假人数" };
    private List<String> groupArray;  //title,根数组
    private List<String> groupCount;  //是否显示箭头的标志
    private List<List<String>> childArray;  //child数组
    Context mContext;
    // 一级标签上的状态图片数据源
    int[] group_state_array = new int[] { R.drawable.group_down,
            R.drawable.group_up };

    public CheckExpandableListAdapter(Context context,String[] late,String[] leave,String[] truant,String[] holiday){
        mContext = context;
        groupCount = new ArrayList<>();
        groupCount.add(""+late.length);
        groupCount.add(""+leave.length);
        groupCount.add(""+truant.length);
        groupCount.add(""+holiday.length);

        //这里都把获得的根String变为List
        groupArray = new ArrayList<>();
        for(int index=0;index<group_title_array.length;index++){
            groupArray.add(group_title_array[index]);
        }//这里都把获得的子String变为List
        childArray = new ArrayList<>();
        List<String> childItem1 =new ArrayList<>();
        List<String> childItem2 =new ArrayList<>();
        List<String> childItem3 =new ArrayList<>();
        List<String> childItem4 =new ArrayList<>();
        for(int i=0;i<late.length;i++){
            childItem1.add(late[i]);}
        for(int i=0;i<leave.length;i++){
            childItem2.add(leave[i]);}
        for(int i=0;i<truant.length;i++){
            childItem3.add(truant[i]);}
        for(int i=0;i<holiday.length;i++){
            childItem4.add(holiday[i]);}
        childArray.add(childItem1);
        childArray.add(childItem2);
        childArray.add(childItem3);
        childArray.add(childItem4);
    }

    @Override
    public int getGroupCount() {
        return groupArray.size();
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return childArray.get(groupPosition).size();
    }

    @Override
    public Object getGroup(int groupPosition) {
        return getGroup(groupPosition);
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return childArray.get(groupPosition).get(childPosition);
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public boolean hasStableIds() {
        return true;
    }

    /**
     * 一级标签设置
     * @param groupPosition
     * @param isExpanded
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        // 为视图对象指定布局
        convertView = LinearLayout.inflate(mContext,
                R.layout.list_item_expand_group, null);

        RelativeLayout myLayout = (RelativeLayout) convertView
                .findViewById(R.id.group_layout);
        /*myLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.itemClick(group_checked);
            }
        });*/

        /**
         * 声明视图上要显示的控件
         */
        // 新建一个TextView对象,用来显示一级标签上的标题信息
        TextView group_title = (TextView) convertView
                .findViewById(R.id.group_title);
        // 新建一个TextView对象,用来显示一级标签上的大体描述的信息
        ImageView group_state = (ImageView) convertView
                .findViewById(R.id.group_state);
        TextView group_count = (TextView)convertView.findViewById(R.id.group_num) ;
        /**
         * 设置相应控件的内容
         */
        // 设置标题上的文本信息
        group_title.setText(groupArray.get(groupPosition));

        // 设置整体描述上的文本信息
        if (group_checked[groupPosition] % 2 == 1) {
            // 设置默认的图片是选中状态
            group_state.setBackgroundResource(group_state_array[1]);
            myLayout.setBackgroundResource(R.drawable.text_item_expandable_list_bg);
        } else {
            for (int test : group_checked) {
                if (test == 0 || test % 2 == 0) {

                    // 设置默认的图片是未选中状态
                    group_state.setBackgroundResource(group_state_array[0]);
                    myLayout.setBackgroundResource(R.drawable.text_item_top_bg);
                }
            }
        }

        //是否显示箭头和改变count
        if(groupCount.get(groupPosition).equals("0")){
            group_state.setVisibility(View.INVISIBLE);
            myLayout.setBackgroundResource(R.drawable.text_item_expandable_list_bg);
        }else {
            group_count.setText(groupCount.get(groupPosition));
        }

        // 返回一个布局对象
        return convertView;
    }

    /**
     * 对一级标签下的二级标签进行设置
     */
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        // 为视图对象指定布局
        convertView =  LinearLayout.inflate(mContext, R.layout.list_item_expand_group_child, null);
        /**
         * 声明视图上要显示的控件
         */
        // 新建一个TextView对象,用来显示具体内容
        TextView child_text = (TextView) convertView
                .findViewById(R.id.child_text);
        /**
         * 设置相应控件的内容
         */
        // 设置要显示的文本信息
        child_text.setText(childArray.get(groupPosition).get(childPosition));
        return convertView;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

    public interface Listener {
        void itemClick(int[] group_checked);
    }
}
适配器OK,接下来我们也自定义一下我们的ExpandListView,让其在适配ScollView,不然会造成一些小问题( 类似问题点击这里):


import android.content.Context;
import android.util.AttributeSet;
import android.widget.ExpandableListView;

/**
 * Created by lan.zheng on 2016/6/25.
 */
public class MyExpandListView extends ExpandableListView{
    public MyExpandListView(Context context) {
        super(context);
    }

    public MyExpandListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyExpandListView(Context context, AttributeSet attrs,
                                 int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    /**
     * 重写该方法,达到使ListView适应ScrollView的效果
     */
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }

}
主函数的主要布局如下:

     <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/wirte_ffffff">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                    <TextView
                        android:id="@+id/tv_course_name_show"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>
                    <com.fun.view.MyExpandListView
                        android:id="@+id/expanded_menu"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:childDivider="@color/wirte_ffffff"
                        android:listSelector="#00000000"
                        android:divider="@color/view_line"
                        android:dividerHeight="0.5dp"
                        android:scrollbars="none">
                    </com.fun.view.MyExpandListView>
                    
            </RelativeLayout>
        </ScrollView>


最后我们就要在主函数中使用啦:

private MyExpandListView expandableListView;
    private CheckExpandableListAdapter mExpandableListAdapter;
    String[] lateString;    //迟到,自行填充数据
    String[] leaveString;   //请假,自行填充数据
    String[] truantString;  //旷课,自行填充数据
    String[] holidayString; //公假,自行填充数据

      private TextView mCourseNameTextView; //用于获取焦点
      private void updateList(){
     
        mExpandableListAdapter = null;
        mExpandableListAdapter = new CheckExpandableListAdapter(this,lateString,leaveString,truantString,holidayString);
        expandableListView.setAdapter(mExpandableListAdapter);
        //默认为全部展开
        int groupCount = expandableListView.getCount();
        for (int i=0; i<groupCount; i++) {
            expandableListView.expandGroup(i);
        }
        //进行高度计算,为了备注的显示
        ViewGroup.LayoutParams lLayoutParams = expandableListView.getLayoutParams();
        lLayoutParams.height = getHeight();
        expandableListView.setLayoutParams(lLayoutParams);
        expandableListView.requestLayout();


        expandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v,
                                        int groupPosition, long id) {
                CheckExpandableListAdapter.group_checked[groupPosition] = CheckExpandableListAdapter.group_checked[groupPosition]+1;
                // 刷新界面
                mExpandableListAdapter.notifyDataSetChanged();
                return false;
            }
        });
     }
这就完事了?你运行发现似乎还有个小问题,列虽然能显示,但是当数据多了的时候,显示的并不是从头开始的数据,而是列表中间,我们需要获取焦点,让他定位在列表头部开始显示,布局中的TextView在这里发挥了作用,虽然是空的,但是我们可以利用它进行获取焦点,在上面的方法中最后加入这几句即可:

//设置焦点为顶部,因为列表为默认展开,所以需要适配回顶端的标题显示,而不是列表的中间处
        mCourseNameTextView.setFocusable(true);
        mCourseNameTextView.setFocusableInTouchMode(true);
        mCourseNameTextView.requestFocus();


OK,现在我们就完成了这控件的显示,更多的花样你们可以自己尝试一下~~



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值