ScrollView实现标题栏渐变效果

首先，简单的思路就是在ScrollView滚动的时候 动态的去改变标题栏的透明度即可实现。

先看下效果图：

那么ScrollView有哪些滑动回调的方法呢？ 只可惜，SDK只有在23的时候提供了一个setOnScrollChangeListener回调。但是SDK提供了另外一个方法可以获取到ScrollView滑动的距离：

 

   
 /**
     * 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.
     */
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {

    }

这个方法是ScrollView父类View的方法 并且类型是protected  的，所以我们只能“曲线救国”了，即自定义ScrollView并且复写onScrollChanged 方法:

 

 

    
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);

        if (mListener != null) {
            mListener.onScrollChanged(t);
        }

    }

    public void addOnScrollChangedListener(onScrollChangedListener listener) {
        mListener = listener;
    }

    public interface onScrollChangedListener {
        void onScrollChanged(int t);
    }

接下来看下布局文件 

 

 

<?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:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ppdai.titlescrollviewdemo.MainActivity">


    <com.ppdai.titlescrollviewdemo.MyScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


            <ImageView
                android:id="@+id/iv_top"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="fitXY"
                />


            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:gravity="center"
                android:text="快快快快快快快快快快快快快快快" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:gravity="center"
                android:text="快快快快快快快快快快快快快快快" />

        </LinearLayout>


    </com.ppdai.titlescrollviewdemo.MyScrollView>


    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#0000"
        android:gravity="center"
        android:text="我是标题"
        android:textColor="#0fff" />


</RelativeLayout>

 

标题栏默认在上方是透明的。

 

MainActivity的代码：

 

    
   mParentView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
          ParentView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
          mHeight = mIvTop.getHeight();
          onScrollChanged(mScrollView.getScrollY());
         }
     });
    @Override
    public void onScrollChanged(int y) {

        if (y <= 0) {//未滑动
            mTvTitle.setBackgroundColor(Color.argb((int) 0, 31, 100, 240));
        } else if (y > 0 && y <= mHeight) { //滑动过程中 并且在mHeight之内
            float scale = (float) y / mHeight;
            float alpha = (255 * scale);
            mTvTitle.setTextColor(Color.argb((int) alpha, 255, 255, 255));
            mTvTitle.setBackgroundColor(Color.argb((int) alpha, 31, 100, 240));
        } else {//超过mHeight
            mTvTitle.setBackgroundColor(Color.argb((int) 255, 31, 100, 240));
        }
    }

 

 

这样就实现了ScrollView滑动的时候标题栏渐变的效果了。

我是源码