Android listview multi tab up sliding suspension effect

Sample

In the near future, there will be a tab switching page with two tabs. The two pages have a common description information area. Both tabs are listview, which can be refreshed by pulling up or down. There is a tab switching area in the middle of the page. When sliding up, the tab area will not move to the top. Pull down and return to the initial position. Let's see the same style chart first!

The overall requirements are roughly as shown in the figure above. There are no screenshots for pull-up refresh and pull-down refresh. The open source control pulltorefreshlistview is used to achieve this effect.

Implementation mode

The general idea is that in order to be simple, I don't want to monitor many gesture problems, so I use the following methods opportunistically,

a. The whole page is a listview. The public area is added as the listview header, and the two switched tabs are also added as a header. B. when the page layout is added, a layer is added above the listview, in which the tab layout is placed. The layout of this tab is the same as that in the listview header, c. Then, when listview slides, the onscroll function handles the display and hiding of the page tab layout. When listview's tab layout reaches the top of the screen, it displays the tab layout in the page and slides down. When the whole tab appears, it is the tab layout in the shadow interface. D. tab switching. Because the data of tab1 and TAB2 are different, three data sources are used. When tab switching, Switch the data back and forth. When clicking the tab, remember the POS and offset of the currently displayed tab (only remember that there will be deviation when the POS is relocated)

The general flow of the demo is like this. There is no processing of adding and refreshing. Although more logic is processed in the actual project, the demo does not want to be too complex (mainly because no one can read it, just read it and write it a little).

Having said so much, people may still not understand it. Let's take a look at the code

The first is the interface layout. There is a listview at the bottom and a tab layout at the top. The interface layout is up_ float_ first_ activity.xml

Tab layout, up_ float_ tab_ Both layout.xml and text use a selector, which can be highlighted when selected

Public part layout_ float_ common_ layout.xml

Next is the main page code

Summary:

A the demo above only realizes the effect of sliding upward. In fact, it has great limitations. The item layout of the two tabs must be consistent in order to switch freely. Secondly, the two tabs cannot slide left and right. B is only suitable for two or one tab. If there are more variable states to be controlled, it is easy to make mistakes, and the refresh effect is not included, When returning data, you should not just add it to the item, but judge the relationship between the refresh tab and the currently displayed tab. C looked at other open source projects, and then if I have time, I will write a demo to do real multiple tabs, and can switch between left and right.

PS: since many people still want the source code, I will re implement the existing method in the next article, and attach the code address of GIT. Don't miss it.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.