Android imitates the effect of sliding and fixing the top bar of the microblog details page

preface

Recently, I encountered a demand in the project, which is similar to the effect of the microblog details page. I finally found the corresponding solution by looking up relevant materials and shared it for your reference and learning. I won't say much below. Let's take a look at the detailed introduction together.

Let's take a look at the effect we want to achieve today:

During this period of time, the company is preparing to reconstruct a project and just used this effect. I wrote an article by the way. I can find some relevant information about this effect on the Internet. I saw some last night and didn't feel very good. It's a little ambiguous. I didn't mention some key points that need to be paid attention to. Let's sort it out here. Because it involves the company's code, Here I'll write a simple demo to explain.

Traditional routine:

Write as like as two peas in two columns. The outer layer is wrapped with FrameLayout. Then the outer column is hidden first. When the inner column is slid to the outer column, the inner column is hidden. The outer column shows that the outer column is hidden when it slips back. The memory column shows.

There are several disadvantages in doing so:

1. The same layout is written repeatedly, which consumes performance in XML rendering (such as more measurements, layout, etc.)

2. When the page scrolls quickly, a series of problems may occur (repeated layout, flashing)

3. When the fixed layout has a status, the logic will become very complex. For example, the GIF dynamic diagram above has filter classification, region, year and year information in the fixed column. If it is written according to the traditional routine, when the inner fixed column is hidden, the status needs to be recorded and brought to the outer fixed column, and many action monitoring events also need to be written many times.

New routine:

Here, I changed my thinking. The general layout remains unchanged. I just simplified the two fixed columns into one. I just dynamically switch the fixed columns inside and outside when the page slides according to the coordinate points by using removeview and addview. This has the advantages of solving the problems mentioned above, Of course, in the fast removeview and addview, there will still be an unnatural problem of page flicker. The tips to solve it will be mentioned later.

Let's first look at the XML layout:

Here, as mentioned above, the outermost layer is wrapped with a Scrollview and a LinearLayout with a FrameLayout (relativelayout can also be used). When we slide the page to the specified point, we need to remove the "I am the inner fixed layout" of the inner layer and add it to the ViewGroup (LinearLayout) of the outer layer.

Customize the Scrollview and expose the sliding data by using the callback interface:

Although Google officially provides Scrollview with setonscrollchangelistener, this method needs to be based on api23 (Android 6.0 system). In daily development, we need to be compatible with users of the old system (the current compatible version is Android 4.1 system or above), Therefore, we need to inherit the Scrollview and expose the listening event through the interface. Here, we call the view observable Scrollview.

Here we can start writing our calling class

Here, we implement the observablescrollview.onobserveablescrollviewscrollchanged interface. When we register and listen to the Scrollview, we can get the corresponding sliding data in the callback interface. The second parameter t is the distance of the sliding y-axis, Now we only need to get the distance from the fixed layout to the top to judge when to remove and add views.

Relevant explanations:

1. First of all, we need to know that in the oncreate method in the activity life cycle, a series of methods such as getWidth, getHeight, gettop and getbottom can not get data for a view, and the results are all 0. Because the activity has not got the focus at this time, the view attached to the activity naturally can not get data, Therefore, we need to obtain the data of the view after onresume.

Here, we can get it through ongloballayoutlistener or onwidnowfocuschanged. The execution order here is: activity. Oncreate - > activity. Onresume - > view. Onmeasure - > view. Onlayout - > ongloballayoutlistener - > activity. Onwidnowfocuschanged (which one to use depends on the current environment. For example, there is no onwidnowfocuschanged in the fragment. If you need to obtain the relevant data of a view, you can do it according to the ongloballayoutlistener. The above code provides two examples.)

2. For obtaining the sliding height, let's first look at a figure:

Coordinate system of view in andorid

It should be noted here that except that getrawx and getrawy are relative to the screen, others are corresponding to the parent layout. Therefore, when determining the data, you should pay attention to the nesting of the layout.

3. When we get the required sliding height, we need to judge the critical value of the fixed layout (here, set the current sliding value as T and the required sliding value as y). For example, when our interface starts to slide upward, the T value is less than the y value. At this time, the internal fixed bar does not need to be removed. When we slide back beyond the y value and the T value is less than the y value, At this time, the internal fixed bar needs to be removed from the outside and added to the inside, so here we need to judge the parent layout (ViewGroup) where the fixed bar is located.

Finally, add:

1. No matter how simple the layout of your top fixed bar is, it is recommended to put a ViewGroup on the outer layer to facilitate the operation of addview. Otherwise, you need to control the index position of addview of the outer ViewGroup.

2. The width and height data of the view can be determined with the help of ongloballayoutlistener or onwidnowfocuschanged. Pay attention to the nesting relative to the parent layout.

3. The design of this page originated from the design of IOS. There is no problem with Scrollview nesting tableview (equivalent to listview) in IOS, but in Android, such nesting will invalidate the reuse mechanism of listview, that is, it will continue to perform onmeasure calculation and execute getview in adapter many times, which means multiple findviewbyids, Invalidates the viewholder.

4. This is a small skill. Some people will flicker in the fixed layout when sliding quickly. In fact, this has something to do with removeview and addview. If your ViewGroup is set to warp_ Content, this is a time-consuming operation of measurement. Here, only a fixed height value (consistent with the height of the fixed column) needs to be arranged for the outer layer of the fixed column in coordination with the first point mentioned above.

All right, that's it.

Source code download:

GitHub source address: source download

Local download: click here

summary

The above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.