Android imitation Taobao switching commodity list layout effect example code

Recently, there is a demand in the e-commerce project that there is a button to switch the layout of the commodity list (grid or vertical list arrangement) when entering the commodity list interface.

design sketch:

The above two pictures show the effects of two different layouts after clicking the button in the upper right corner. The simple process can be summarized as follows: when you enter the page for the first time, there is a default layout (grid layout). Click the button to switch from grid layout to vertical linear layout, and click again to switch to grid layout.

analysis:

You can see that the commodity display forms are displayed in the form of lists. I use recyclerview. This list is not complex and can be realized in combination with the adapter data adapter.

When I asked my friend about this requirement, he said that he used two adapters and two layouts to achieve this effect. At that time, my heart collapsed. Such a design scheme is absolutely impossible in actual app development. If it is simply to realize this function, it can be understood. However, in practical applications, the data comes from the server. Do we need to request the server again and store more unnecessary fields for such a switching function? Obviously, this design scheme is not feasible.

The powerful function of recyclerview also supports switching between different layouts (LinearLayout, gridlyout, Stragged, etc.). Speaking of this, I believe everyone thought of the layout manager of recyclerview: layoutmanager. you 're right! That's it

The setlayoutanager () method of recyclerview allows its layout to be switched between different arrangement modes, such as linear layout, grid layout and waterfall flow. The effect we want to achieve above is actually a switch from grid layout to linear layout. Seeing this, I believe everyone understands that this method can be solved, but don't be happy too early. For simple format switching, this effect has been achieved by using the above method, but the effect of my project is different between the item layout before and after switching, so you can refer to the idea of multi layout. There is a getitemviewtype (int position) method in the recyclerview adapter to distinguish the layout of each item. We need to rewrite this method to implement different layout methods. When overriding the method, the return value is int. Using the return value of this method, we can load the unused layout according to the return value in the oncreateviewholder method, and then bind the corresponding control of the corresponding layout according to different types in the onbindviewholder method.

The basic implementation process is introduced here. The following is the specific implementation

Step 1: override the getitemviewtype () method in the adapter; Add setType (int type) method

Step 2: switch the item layout according to the layout type you set in oncreateviewholder () method

Step 3: Click to switch the layout picture

The layout switching of this list is completed. If I need a demo, I can add it later

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.