- 沉浸式状态栏
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的内容绘制到状态栏
- 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>
- 实现起来就很容易了
- 将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);
}
}
}
- 补充
//获取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
