Basic use of ExpandableListView (collapseable list)

Introduction to this section:

The Adapter class control to be explained in this section is ExpandableListView, which is a collapsible list. It is a subclass of ListView. Based on ListView, it divides the list items in the application into several groups, and each group can contain multiple list items. As for the appearance, Similar to QQ contact list, its usage is very similar to ListView, except that the list items displayed by ExpandableListVivew Required by ExpandableAdapter. Let's learn the basic use of this control! Official API: ExpandableListView

1. Related attributes

android:childDivider: Specify the subclass entries in each group The image will not be fully displayed due to the separator bar between them. What separates the sublist items is a straight line
android:childIndicator: A Drawable object displayed next to the sublist, which can be an image
android:childIndicatorEnd: The end constraint position of the child list item indicator
android:childIndicatorLeft: The left constraint position of the child list item indicator
android:childIndicatorRight: The right constraint position of the child list item indicator
android:childIndicatorStart: The start constraint position of the child list item indicator
android:groupIndicator: The Drawable object displayed next to the group list, which can be an image
android:indicatorEnd: The end constraint position of the group list item indicator
android:indicatorLeft: The left constraint position of the group list item indicator
android:indicatorRight: The right constraint position of the group list item indicator
android:indicatorStart: The start constraint position of the group list item indicator

2. Three ways to implement ExpandableAdapter

1. Extend BaseExpandableListAdpter Implement ExpandableAdapter.
2. Use SimpleExpandableListAdpaterWrap two List collections into ExpandableAdapter
3. Use simpleCursorTreeAdapterPackage the data in Cursor into SimpleCuroTreeAdapter The example in this section uses the first one, which extends BaseExpandableListAdpter. We need to override the relevant methods in this class. Let’s experience it through a code example below!

3. Code example

Let’s take a look at the renderings

Let’s realize the effect of the above picture:

The core is to rewrite BaseExpandableListAdpter, which is actually similar to the ordinary BaseAdapter written before. But BaseExpandableListAdpter is divided into two parts: group and sublist. You will know it by looking at the code!

In addition, one thing to note is that the overriding isChildSelectable() method needs to return true, otherwise it will not be triggered. Click event of sub-Item! Let's write it down:

First is the layout of the group and sublist:

item_exlist_group.xml：

item_exlist_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="5dp"
    android:background="../style/images/android-tutorial-expandablelistview.html">

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/iv_lol_icon1"
        android:focusable="false"/>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:focusable="false"
        android:text="提莫"
        android:textSize="18sp" />

</LinearLayout>

Then the custom Adapter class:

MyBaseExpandableListAdapter.java:

/**
* Created by Jay on 2015/9/25 0025.
*/
public class MyBaseExpandableListAdapter extends BaseExpandableListAdapter {

    private ArrayList<Group> gData;
    private ArrayList<ArrayList<Item>> iData;
    private Context mContext;

    public MyBaseExpandableListAdapter(ArrayList<Group> gData,ArrayList<ArrayList<Item>> iData, Context mContext) {
        this.gData = gData;
        this.iData = iData;
        this.mContext = mContext;
    }

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

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

    @Override
    public Group getGroup(int groupPosition) {
        return gData.get(groupPosition);
    }

    @Override
    public Item getChild(int groupPosition, int childPosition) {
        return iData.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 false;
    }

    //取得用于显示给定分组的视图. 这个方法仅返回分组的视图对象
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

