学习笔记之状态栏与标题栏悬浮渐变效果

一、概述

现在大多数的电商APP的商品详情页长得几乎都差不多，并且有些需求需要当你滑动的时候，标题栏产生渐变效果，更甚者需要状态栏/导航栏也要有渐变效果。但是Android的环境并没有iOS环境一样特别统一，Android要适配所有机型所有版本那真是。。。Android开发者不容易。。。。。

二、沉浸模式（Immersive Mode）

关于沉浸式状态栏说法 这篇文章讲解的很清楚，本文不在强调。

三、效果对比

淘宝效果

效果一

效果二

这里用到StatusBarUtil 非常不错的状态栏工具，个人不喜欢依赖，所以将library库copy到自己demo项目当中，这样在自己使用过程中可以加深印象而不是盲目的照搬硬套。

四、实现过程

首先说下效果二，布局是一个自定义的webview+include一个topbar，过程就是进入这个页面时加载一个h5网页实现titlebar渐变效果。

先贴上布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <com.lhj.imm.view.MyWebView
                android:id="@+id/wv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></com.lhj.imm.view.MyWebView>
        </LinearLayout>
        <include
            layout="@layout/base_topbar"
            android:layout_width="match_parent"
            android:layout_height="50dp" />
    </FrameLayout>
</RelativeLayout>

这里需要实现WebView的OnScrollChangeListener来监听WebView滑动过程,此时就需要重写WebView控件，否则在4.4以下适配会报错(4.4没测试过) AndroidRuntime: FATAL EXCEPTION: main java.lang.NoClassDefFoundError:com.xxxxxx... 代码错误定位到具体类的那一行是你设置WebView监听，那么说明@TargetApi(Build.VERSION_CODES.M)满足不了，需要重写WebView控件来兼容低版本

public class MyWebView extends WebView {
    public OnScrollChangeListener listener;
    public MyWebView(Context context) {
        super(context);
    }

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

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

    public void setOnScrollChangeListener(OnScrollChangeListener listener){
        this.listener = listener;
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (listener != null) {
            listener.onScrollChanged(this, l, t, oldl, oldt);
        }
    }
    public interface OnScrollChangeListener {
        void onScrollChanged(MyWebView scrollView, int x, int y, int oldx, int oldy);

    }
}

Activity实现MyWebView. OnScrollChangeListener接口

WebView.setOnScrollChangeListener来覆盖重写onScrollChanged方法，

具体代码如下：

@Override
    public void onScrollChanged(MyWebView v,int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
//        float webcontent = v.getContentHeight() * v.getScale();// webview的高度
//        float webnow = v.getHeight() +scrollY;// 当前webview的高度
//        Log.e(TAG, "h=" + height + "," + scrollY+","+v.getContentHeight()+"***"+v.getScale()+"==="+webcontent+","+webnow);
        if (scrollY <= 0) {//置顶
            Log.e(TAG, "已经处于顶端h=" + height + "," + scrollY);
            Toast.makeText(this,"已经处于顶端",Toast.LENGTH_SHORT).show();
        } else if (scrollY==height) {// 已经处于底端
            Log.e(TAG, "已经处于底端h=" + height + "," + scrollY);
            Toast.makeText(this,"已经处于底端",Toast.LENGTH_SHORT).show();
        } else {//滑动过程
            float scale = (float) scrollY / height;
            int alpha = (int) (255 * scale);
            //可以根据scale或者alpha来设置渐变过程的效果
            //如果背景是图片可以setImageAlpha方法来设置图片透明渐变效果，如：
            //base_left_iv.setImageAlpha(255 - alpha);
            //也可以使用setBackground方法来设置背景颜色渐变效果
            //如果背景颜色是Drawable且圆角等，可以强转GradientDrawable来设置背景颜色渐变效果，如：
            //((GradientDrawable) base_left_rl.getBackgroun