Android Fragment 实现状态栏透明（沉浸式）

来两张效果图对比一下

透明状态栏.png 非透明状态栏.png

第一张图是实现了透明状态栏的效果，第二张图是未实现透明状状态栏。如果还看不出区别，那么请打开手机淘宝和任一手机银行App对比顶部的颜色。

现在好多手机已经是全面屏了，如果我们的应用在顶部还是多出来这么一块黑条，那多不美观啊（APP 主题色是黑色的略过）

那么如何实现？我这里由于项目集成了 statusbarutil所以直接就参考了他例子中的代码来实现了。

StatusBarUtil 地址
StatusBarUtil 在 Fragment 使用

实现

1. 导包
   compile 'com.jaeger.statusbarutil:library:1.4.0'
2. 设置 NoActionBar的主题( 我这里实现了右滑返回，所以设置背景为透明)

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textAllCaps">false</item>
        <item name="android:windowActionBar">false</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowAnimationStyle">@style/AnimationActivity</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

3. 区别不同版本对待
   新建一个res/values-v19目录，在目录下创建一个dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="statusbar_view_height">25dp</dimen>
</resources>

在原先的res/values目录下的dimens.xml也添加statusbar_view_height

<dimen name="statusbar_view_height">0dp</dimen>

4. 给头部带去一些色彩

我这里是首页实现 透明状态栏，而首页是由一个 Activity + 4 个 Fragment 组成的。这里我们只需要将 Activity状态栏透明即可，在Fragment中可动态设置是否需要透明状态栏。

比如我的首页，顶部是显示图片，我想它顶部状态栏要透明，可以这么做。

第一步：在布局文件的顶部加上<LinearLayout></LinearLayout>中的控件

 <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <com.youth.banner.Banner
                android:id="@+id/banner"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                app:layout_scrollFlags="scroll|snap"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:layout_collapseMode="pin"
                app:contentInsetStart="0dp">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <View
                        android:id="@+id/fake_status_bar"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/statusbar_view_height"
                        android:background="@color/colorPrimary"/>
                    <TextView
                        android:id="@+id/search_layout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="40dp"
                        android:gravity="center"
                        android:hint="@string/search_hint_txt"
                        android:paddingStart="10dp"
                        android:paddingEnd="10dp"
                        android:background="@drawable/home_search_bg_shape"/>
                </LinearLayout>

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

id为fake_status_bar 的View控件是为了适配顶部的状态栏
id为search_layout 的View控件是顶部的搜索框

第二步：在 fragment 中再设置状态栏的颜色为透明

// 透明顶部
setTvTitleBackgroundColor(Color.TRANSPARENT);

public void setTvTitleBackgroundColor(@ColorInt int color) {
   fakeStatusBar.setBackgroundColor(color);
}

再比如我的其他页面顶部只想显示 App 的主题色，可以这么做。

设置状态栏颜色.png

直接在布局文件中设置 id为fake_status_bar控件的背景色为主题色即可。

 <LinearLayout
        android:id="@+id/layout_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <View
            android:id="@+id/fake_status_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/statusbar_view_height"
            android:background="@color/colorPrimary"/>
        <TextView
            android:id="@+id/tv_project_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:text="我是 Toolbar "
            android:textColor="@color/white"
            android:textSize="18sp"
            android:gravity="center"
            android:background="@color/colorPrimary"/>
    </LinearLayout>

喜欢文章的话点下文章底部小心心

本文完，欢迎你留言讨论。