        ViewHolderGroup groupHolder;
        if(convertView == null){
            convertView = LayoutInflater.from(mContext).inflate(
                    R.layout.item_exlist_group, parent, false);
            groupHolder = new ViewHolderGroup();
            groupHolder.tv_group_name = (TextView) convertView.findViewById(R.id.tv_group_name);
            convertView.setTag(groupHolder);
        }else{
            groupHolder = (ViewHolderGroup) convertView.getTag();
        }
        groupHolder.tv_group_name.setText(gData.get(groupPosition).getgName());
        return convertView;
    }

    //取得显示给定分组给定子位置的数据用的视图
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        ViewHolderItem itemHolder;
        if(convertView == null){
            convertView = LayoutInflater.from(mContext).inflate(
                    R.layout.item_exlist_item, parent, false);
            itemHolder = new ViewHolderItem();
            itemHolder.img_icon = (ImageView) convertView.findViewById(R.id.img_icon);
            itemHolder.tv_name = (TextView) convertView.findViewById(R.id.tv_name);
            convertView.setTag(itemHolder);
}else{
’ ’ ’ s ’ s ’s pt’s ’ s to ’’s ’ to ’ t's to be so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so to itemHolder.tv_name.setText(iData.get(groupPosition).get(childPosition).getiName());
# @Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}

private static class ViewHolderGroup{
private TextView tv_group_name;
}

private static class ViewHolderItem{
private ImageView img_icon;
private TextView tv_name;
}

}

PS: Store the data of the sublist You don’t have to use ArrayList<ArrayList>, define it according to your own needs~

Finally, the layout of MainActivity and Java code:

Layout file: activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android: layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
tools:context=".MainActivity">

<ExpandableListView
android:id="@+id/exlist_lol"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:childDivider="#E02D2F"/>

</RelativeLayout>

MainActivity.java：

public class MainActivity extends AppCompatActivity {

    private ArrayList<Group> gData = null;
    private ArrayList<ArrayList<Item>> iData = null;
    private ArrayList<Item> lData = null;
    private Context mContext;
    private ExpandableListView exlist_lol;
    private MyBaseExpandableListAdapter myAdapter = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        exlist_lol = (ExpandableListView) findViewById(R.id.exlist_lol);

        //数据准备
        gData = new ArrayList<Group>();
        iData = new ArrayList<ArrayList<Item>>();
        gData.add(new Group("AD"));
        gData.add(new Group("AP"));
        gData.add(new Group("TANK"));

        lData = new ArrayList<Item>();

        //AD组
        lData.add(new Item(R.mipmap.iv_lol_icon3,"剑圣"));
        lData.add(new Item(R.mipmap.iv_lol_icon4,"德莱文"));
        lData.add(new Item(R.mipmap.iv_lol_icon13,"男枪"));
        lData.add(new Item(R.mipmap.iv_lol_icon14,"韦鲁斯"));
        iData.add(lData);
        //AP组
        lData = new ArrayList<Item>();
        lData.add(new Item(R.mipmap.iv_lol_icon1, "提莫"));
lData.add(new Item(R.mipmap.iv_lol_icon7, "Annie"));
lData.add(new Item(R.mipmap.iv_lol_icon8, "Angel"));
lData.add(new Item (R.mipmap.iv_lol_icon9, "Zerath"));
iData.add(lData);
//TANK group
lData = new ArrayList<Item>();
lData.add(new Item(R.mipmap.iv_lol_icon2, "Nuoshou"));
lData.add(new Item( R.mipmap.iv_lol_icon5, "Debon"));
lData.add(new Item(R.mipmap.iv_lol_icon6, "Olav"));
lData.add(new Item(R.mipmap. iv_lol_icon10, "Dragon Girl"));
lData.add(new Item(R.mipmap.iv_lol_icon12, "Bear"));
iData.add(lData);

myAdapter = new MyBaseExpandableListAdapter(gData,iData,mContext);
exlist_lol.setAdapter(myAdapter);

//Set a click event for the list
exlist_lol.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
         @ Override
but but ).getiName(), Toast.LENGTH_SHORT).show();
                                                                        .

4. Code download:

ExpandableListViewDemo.zip

Summary of this section:

Okay, this section will introduce it to you Learned the basic use of ExpandableListView, hey, it’s interesting~ This is just an example, others can be expanded according to your own needs~Thank you

← Basic use of AutoCompleteTextView (automatically complete text box)

Basic use of ViewFlipper (flip view) →