Android takes you to analyze ScrollView-imitation QQ space title bar gradient

[[190235]]

introduction

Today we are going to study ScrollView, which is divided into horizontal scroll view (HorizontalScrollView) and vertical scroll view (ScrollView). Today we will mainly study the vertical scroll view. I believe that everyone often uses it in development. The function of ScrollView is already very powerful, but it still cannot satisfy our UI designers with wild imagination, so we need to customize it... This article mainly talks about monitoring the sliding of ScrollView to achieve the gradient of the QQ space title bar. Let's take a look at the effect picture first:

Okay, let’s get to the point.

ScrollView properties you may not know

• android:scrollbars

Set the scroll bar display. None (hide), horizontal (horizontal), vertical (vertical)

• android:scrollbarStyle

Set the scroll bar style and position. Setting value: insideOverlay, insideInset, outsideOverlay, outsideInset

• android:scrollbarThumbHorizontal

Sets the drawable for the horizontal scroll bar.

• android:soundEffectsEnabled

Set whether there is a sound effect when clicking or touching

• android:fadingEdge

Set the direction of the border gradient when the scroll bar is pulled. None (border color remains unchanged), horizontal (color fades horizontally), vertical (color fades vertically). Refer to the fadingEdgeLength effect diagram android:fadingEdgeLength to set the length of the border gradient

• android:scrollX

Set the horizontal scroll offset in pixels. This effect can be seen in the GridView.

• android:scrollY

Set the vertical scroll offset in pixels.

• android:scrollbarAlwaysDrawHorizontalTrack

Set whether to always display the vertical scroll bar

• android:scrollbarDefaultDelayBeforeFade

Sets the time in milliseconds after which the fade will start.

If you are interested in the above properties, you can study them. I won’t go into detail here. Many properties are not commonly used. Let’s talk about the ones we often use. How to monitor the sliding of ScrollView and realize the gradient of the title bar?

ScrollView sliding monitoring:

Google does not provide us with a method to determine the sliding distance of ScrollView or whether to slide to the bottom or top of the layout, but it does provide an onScrollChanged method:

 @Override
    protected void onScrollChanged( int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
 //todo:
 }
 }

By viewing the source code comments,

 /**
     * This is called in response to an internal scroll   in this view (ie, 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 horizontal sliding distance

t: current vertical sliding distance

oldl: previous horizontal sliding distance

oldt: previous vertical sliding distance

But we cannot call this method. We can rewrite the interface or rewrite ScrollView to expose this method:

 package com.hankkin.gradationscroll; 
 
 import android.content.Context;
 import android.util.AttributeSet;
 import android.widget.ScrollView;
 /**
 * Scrollview with scroll monitoring
 *
 */
 public class GradationScrollView extends ScrollView { 
 
 public interface ScrollViewListener { 
 
        void onScrollChanged(GradationScrollView scrollView, int x, int y,
 int oldx, int oldy); 
 
 } 
 
    private ScrollViewListener scrollViewListener = null ; 
 
 public GradationScrollView(Context context) {
 super(context);
 } 
 
 public GradationScrollView(Context context, AttributeSet attrs,
 int defStyle) {
        super(context, attrs, defStyle);
 } 
 
 public GradationScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
 } 
 
 public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
 } 
 
 @Override
    protected void onScrollChanged( int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null ) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
 }
 } 
 
 }

Set title gradient

Now that the scroll listener is exposed, we should set the title bar to change the transparency of the title bar to achieve a gradual change as the ScrollView slides:

Let's take a look at the layout first:

 <?xml version= "1.0" encoding= "utf-8" ?>
 <RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android"  
    xmlns:tools= "http://schemas.android.com/tools"  
    android:layout_width= "match_parent"  
    android:layout_height= "match_parent"  
    tools:context= "com.hankkin.gradationtitlebar.QQSpeakActivity" > 
 
    <com.hankkin.gradationsscroll.GradationScrollView
        android:id= "@+id/scrollview"  
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent"  
        android:scrollbars= "none" >
 <LinearLayout
            android:layout_width= "match_parent"  
            android:layout_height= "wrap_content"  
            android:orientation= "vertical" >
 <ImageView
                android:id= "@+id/iv_banner"  
                android:scaleType= "fitXY"  
                android:src= "@drawable/banner3"  
                android:layout_width= "match_parent"  
                android:layout_height= "200dp" />
            <com.hankkin.gradationscroll.NoScrollListview
                android:id= "@+id/listview"  
                android:layout_width= "match_parent"  
                android:layout_height= "wrap_content" >
            </com.hankkin.gradationscroll.NoScrollListview>
 </LinearLayout>
    </com.hankkin.gradationsscroll.GradationScrollView>
 <TextView
        android:paddingBottom= "10dp"  
        android:id= "@+id/textview"  
        android:layout_width= "match_parent"  
        android:layout_height= "55dp"  
        android:gravity= "center|bottom"  
 android:text= "I am the title"  
        android:textSize= "18sp"  
        android:textColor= "@color/transparent"  
        android:background= "#00000000" />
 </RelativeLayout>

The outermost layer is our custom ScrollView, which wraps a background image and a ListView (ListView is rewritten to not be able to slide), 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 image and set the scroll listener to set the color transparency of the title bar and the transparency of the font color according to the scroll distance.

 /**
 * After getting the top image height, set the scroll monitor
 */
    private void initListeners() { 
 
        ViewTreeObserver vto = ivBanner.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
 @Override
 public void onGlobalLayout() {
                textView.getViewTreeObserver().removeGlobalOnLayoutListener(
                        this);
                height = ivBanner.getHeight(); 
 
                scrollView.setScrollViewListener(QQSpeakActivity.this);
 }
 });
 } /**
 * Slide monitoring
 * @param scrollView
 * @param x
 * @param y
 * @param oldx
 * @param oldy
 */
 @Override
 public void onScrollChanged(GradationScrollView scrollView, int x, int y,
 int oldx, int oldy) {
        // TODO Auto-generated method stub
 if (y <= 0) { //Set the background color of the title
            textView.setBackgroundColor(Color.argb(( int ) 0, 144,151,166));
 } else if (y > 0 && y <= height) { //When the sliding distance is less than the height of the banner image, set the background and font color transparency gradient
 float scale = ( float ) y / height;
 float alpha = (255 * scale);
            textView.setTextColor(Color.argb(( int ) alpha, 255,255,255));
            textView.setBackgroundColor(Color.argb(( int ) alpha, 144,151,166));
 } else { //Slide to the bottom of the banner to set the normal color
            textView.setBackgroundColor(Color.argb(( int ) 255, 144,151,166));
 }
 }

OK, this achieves the effect you see at the top.

In fact, it is not difficult, it’s just that we haven’t implemented it ourselves. I believe that if we do it more ourselves, we can achieve what the UI wants.