仿网易云音乐歌单详情页顶部效果

1. 沉浸式状态栏
   styles-v19

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
     
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>

styles-v21

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>

说明： 设置状态栏透明，可以让ContentView的内容绘制到状态栏

2. fitsSystemWindows
   请参考注释

<FrameLayout 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.brandy.blurtoolbar.MainActivity">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never">

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

            <ImageView
                android:id="@+id/top_img"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/img_test" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/content" />
        </LinearLayout>
    </ScrollView>

    <FrameLayout
        android:id="@+id/blur_content"
        android:layout_width="match_parent"
        android:layout_height="80dp">

        <ImageView
            android:id="@+id/bg_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"></ImageView>

        <!--注意这里toolbar的高度用wrapcontent， 这样设置android:fitsSystemWindows="true"时，toolbar的高度会增加到statusbarHeight + toolbarHeight  -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:minHeight="?attr/actionBarSize"
            app:theme="@style/MyToolbar"
            app:title=" "
            app:titleTextAppearance="@style/ToolbarTextAppearance.Title"></android.support.v7.widget.Toolbar>
    </FrameLayout>
</FrameLayout>

3. 实现起来就很容易了

• 将toolbar透明度设置为0，初始设置bg_view透明度为0
• 加载高度高斯模糊的图片到bg_view和top_img

 Glide.with(MainActivity.this).load(R.mipmap.img_test)
                .centerCrop()
                // 设置高斯模糊
                .bitmapTransform(new BlurTransformation(MainActivity.this, 20, 20))
                .into(top_img);

• 监听ScrollView的滑动，根据滑动的距离来计算并修改bg_view的透明度

  @Override
    public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
        if (topImg_height - mTopHeight >= 0) {
            if (scrollY < topImg_height) {
                float ratio = (float) scrollY / (float) (topImg_height - mTopHeight);
                Log.e(TAG, "onScrollChange: ratio = " + ratio);
                if (ratio <= 1 && ratio >= 0) {
                    bg_view.setAlpha(ratio);
                }
            } else {
                bg_view.setAlpha(1.0f);
            }
        }
    }

4. 补充

//获取Toolbar的系统默认高度
   private int getToolbarHeight() {
        return getResources().getDimensionPixelSize(R.dimen.abc_action_bar_default_height_material);
    }

  //获取Statusbar的高度
  private float getStatusbarHeight() {
        int statusBarHeight1 = -1;
        //获取status_bar_height资源的ID
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            //根据资源ID获取响应的尺寸值
            return getResources().getDimensionPixelSize(resourceId);
        }
        return 0;
    }

在布局中，blur_content给定了一个高度(80dp)，在获取到这两个高度之后，需要重新修改blur_content的高度，来达到更好的效果(其实最好是获取Toolbar测量后的高度)

参考文章

http://www.open-open.com/lib/view/open1455771321605.html
http://www.jianshu.com/p/1995b7135073
http://blog.csdn.net/a_running_wolf/article/details/50477965