Expandablelistview that can expand and shrink (imitating the list page of professional selection of Zhilian recruitment)

One 、 Preface

A few days ago, the project needed to implement a professional selection page similar to Zhilian recruitment , Simply put, clicking an item in the list of first-class majors will expand the list of second-class majors , A level-1 list is a group ( Group options ), The secondary list is the members of a group （ Suboptions ）. The effect of Zhilian recruitment is as follows ：

Now the mainstream list control is undoubtedly RecyclerView, So you might think of using one RecyclerView To display a list of groups , And then in it item There's another... Nested inside RecyclerView Display a list of sub options . Click the group option to nest RecyclerView The layout is set to visible perhaps gone To expand and close the sub list . This approach has the following disadvantages ：

1. RecyclerView Nesting of is easy to cause jamming ;
2. When you click the last item in the group list , Although the sub list has been shown , But outside the screen , You need to slide up to see , The user experience is not very good .

although RecyclerView It's danghong fried chicken , But to solve these problems, we still need old drivers ExpandableListView It's out of the way . This is a little old control , But the sword is not old , We can use it to easily achieve the effect of drop-down list . I'm not going to list them here ExpandableListView Usage of , But in a practical way , Focus on realizing requirements , Tell me which one to use . Because I think it's more interesting to learn and fill holes in practice , More effective . therefore , Now let's make a professional selection page for Zhilian recruitment .

Let's see the effect we want to achieve in advance ：

Two 、 Layout

2.1 Main layout

The overall layout is very simple , Let's play one. ExpandableListView That's all right. ：

<FrameLayout 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" >

    <ExpandableListView  android:id="@+id/expandable_list" android:layout_width="match_parent" android:layout_height="match_parent" />

</FrameLayout>

2.2 Group options item Layout

Group options only need to display text , So put one first TextView：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="50dp" android:paddingLeft="20dp" android:gravity="center_vertical" android:background="@android:color/white" android:orientation="vertical">

    <TextView  android:text="dd" android:gravity="center_vertical" android:id="@+id/tv_group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/black" android:textSize="16sp" />

</LinearLayout>

2.3 Of sub options item Layout

Of sub options item The only difference between layout and group options is that its background is gray (android:background="#F2F2F2"), The code is not repeated .

3、 ... and 、 Data preparation

A group of options corresponds to a group of sub options , So the data of group options is a first-order array , The data of sub options is a secondary array . For the convenience of adding data , What I use here is set , The number of sub option data in each group is set to random ：

    private void initData(){
        // Initialize level-1 professional data 
        for (int i = 1; i <= 15; i++) {
            groupList.add(new StringBuffer(" First class major ").append(i).toString());
        }
        // Initialize secondary professional data 
        Random random = new Random();
        for (String s : groupList) {
            List<String> childDatas = new ArrayList<>();
            int size = random.nextInt(10) + 5;
            for (int i = 1; i <= size; i++) {
                childDatas.add(new StringBuffer(" Secondary major ").append(i).toString());
            }
            childList.add(childDatas);
        }
    }

After running, I found that the data is available , But hell , Why is the height of group options and sub options so narrow ？

Four 、 The option height is wrap_content The pit of

This can be regarded as ExpandableListView A small hole in the , When the root layout height of group options or sub options is set to a fixed value , The actual effect is wrap_content. To solve this problem, you can add another attribute to the root layout android:minHeight="50dp", Or to child controls TextView Add a fixed height （ If your item The controls inside are relatively simple. You can take this method ）. Of course , If your item Height is not a fixed value , You can also set the height to wrap_content, And then set it up inside padding perhaps margin value , such as ：

        android:paddingTop="10dp"
        android:paddingBottom="10dp"

You can take appropriate solutions according to your needs .

5、 ... and 、 Modify the indicator of group options

If we look closely, we can find ,ExpandableListView An indicator is displayed by default , That is, the small arrow on the left , And provides properties android:groupIndicator To set its style . This indicator is fixed on the left , Although you can set the distance up, down, left and right , But it's hard to control , If you are not careful, it will overlap with the text , So I just set android:groupIndicator="@null" Let it disappear , Then I use two pictures in the layout of group options to replace .

The layout of the group options is modified as follows ：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="50dp" android:background="@android:color/white" android:gravity="center_vertical" android:minHeight="50dp" android:orientation="vertical" android:paddingLeft="20dp">

    <RelativeLayout  android:layout_width="match_parent" android:layout_height="wrap_content">
        <TextView  android:layout_toLeftOf="@+id/iv_indicator" android:layout_centerVertical="true" android:id="@+id/tv_group" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:textColor="@android:color/black" android:textSize="16sp" />

        <ImageView  android:layout_marginRight="20dp" android:id="@+id/iv_indicator" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    </RelativeLayout>
