Android Scrollview sliding to realize the gradient of QQ space title bar

Today's research is Scrollview - scroll view, which is divided into horizontal scroll view and vertical scroll view. Today, we mainly study vertical scroll view. I believe you often use it in development. The function of Scrollview is already very powerful, but it still can't meet our UI designers with big brain holes, so we need to customize... This article mainly focuses on monitoring the sliding of Scrollview to realize the gradual change of QQ space title bar. Let's take a look at the effect picture first:

All right, let's get to the point.

Maybe you don't know those Scrollview properties • Android: scrollbars sets the scroll bar display. None (hidden), horizontal, vertical • Android: scrollbarstyle sets the style and position of the scroll bar. Setting values: insideoverlay, insideinside, outsideoverlay, outsideinside • Android: scrollbarthumbhorizontal sets the drawable of the horizontal scroll bar Android: soundeffectsenabled sets whether there is sound effect when clicking or touching • Android: fadingedge sets the direction of the border gradient when pulling the scroll bar. None, horizontal, vertical. Refer to the renderings of fadingedgelength. Android: fadingedgelength sets the length of the border gradient • Android: scrollx sets the offset value of horizontal scrolling in pixels, This effect can be seen in the GridView • Android: scrolly sets the offset value of vertical scrolling in pixels • Android: scrollbaralwaysdrawhorizontaltrack sets whether the vertical scroll bar is always displayed • Android: scrollbardefaultdelaybeforefade sets the fade in milliseconds after n milliseconds.

Those who are interested in these attributes can study them, which will not be discussed in detail here. Many properties are not commonly used. Let's talk about how to monitor the Scrollview sliding and realize the gradient of the title bar?

Scrollview sliding listening:

Google does not provide us with the sliding distance of Scrollview and the method of whether to slide to the bottom and top of the layout, but provides an onscrollchanged method:

By viewing the source code comments,

/** * This is called in response to an internal scroll in this view (i.e.,the * view scrolled its own contents). This is typically as a result of * {@link #scrollBy(int,int)} or {@link #scrollTo(int,int)} having been * called. * * @ param l Current horizontal scroll origin. * @ param t Current vertical scroll origin. * @ param oldl PrevIoUs horizontal scroll origin. * @ param oldt PrevIoUs vertical scroll origin. */

We can know that the parameters of this method are: l: current transverse sliding distance t: current longitudinal sliding distance oldl: Previous transverse sliding distance oldt: previous longitudinal sliding distance

However, we cannot call this method. We can override the interface or override the Scrollview to expose this method:

Set title gradient

When scrolling monitoring is exposed, we should set the title bar to change the transparency of the title bar with the sliding of Scrollview to achieve gradient: let's take a look at the layout first:

The outermost layer is our custom Scrollview, which is wrapped with a background picture and a listview (the listview is rewritten as non sliding), and then there is a textview on the layout as the title bar. You can also use the layout.

Then we need to get the height of the picture, set the scroll monitor, and set the color transparency of the title bar and the font color with the scroll distance

OK, this realizes the effect you see at the top. In fact, it's not difficult, but we didn't do it ourselves. I believe we can do it ourselves, and we can do whatever the UI wants. Source address: https://github.com/Hankkin/GradationTitleBar I also added a banner in the project. The principle is the same.

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.