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

一时失言乱红尘 2022-04-02 08:23 2195阅读 0赞

### 来两张效果图对比一下 ###

![透明状态栏.png][.png]

![非透明状态栏.png][.png 1]

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

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

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

**[StatusBarUtil 地址][StatusBarUtil]**  
**[StatusBarUtil 在 Fragment 使用][StatusBarUtil _ Fragment]**

### 实现 ###

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

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

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        
        <dimen name="statusbar_view_height">25dp</dimen>
    </resources>

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

1.  给头部带去一些色彩

> 我这里是首页实现 透明状态栏，而首页是由一个 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][.png 2]

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

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

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

[.png]: /images/20220402/41169c86a54c4c93afe06e04c1026fed.png
[.png 1]: /images/20220402/e2e6003dca804e499b63c82e7ff481bf.png
[StatusBarUtil]: https://github.com/laobie/StatusBarUtil
[StatusBarUtil _ Fragment]: https://github.com/laobie/StatusBarUtil/blob/master/sample/src/main/java/com/jaeger/statusbarutil/UseInFragmentActivity.java
[.png 2]: /images/20220402/2fa9b4d5f19144b98c6df4c4c2f7ffa5.png