Implementation method of anroid listview grouping and floating header

When using IOS, I saw a grouped view. Each group has a header. When sliding up and down, there will be a suspended header. This experience is very good. Please see the following figure:

In the four red pictures 1, 2, 3 and 4 in the above figure, when sliding upward, carefully observe the change of the header of the gray bar. When the second group slides upward, it will squeeze the suspended header of the first group.

This effect is not available in Android. The SDK of IOS comes with this effect. This article describes how to achieve this effect on Android.

1. Implementation of suspended header

In fact, there is such an effect in the Android built-in contact app. I also took his class directly and implemented the pinnedheaderlistview class, which is extended to the listview. The core principle is to draw a header view set by the caller at the top of the listview. When sliding, I decide whether to move the header view up or down according to some states (in fact, it is possible to call its layout method and make some translation in the drawing area in theory). The specific implementation is as follows:

1.1. Pinnedheaderadapter interface

This interface needs to be implemented by the listview adapter. It defines two methods. One is to let the adapter tell the listview the status of the data of the currently specified position. For example, the data of the specified position may be the header of the group; Another method is to set the header view, such as setting the text and picture of the header view. This method is implemented by the caller.

1.2. How to draw header view

This is drawn in the dispatchdraw method:

1.3. Configure header view

The core is to control the state of header view according to different state values, such as pinned_ HEADER_ In the case of gone (hidden), you may need to set a flag flag and do not draw the header view to achieve the hidden effect. When pinned_ HEADER_ PUSHED_ In the up state, you may need to calculate the moving displacement of the header view according to different displacements. The following is the specific implementation:

1.4. Onlayout and onmeasure

In these two methods, the position and size of the header view are controlled

Well, here, the suspended header view is over. You may not see the complete code. As long as you understand these core methods and write them yourself, it's almost the same.

2. Listview section implementation

There are two ways to achieve the listview section effect:

Method 1:

Each ItemView contains headers, which can be displayed or hidden through data. The implementation principle is as follows:

advantage:

1. It is easy to implement in the adapter In the implementation of getview, you only need to judge whether it is a header according to the data. If not, hide the header in item view, otherwise it will be displayed.

2，Adapter. Getitem (int n) always returns the nth data in the data list, which is easy to understand.

3. It is easier to control the click event of the header

Disadvantages: 1. More memory is used. The first item view contains a header view. In this way, there is more memory. Most of the time, the header may be hidden.

Method 2:

Use different types of Views: override getitemviewtype (int) and getviewtypecount () methods.

advantage:

1. Multiple items of different types are allowed

2. Easier understanding

Disadvantages:

1. The implementation is complex

2. Getting the data at the specified location becomes more complex

Here, my implementation method is to choose the second scheme. Although its implementation method is more complex, it has obvious advantages.

3. Implementation of adapter

This is mainly about the implementation of getpinnedheaderstate and configurepinnedheader methods

In the getpinnedheaderstate method, if the first item is not a section and the second item is a section, the state pinned is returned_ HEADER_ PUSHED_ Up, otherwise pinned is returned_ HEADER_ VISIBLE。 In the configurepinnedheader method, set the section string of item to the header view.

[important notes]

The data in the adapter already contains the data of section (header). There is a method in the data structure to identify whether it is a section. Then, in the click event, you should note that the section data structure may be returned through position.

The data structure contact is defined as follows:

Complete code

Last screenshot: