常见的咨询页面滑动，上标题栏跟随渐变

话不多说，上效果图

随着用户往底下滑动，标题栏渐渐展示出来

1、自定义滑动控件，继承ScrollView，重写3个方法，加上滑动监听和一个接口回调

public class ObservableScrollView extends ScrollView {
    public ObservableScrollView(Context context) {
        super(context);
    }

    public ObservableScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ObservableScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    //ScrollView提供的有一个滑动监听方法,但是外界调用不到,所以我们还是要进行接口的暴露

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mScrollViewListener!=null){
            mScrollViewListener.onScrollChange(this,l,t,oldl,oldt);
        }
    }
    //接口回调
    public  interface ScrollViewListener{
        void onScrollChange(ObservableScrollView scrollView,int l, int t, int oldl, int oldt);
    }
    private ScrollViewListener mScrollViewListener;
    //提供方法 让外界设置监听对象
    public void setmScrollViewListener(ScrollViewListener mScrollViewListener) {
        this.mScrollViewListener = mScrollViewListener;
    }
}

2、xml布局对其进行引用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.ScollViewActivity">

    <com.wd.tech.custom.ObservableScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_detail"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher" />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="5dp">
                <TextView
                    android:id="@+id/tv_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:layout_weight="1"
                    android:textSize="40sp"
                    android:text="孔乙己一到店，所有喝酒的人便都看着他笑，...."/>
            </LinearLayout>
        </LinearLayout>
    </com.wd.tech.custom.ObservableScrollView>


<!--    此处为顶部标题栏-->
    <RelativeLayout
        android:id="@+id/layout_title"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_gravity="top"
        android:padding="5dp">

        <TextView
            android:id="@+id/tv_titlebar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#ff666666"
            android:textSize="20dp"
            android:visibility="gone"/>
    </RelativeLayout>
</RelativeLayout>

3、初始化完控件后

//获取视图树的监听,我们得到视图树绘制完毕,我们再去得到控件的高度
        ViewTreeObserver viewTreeObserver = iv_detail.getViewTreeObserver();
        //使用视图观察者设置监听,以便获取所观察控件的高度
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                //回调监听后的,第一件事情就是移除监听,减少内存的消耗
                iv_detail.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                //得到控件高度（此变量上面定义int型）
                mImageHeight = iv_detail.getHeight();
            }
        });

调用滑动监听，对标题栏设置渐变

//使用我们的自定义ScrollView滚动的监听,滑动超过图片的高度,标题显示出来
        scrollView.setmScrollViewListener(new ObservableScrollView.ScrollViewListener() {
            @Override
            public void onScrollChange(ObservableScrollView scrollView, int l, int t, int oldl, int oldt) {
                //对t参数进行判断,两种形态,一种消失没有 ; 随着滑动颜色越来越深
                Log.d("1801", t + "");
                if (t < 0) {
                    //设置标题隐藏
                    tv_titlebar.setVisibility(View.GONE);
                    //标题背景透明
                    layout_title.setBackgroundColor(Color.argb(0, 0, 0, 0));
                } else if (t > 0 && t < mImageHeight) {
                    //让标题显示出来
                    tv_titlebar.setVisibility(View.VISIBLE);
                    //获取ScrollView向下滑动,图片消失部分的比例
                    float scale = (float) t / mImageHeight;
                    //根据这个比例,让标题的颜色慢慢由浅到深
                    float alpha = 255 * scale;
                    //设置标题的内容及颜色
                    tv_titlebar.setText("孔乙己");
                    tv_titlebar.setTextColor(Color.argb((int) alpha, 0, 0, 0));
                    //设置标题布局颜色
                    layout_title.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
                }
            }
        });

以上就完成了。