android - NavigationView中如何实现CoordinatorLayout和工具栏
问题描述
是否可以实现:NavigationView中的Toolbar使用CoordinatorLayout
代码是否正确?
请给我一个例子并帮助我做到这一点查看照片以更好地理解
activity_main.xml
<!-- notation start -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout >
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/>
<android.support.v7.widget.Toolbar>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- content -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton/>
</android.support.design.widget.CoordinatorLayout>
<!-- notation end-->
<!-- NavigationView -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_activity_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
nav_header_activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/><!-- background Toolbar-->
<android.support.v7.widget.Toolbar>
<!-- app:layout_collapseMode="pin" -->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- START content NavigationView header -->
<LinearLayout>
<ImageView/>
<TextView/>
<TextView/>
</LinearLayout>
<!--END content NavigationView header -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton/>
</android.support.design.widget.CoordinatorLayout>
菜单/activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item/>
<item/>
</group>
<item android:title="Communicate">
<menu>
<item/>
<item/>
</menu>
</item>
<!-- 20 item in menu -->
</menu>
任何帮助将不胜感激。谢谢。
解决方案
您在上面的 xml 代码中缺少一些属性
1-您没有为 appbarlayout、CollapsingToolbarLayout 和 NestedScrollView 设置 layout_height 和 layout_width。
您的 activity_main 应如下所示:
<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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--specify your header layout in NavigationView-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_activity_main"
app:menu="@menu/activity_main_drawer" />
2 - 你的 nav_header_activity_main.xml 布局应该像 (app:headerLayout="@layout/nav_header_activity_main.xml") 一样在 NavigationView 中设置,你应该只为标题内容放置小部件,你应该摆脱那些坐标布局、应用栏、折叠工具栏和工具栏在 nav_header 中
app_bar_main.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- define layout for main content here with NestedScrolView-->
<include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
推荐阅读
- python - 当约束不满足时,Scipy optimize.minimize 成功退出
- javascript - NodeJS - 每次到达一天的结束/开始时如何运行函数?
- mpdf - 如何关闭 mPdf 在生成的 PDF 文件中生成“PDF 格式”文本
- symfony - HWIOAuthBundle 自定义用户提供者不会登录用户
- python - Python:标签错误
- postgresql - npgsql search_path 不起作用
- matlab - 根据来自其他向量的值识别向量中的元素
- javascript - 为什么 jQuery 删除父级-通过插入新元素- 带有 jQuery 的元素?
- python - 在 python 子进程中使用 tail 需要很长时间
- algolia - POST前Algolia自动完成修改查询