CoordinatorLayout + AppBarLayout + NavigationDrawer
Posted
技术标签:
【中文标题】CoordinatorLayout + AppBarLayout + NavigationDrawer【英文标题】: 【发布时间】:2015-12-07 23:57:47 【问题描述】:将CoordinatorLayout
与AppBarLayout
和NavigationDrawer
组合时出现布局问题。
问题是,NavigationDrawer 及其内容隐藏在工具栏后面。我已经做了很多研究并尝试了很多重组,但没有一个“解决方案”解决了我的问题。
可以在这个 Webm 小视频中找到演示:https://www.dropbox.com/s/i5zfc2x2ts2fws7/navigation_drawer_***32523188.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_
android:layout_>
<android.support.design.widget.AppBarLayout
android:layout_
android:layout_
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
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_
android:layout_
android:clickable="true"
android:focusableInTouchMode="true">
<android.support.v4.widget.NestedScrollView
android:layout_
android:layout_
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_
android:layout_
android:text="@string/lorem_ipsum_long" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.NavigationView
android:id="@+id/nvView"
android:layout_
android:layout_
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_
android:layout_
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>
【问题讨论】:
【参考方案1】:您的 CoordinatorLayout 包装了 DrawerLayout 和 NavigationView,这意味着 Coordinator 可以控制所有内容的布局方式。您需要将 Coordinator 嵌套在抽屉中,如下所示:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_
android:layout_
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_
android:layout_>
<android.support.design.widget.AppBarLayout
android:layout_
android:layout_
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="enterAlways|scroll" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_
android:layout_
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
android:layout_gravity="start"
android:background="@android:color/white"
app:headerLayout="@layout/nav_header"
app:menu="@menu/navigationdrawer_main" />
</android.support.v4.widget.DrawerLayout>
这应该解决了!
【讨论】:
@slott 你怎么展示一个?我没有弄乱它们,但是这个链接似乎表明您需要将一个 id 附加到协调员,然后在您制作小吃店时将其作为视图传递:developer.android.com/reference/android/support/design/widget/…, int, int ) @GeordieMatt 为什么将android:clickable="true"
添加到DrawerLayout
?
@MehdiDehghani 我刚刚重新排序了原来的 xml,所以你得问问原来的发帖人 :)【参考方案2】:
要补充上一个答案,您可以通过将 CoordinatorLayout+child 元素移动到单独的 xml 文件中来使 DrawerLayout 更干净。然后只需使用“包含”选项来添加文件。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_
android:layout_
android:fitsSystemWindows="true"
tools:openDrawer="start">
<!-- Widget Coordinator + child elements go here -->
<include
layout="@layout/app_bar_main"
android:layout_
android:layout_ />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_
android:layout_
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
【讨论】:
好声音。大多数时候,我使用抽屉作为活动的布局,然后将一个片段加载到您已经包含在内的 FrameLayout 中。意味着我可以使用该活动来处理我所有基于抽屉的导航。 Google 的示例也是这样设计的。如果以这种方式布局,则易于阅读和维护。以上是关于CoordinatorLayout + AppBarLayout + NavigationDrawer的主要内容,如果未能解决你的问题,请参考以下文章
显示没有 CoordinatorLayout 的 Snackbar