代码之家  ›  专栏  ›  技术社区  ›  Pier

无法将DrawerLayout置于StatusBar下

  •  6
  • Pier  · 技术社区  · 8 年前

    我有一个活动 Navigation Drawer 和使用 ScrimInsetsFrameLayout 我能够将布局置于 StatusBar 一切都很顺利。 然后我决定将 Toolbar 状态栏 用一个 png 所有活动布局的背景。 我在模拟器上运行了应用程序(Nexus 5和android 6.0),结果正是我想要的,就像你在 图像#1 但当我在我的设备(Galaxy Note 3和android 5.0)上尝试时,ScrimInsetsFrameLayout中的布局超出了 状态栏 图像#2 . 我不明白怎么了,你能帮我吗?

    这是我的 values-v21 和我的 activity.xml

    <style parent="Theme.AppCompat.Light.NoActionBar" name="AppTheme_Activities">
    
        <item name="android:colorPrimary">@android:color/transparent</item>
        <item name="android:colorPrimaryDark">@color/insetF</item>
        <item name="android:navigationBarColor">@color/insetF</item>
        <item name="android:colorAccent">@color/primary</item>
        <item name="android:colorEdgeEffect">@color/primary</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:statusBarColor">@color/insetF</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    
    </style>
    
    
    
    <?xml version="1.0"?>
    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:id="@+id/drawer"
        android:fitsSystemWindows="true"
        android:background="@drawable/background"> <!--png image-->
    
        <FrameLayout
            android:orientation="vertical"
            android:layout_height="match_parent"
            android:layout_width="match_parent">
    
            <include layout="@layout/toolbar_activities" android:id="@+id/toolbar_layout"/>
    
            <FrameLayout
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:id="@+id/content_frame">
    
            </FrameLayout>
    
        </FrameLayout>
    
        <com.example.myapplication.ScrimInsetsFrameLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/linearLayout"
            android:layout_width="304dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:insetForeground="#4000"
            android:clickable="true"
            android:background="#ffffff"> .....
    
        </com.example.myapplication.ScrimInsetsFrameLayout>
    
    </android.support.v4.widget.DrawerLayout>
    

    图像#1 enter image description here

    图像#2 enter image description here

    2 回复  |  直到 8 年前
        1
  •  2
  •   Community Egal    7 年前

    enter image description here

    1. 添加到您的 onCreate() 属于 Activity

          getWindow().getDecorView().setSystemUiVisibility(
                  View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                          | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
      
    2. 改变 ScrimInsetsFrameLayout android:fitsSystemWindows 属性到 false

    3. 去除 android:fitsSystemWindows="true" 从…起 DrawerLayout

      <android.support.v4.widget.DrawerLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:layout_height="match_parent"
          android:layout_width="match_parent"
          android:id="@+id/drawer"
          android:background="@drawable/background"> <!--png image-->
      
          <FrameLayout
              android:orientation="vertical"
              android:layout_height="match_parent"
              android:layout_width="match_parent">
      
              <include layout="@layout/toolbar_activities" android:id="@+id/toolbar_layout"/>
      
              <FrameLayout
                  android:layout_height="match_parent"
                  android:layout_width="match_parent"
                  android:id="@+id/content_frame">
      
              </FrameLayout>
      
          </FrameLayout>
      
          <com.example.myapplication.ScrimInsetsFrameLayout
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:id="@+id/linearLayout"
              android:layout_width="304dp"
              android:layout_height="match_parent"
              android:layout_gravity="start"
              android:fitsSystemWindows="false"
              app:insetForeground="#4000"
              android:clickable="true"
              android:background="#ffffff"> .....
      
          </com.example.myapplication.ScrimInsetsFrameLayout>
      
      </android.support.v4.widget.DrawerLayout>
      
    4. 将这些样式添加到 AppTheme_Activities 主题(保持状态所需颜色):

              <item name="windowActionBarOverlay">false</item>
              <item name="android:windowActionBarOverlay">false</item>
              <item name="android:fitsSystemWindows">false</item>
              <item name="android:statusBarColor">#4000</item>
      
    5. 这将导致工具栏也位于StatusBar下,因此您需要执行以下操作:

      • 制作 Toolbar 的高度= "wrap_content"

        <android.support.v7.widget.Toolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="?attr/colorPrimary"
             app:popupTheme="@style/AppTheme.PopupOverlay" /> 
        
      • 设置 Padding 对于 工具栏 :

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
        ......
        ......
        public int getStatusBarHeight() {
            int result = 0;
        
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
                int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
                if (resourceId > 0) {
                    result = getResources().getDimensionPixelSize(resourceId);
                }
            }
            return result;
        }  
        

    应该就是这样!

    我已将测试应用程序的源代码和状态栏下方的导航抽屉上传到我的下拉框中- feel free to check it out.

    我之前回答过类似的问题——也许你也会发现它很有用: Translucent StatusBar with dynamic ActionBar color in Android

    我希望,这有帮助

        2
  •  1
  •   Farbod Salamat-Zadeh    8 年前

    我也有同样的问题,皮尔。令人恼火的是,尽管这是材料设计指南的一部分,但似乎没有任何像样的指南来说明如何解决这个问题。

    不管怎样,这是我怎么做的。。。


    样式

    我的 styles.xml 包含一个基本主题,然后是我的主应用程序主题。我为使用导航抽屉的活动创建了另一个主题,如下所示:

    <style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
    
    <style name="AppTheme" parent="Base.AppTheme">
        <item name="colorPrimary">@color/theme_primary</item>
        <item name="colorPrimaryDark">@color/theme_primary_dark</item>
        <item name="colorAccent">@color/theme_accent</item>
    </style>
    
    <style name="AppTheme.NavDrawer">
        <item name="android:windowBackground">@color/window_background</item>
    </style>
    

    颜色 window_background 正在引用我的 colors.xml 文件,该文件将其列为 #FFF5F5F5 。请注意,以上内容对API 21+的工作方式略有不同,因此在 values-v21 目录,创建另一个 样式.xml 。该文件应包括以下内容:

    <style name="AppTheme.NavDrawer">
        <item name="android:windowBackground">@color/window_background</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
    

    布局

    现在来看布局。在导航抽屉所在的布局文件中,可以包含以下内容。

    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main_drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true" >
    
        <!-- The main content view -->
        <RelativeLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
    
            <android.support.design.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@+id/main_adView">
    
                <!-- The app bar -->
                <android.support.design.widget.AppBarLayout
                    android:fitsSystemWindows="true"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >
                    <android.support.v7.widget.Toolbar
                        android:id="@+id/main_toolbar"
                        style="@style/AppTheme.Toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:layout_scrollFlags="scroll|enterAlways"/>
                </android.support.design.widget.AppBarLayout>
    
                <!-- Your layout content below -->
                <FrameLayout
                    android:id="@+id/your_content"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
            </android.support.design.widget.CoordinatorLayout>
    
            <!-- Other stuff here if you like -->
    
        </RelativeLayout>
    
        <!-- The navigation drawer -->
        <include layout="@layout/navdrawer"
            android:id="@+id/main_navigationView" />
    

    显然,您可以删除 RelativeLayout 如果您不需要任何其他视图,因为这将是多余的。我在我的 <include> 标签如下:

    <android.support.design.widget.NavigationView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_height="match_parent"
        android:layout_width="@dimen/navdrawer_width"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navdrawer_header"
        app:menu="@menu/navdrawer_items" />
    

    使用以上代码,您应该在状态栏后面正确绘制导航抽屉。