The new product proposed a requirement that a list in the app be displayed by category, and can indicate which category it is in. Baidu took a look at the previous blog and achieved the following effect:




2. GIF

The implementation of this effect is to use a custom ExpandableListView, to set it an indication of the layout, in the process of sliding to monitor whether the current should be suspended display classification to achieve. Today, I took some time to sort out the code and record the process of using it, so that when I have similar requirements, I can quickly solve them. Without further ado, let’s look at the code and how to use it.

I. Project Structure




Project structure.png

The top three classes are our custom ExpandableListView, the main interface, and the Adapter used by the ExpandableListView. The next XML files are the main layout, the indicator layout, the ExpandableListView sub-layout, and the ExpandableListView group layout.

Two implementation code

1. Declare a custom ExpandableListView in XML

Copy the code

2. Declare data source correlation (for demonstration purposes, the data is all String, depending on the specific requirements can change)

Private String[] parentSource = {" parentSource ", "parentSource "," parentSource ", "parentSource "," parentSource "}; private ArrayList parent = new ArrayList<>(); private Map> datas = new HashMap<>();Copy the code

3. Initialize the presentation data

For (int I = 0; i < parentSource.length; i++) { parent.add(parentSource[i]); } for (int I = 0; i < parent.size(); i++) { String str = parent.get(i); ArrayList temp = new ArrayList<>(); for (int j = 0; j < 20; j++) { temp.add("" + j); } datas.put(str, temp); }Copy the code

4. Initialize the Adapter and use it

myAdapter = new MyAdapter(this, parent, datas, listview);
listview.setAdapter(myAdapter);Copy the code

When the adapter is initialized, you can see that we passed in the constructor the context object, the type, the data, and our CustomExpandListview object, so in the CustomExpandListview we need to add the corresponding constructor.

5. Set the hover prompt layout

listview.setHeaderView(getLayoutInflater().inflate(R.layout.indictor_layout, listview, false));Copy the code

6. Other

Expand all by default

for (int i = 0; i < parent.size(); i++) {    
listview.expandGroup(i);
}Copy the code

Item click event

listview.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {    
@Override    
public boolean onChildClick(ExpandableListView expandableListView, View view, int i, int i1, long l) {        
   Toast.makeText(MainActivity.this, "点击了第" + (i + 1) + " 类的第" + i1 + "项",    Toast.LENGTH_SHORT).show();        
   return true;    
   }
}
);Copy the code

Three summary

As you can see from the steps above, it is very easy to use CustomExpandListview to implement the effects in the diagram. The full code for this demo is available at github.com/SolveBugs/E… Welcome to download. The main implementation is clearly annotated in MyAdapter and CustomExpandListview.