android - 半透明/透明状态栏 + CoordinatorLayout + Toolbar + Fragment

Question

我有以下设置:

• 我正在使用 AppCompat
• MainActivity，它包含一个 fragment 并有一个工具栏，向下滚动时会隐藏
• Fragment 与 RecyclerView
• 所有应该适合屏幕的 View 在 xml 布局中都有相应的 android:fitsSystemWindows="true"

问题是，在这种情况下，我无法让状态栏透明。我所做的是:

1. 创建 Activity 并调用 setContent

2. 然后我尝试调整 Activity 以通过编程方式获得半透明工具栏，如下所示:

   @TargetApi(Build.VERSION_CODES.LOLLIPOP)
   public void themeNavAndStatusBar(Activity activity)
   {
       if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
           return;
   
       Window w = activity.getWindow();
       w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
       w.setFlags(
               WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
               WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
       w.setFlags(
               WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
               WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
       w.setNavigationBarColor(activity.getResources().getColor(android.R.color.transparent));
   
       w.setStatusBarColor(activity.getResources().getColor(android.R.color.transparent));
   }
   

3. 将 Activity 中的占位符(@+id/frame_container)替换为 fragment

在这种情况下，状态栏是纯色的，并且 View 不会在其下方绘制...为什么？

我想要什么

我想要一个工具栏，它可以滚动屏幕并完全隐藏，而该工具栏下方的内容应该适合屏幕并绘制在透明导航栏后面。

布局

这是我的主要 Activity :

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/clMain"
    android:fitsSystemWindows="true"
    android:background="?attr/main_background_color"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:fitsSystemWindows="true"
        android:background="@null"
        app:elevation="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="?actionBarThemeStyle"
            app:popupTheme="?actionBarPopupThemeStyle"
            app:layout_scrollFlags="scroll|enterAlways">

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

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/ivToolbarDataSource"
                        android:layout_gravity="center_vertical"
                        android:layout_marginRight="2dp"
                        android:layout_width="24dp"
                        android:layout_height="24dp" />

                    <TextView
                        android:id="@+id/tvToolbarTitle"
                        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                        android:theme="?actionBarThemeStyle"
                        android:layout_gravity="center_vertical"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <TextView
                    android:id="@+id/tvToolbarSubTitle"
                    style="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                    android:theme="?actionBarThemeStyle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>



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

        <!-- BUG: http://stackoverflow.com/questions/30541409/coordinatorlayoutappbarlayout-does-not-draw-toolbar-properly -->
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"/>

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

    <FrameLayout
        android:id="@+id/frame_container"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="32dp"
        android:src="@drawable/ic_local_offer_white_24dp"
        app:backgroundTint="?attr/colorPrimary"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:rippleColor="?attr/colorPrimaryDark"
        app:layout_anchorGravity="bottom|right|end"
        app:layout_behavior="com.test.classes.ScrollAwareFABBehavior"/>

</android.support.design.widget.CoordinatorLayout>

这是我的 fragment ，将放置在主要 Activity 中:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/srlImages"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rvImages"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.v4.widget.SwipeRefreshLayout>

    <TextView
        android:id="@+id/tvEmpty"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

编辑 - 屏幕截图

我使用浅色/深色基础主题和手动主题(因为用户可以选择任何颜色作为主要/强调色)，所以不要介意工具栏是白色的(它是默认的主题背景颜色和主要颜色)颜色)。我还添加了一个黑色边框，以便您看到 Activity 结束的位置...

• 第一个屏幕截图:显示工具栏，没有滚动
• 第二个屏幕截图:我刚开始滚动 => 工具栏现在应该滚开
• 第三张截图:主要内容现在应该在导航栏下方滚动...

最后，我当然会将工具栏和导航栏设置为半透明，以获得更好的视觉效果...

Answer 1

tl;dr 至少将 android:fitsSystemWindows="false" 设置为根 CoordinatorLayout 和内部 fragment 容器 @frame_container.

这可能不是最终解决方案(即可能有其他 fitsSystemWindows 需要更改)所以如果您有任何问题，请告诉我。

为什么

说到状态栏，我觉得fitsSystemWindows是这样的:

• fitsSystemWindows="false" :正常绘制 View ，在状态栏下，因为您设置了窗口标志。
• fitsSystemWindows="true" :正常绘制 View ，在状态栏下，因为您设置了窗口标志，但添加了顶部填充 以便在状态栏下方绘制内容并且它们不会重叠。

其实在我看来，你看到的白色并不是状态栏颜色，而是你的CoordinatorLayout背景。这是由于协调器上的 fitsSystemWindows="true":它将背景绘制到整个窗口，但在内容中添加了顶部填充，因此状态栏不会覆盖内部 View 。

这不是你想要的。您的内部内容必须被状态栏覆盖，因此您必须将 fitsSystemWindows="false" 设置为协调器(因此它不会应用顶部填充)和可能是内容本身。

一旦你了解了它的工作原理， 就很容易调试并达到你想要的效果 。 其实不然。多年过去了，但我仍然花费数小时试图找出正确的 fitSystemWindows 组合，因为大多数 View (至少在支持库中)以大多数不直观的方式覆盖了我上面所说的默认行为。见 this post有关如何使用它的小指南。