</LinearLayout>

go back to MajorAdapter, stay getGroupView One of the methods is isExpanded Parameters , It represents the expanded state of group options ,true Tense means expand ,false Is closed . With it , We can easily determine the direction of the arrow indicator .

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
                             View convertView, ViewGroup parent) {
        ……
        // Determine the direction of the arrow according to the expanded state of the list 
        groupHolder.ivIndicator.setImageResource(isExpanded ?
                R.drawable.ic_arrow_up : R.drawable.ic_arrow_down);
        return convertView;
    }

6、 ... and 、 Modify the split line style

ExpandableListView It is inherited from ListView, So it can also be done through android:divider Attribute Set the split line of group options and sub options at the same time . On the left of the dividing line we need 20dp The distance between , So I have to set android:divider="@null" To remove the original segmentation line , And I wrote one by myself .

Create a layout_divider.xml Layout ：

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

Then in the layout of group options and sub options include go in ：

<include layout="@layout/layout_divider" />

thus , Our interface has been completed , Now let's implement its click event .

7、 ... and 、 Click events for group options and sub options

ExpandableListView Provides setOnGroupClickListener and setOnChildClickListener Two methods are used to listen for click events of group options and sub options respectively . For example, monitor the click event of sub options ：

        // Click event of sub option 
        expandableList.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition,
                                        int childPosition, long id) {
                String toastStr = new StringBuffer(" You chose ").append(groupList.get(groupPosition))
                        .append(" Of ").append(childList.get(groupPosition).get(childPosition)).toString();
                Toast.makeText(context, toastStr, Toast.LENGTH_SHORT).show();
                return false;
            }
        });

The click and listen events of group options are similar , I won't go into that here .

8、 ... and 、 Expand group options to listen for events

Now let's implement a function that is not available in Zhilian recruitment , That is, when you click a group of options , The clicked group options expand , Other expanded group options are automatically turned off , That is, only one group option can expand the sub list at a time . You may think of using the setOnGroupClickListener, But this one will listen every time the group option is clicked , Even if one is closed , So there will be a bit of waste in performance . besides , We have a better choice , That's using setOnGroupExpandListener Listen for the expansion event of the list ：

        // Realize the function of expanding only one group option list at a time 
        expandableList.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int groupPosition) {
                // Get the number of group options 
                int groupSize = expandableList.getExpandableListAdapter().getGroupCount();
                for (int i = 0; i < groupSize; i++) {
                    if (i != groupPosition && expandableList.isGroupExpanded(i)) {
                        // If it is not the currently clicked group option and is in the expanded state, it will be closed 
                        expandableList.collapseGroup(i);
                    }
                }
            }
        });

Each time you click to expand a group option , Let's go through the list of group options , Compare their groupPosition, If it is not the currently clicked group option and is in the expanded state , Just call collapseGroup Turn it off .

You must think of , Since there is a way to close the list in a group of options , Is there a corresponding method to expand ？ you 're right , be relative to collapseGroup, And the corresponding expandGroup Method , And its second parameter can set whether to display animation effect when expanding . If you want to expand a specific sub list when the page is displayed , Then you can use it expandGroup 了 .

Nine 、 summary

thus , Our interface and functions have been implemented . Now let's sort out the attributes and API Well .

First of all xml attribute ：

attribute	effect
android:groupIndicator	Set indicators for group options
android:divider	Set the split line of the group options and sub options list

Then there is the method used ：

Method	effect
setOnGroupExpandListener	Click to listen for events of group options
setOnChildClickListener	Click to listen for events of sub options
setOnGroupExpandListener	Expand group options to listen for events
getExpandableListAdapter	obtain ExpandableListView The binding of Adapter
collapseGroup	Close the list under a group of options
expandGroup	Expand the list under a group of options

If you want to learn more ExpandableListView, You can read this official document ：
http://www.android-doc.com/reference/android/widget/ExpandableListView.html#getFlatListPosition(long)

Ten 、 The source code provides

I put the source code Code cloud On , But because there are some messy code in it , Therefore, it is not recommended that you download the whole project , Just focus on ExpandableListView Just the following files in the package ：

• ExpandableListViewActivity
• MajorFragment
• MajorAdapter

I also packaged and uploaded the code and resource files of this project to Baidu online disk , You can download it directly ： Baidu SkyDrive

in fact , The code here is not difficult , So I strongly suggest you knock it yourself . Last , I wish you all a happy study .