Android ScrollView sliding to achieve the imitation of QQ space title bar gradient _android

Today, we're going to look at the scrollview-scrolling view, the scrolling view and the horizontal scrolling view (Horizontalscrollview) and the vertical scrolling view (ScrollView), which are mainly studied vertically today. I believe that we often use in the development, ScrollView function has been very strong, but still can not meet our brain hole open the UI designers, so we want to customize ... This article is mainly about listening to the scrollview of the sliding implementation of imitation QQ space title bar gradient, first look at the effect chart:

Okay, let's cut to the chase.

You may not know those ScrollView properties
  Android:scrollbars
sets the scroll bar display. None (hidden), horizontal (horizontal), vertical (vertical)
  Android:scrollbarstyle
sets the style and position of the scroll bar. Set values: Insideoverlay, Insideinset, Outsideoverlay, Outsideinset
  Android:scrollbarthumbhorizontal The
sets the drawable of the horizontal scroll bar.
  android:soundeffectsenabled
To set whether there is a sound effect when clicking or touching
  Android: Fadingedge the
setting when the scroll bar is pulled, the border gradient is placed. None (the border color is unchanged), horizontal (horizontal color fades), vertical (vertical color fades). Android:fadingedgelength set the length of a border gradient
  ANDROID:SCROLLX
by referencing the Fadingedgelength effect chart The offset value set horizontally in pixels, as seen in the GridView
  android:scrolly
Sets the offset value for vertical scrolling in pixels
  Android:scrollbaralwaysdrawhorizontaltrack The
set whether the vertical scroll bar is always displayed
  Android:scrollbardefaultdelaybeforefade
is set to fade after n milliseconds, in milliseconds. &NBSP

These attributes are interesting to study, here is not in detail. Many of the properties are not commonly used, the following is what we often use, how to monitor the ScrollView slide and achieve the title bar gradient?

ScrollView Slide Monitor:

Google does not provide us with the ScrollView sliding distance, slide to the bottom of the layout, the top of the method, but provides a onscrollchanged method:

@Override
  protected void onscrollchanged (int x, int y, int oldx, int oldy) {
    super.onscrollchanged (x, y, OLDX, old y);
    TODO:
    }
  }

By looking at the source annotation,

/**
* This is called into response to a internal scroll in this view (i.e., the
* View scrolled its own contents). This is typically as a
* {@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 see that the parameters of this method are:
L: current Transverse sliding distance
T: Current Vertical slide distance
OLDL: Horizontal sliding distance before
Oldt: previous longitudinal slide distance

But this method we can not call, we can rewrite the interface or rewrite the ScrollView to expose the method:

Package com.hankkin.gradationscroll;
Import Android.content.Context;
Import Android.util.AttributeSet;
Import Android.widget.ScrollView; /** * */public class Gradationscrollview extends ScrollView {public interface scrollviewlistene with rolling monitor

  R {void onscrollchanged (Gradationscrollview scrollview, int x, int y, int oldx, int oldy);

  Private Scrollviewlistener scrollviewlistener = null;
  Public Gradationscrollview {Super (context); } public Gradationscrollview (context, AttributeSet attrs, int defstyle) {Super (context, at
  TRS, Defstyle);
  Public Gradationscrollview (context, AttributeSet attrs) {Super (context, attrs); } public void Setscrollviewlistener (Scrollviewlistener scrollviewlistener) {This.scrollviewlistener = ScrollViewLi
  Stener; @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 a title gradient

Rolling Monitor exposed, we should go. Set the title bar to change the transparency of the title bar to achieve the gradient as ScrollView slides:
Let's 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.gradationscroll.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" Andro Id:layout_width= "Match_parent" android:layout_height= "200DP"/> <com.hankkin.gradationscroll.noscrolll Istview android:id= "@+id/listview" Android:layout_Width= "Match_parent" android:layout_height= "wrap_content" > </com.hankkin.gradationscroll.noscrolllist view> </LinearLayout> </com.hankkin.gradationscroll.GradationScrollView> <textview android:p Addingbottom= "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/tr

 Ansparent "android:background=" #00000000 "/> </RelativeLayout>

The outermost layer is our custom scrollview, wrapped with a background picture and a ListView (ListView rewrite to not be able to slide), and then the layout has a TextView as the title bar, you can also use the layout.

Then we need to get the height of the picture and set the scrolling monitor to set the title bar's color transparency and the transparency of the font color as the scrolling distance.

/**
   * Get top picture height, set scrolling 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);
      }
    );
  

/** * Sliding monitor * @param scrollview * @param x * @param y * @param oldx * @ Param Oldy */@Override public void onscrollchanged (Gradationscrollview scrollview, int x, int y, I NT OLDX, int oldy) {//TODO auto-generated method stub if (y <= 0) {//Set the background color of the caption Textview.setbackground
    Color (Color.argb ((int) 0, 144,151,166)); If else if (Y > 0 && y <= height) {///sliding distance is less than the height of banner graph, set background and font color color transparency gradient float scale = (float) Y/heig
      Ht
      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 banner below to set the normal color Textview.setbackgroundcolor ((int) 255, 144,151,166)); }
  }

OK, this will achieve the effect you see at the top.
In fact, it is not difficult, but we do not personally to achieve, I believe that more hands-on to do their own to achieve, the UI want we can achieve.
Source Address: Https://github.com/Hankkin/GradationTitleBar
Project inside I also added a band banner, the principle is the same.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.