Android imitates the bottom of wechat to achieve tab switching effect

I read a lot of tutorials about tab on the Internet and found that they are very messy. Titlepagertabstrip and viewpaper are commonly used. However, titlepagertabstrip has a big defect. The contents in the tab are not available just after entering, and can only be loaded after sliding once. Moreover, when sliding, the content position in the tab is not fixed. When sliding, a blank will appear at the end, which is very unsightly. Although there are other remedies, it is very troublesome, so I implemented one according to my own method. The function is good and very simple.

Click directly or slide the interface to go to the corresponding page.

design sketch:

The principle is to use three buttons and viewpaper and abandon the titlepagertabstrip.

Generally speaking, viewpaper is a container for pages. As shown in the figure above, I have three different interfaces because I add three views. Then add the viewpaper to the layout of the main interface.

In this way, there are three buttons on the main interface. Below the button is a viewpaper. There are three views in this viewpaper. Every time I slide or click the button, I will jump to the corresponding view.

In other words, what we see is actually the main interface, and the buttons are always there. We just constantly convert the views in the viewpaper container.

Layout code of main interface:

How to implement it? Press the corresponding button to jump to the corresponding view in viewpaper? It's very simple, just set the monitor for the button, then call the setCurrentItem () function of viewPaper.

For the corresponding page, our buttons should also be changed accordingly. As shown in the figure above, the English of our buttons has become √. As long as the function onpageselected () is overloaded in the listener of viewpaper,

This function is called when each page is selected. In this function, judge which page the current page is, and then make corresponding changes to the button. Oncreate code

If you want to use the controls in each view, these controls cannot be found on the main interface and are empty. It must be specified in the instantiateitem function.

The above is the whole content of this article. I hope it will be helpful to your study.