CoordinatorLayout + AppBarLayout + NavigationDrawer [英] CoordinatorLayout + AppBarLayout + NavigationDrawer
问题描述
将CoordinatorLayout
与AppBarLayout
和NavigationDrawer
组合时,我遇到布局问题.
I have a layouting problem when combining CoordinatorLayout
with an AppBarLayout
and a NavigationDrawer
.
问题在于,NavigationDrawer及其内容隐藏在工具栏的后面.我已经做了很多研究,并尝试了很多重组,但是没有一个解决方案"可以解决我的问题.
The problem is, that the NavigationDrawer and it's content are hidden behind the toolbar. I have already did a lot of research and tried a lot of restructuring, but none of the "solutions" fixed my issue.
在这个Webm视频中可以找到一个演示: https://www.dropbox.com/s/i5zfc2x2ts2fws7/navigation_drawer_stackoverflow32523188.webm?dl=0
A demonstration can be found in this little Webm video: https://www.dropbox.com/s/i5zfc2x2ts2fws7/navigation_drawer_stackoverflow32523188.webm?dl=0
基本样式为Theme.AppCompat.Light.NoActionBar
.
我的 activity_overview.xml 如下:
<?xml version="1.0" encoding="utf-8"?>
<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/overview_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="enterAlways|scroll" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusableInTouchMode="true">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum_long" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.NavigationView
android:id="@+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/white"
app:headerLayout="@layout/nav_header"
app:menu="@menu/navigationdrawer_main" />
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/overview_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="@drawable/ic_add"
app:layout_anchor="@id/overview_coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="@string/fab_onscroll_behavior" />
</android.support.design.widget.CoordinatorLayout>
推荐答案
您的CoordinatorLayout正在包装DrawerLayout和NavigationView,这意味着Coordinator可以控制所有内容的布局方式.您需要将协调器嵌套在抽屉中,如下所示:
Your CoordinatorLayout is wrapping your DrawerLayout and NavigationView, which means the Coordinator is in control of how everything is laid out. You need to nest the Coordinator inside the drawer, like so:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusableInTouchMode="true">
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/overview_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="enterAlways|scroll" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum_long" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/overview_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="@drawable/ic_add"
app:layout_anchor="@id/overview_coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="@string/fab_onscroll_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/white"
app:headerLayout="@layout/nav_header"
app:menu="@menu/navigationdrawer_main" />
</android.support.v4.widget.DrawerLayout>
那应该解决它!
这篇关于CoordinatorLayout + AppBarLayout + NavigationDrawer的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!