如何将页脚添加到 NavigationView - Android 支持设计库?
Posted
技术标签:
【中文标题】如何将页脚添加到 NavigationView - Android 支持设计库?【英文标题】:How to add footer to NavigationView - Android support design library? 【发布时间】:2015-08-13 03:33:13 【问题描述】:如何将页脚设置和配置文件项目设置为NavitationView
?看起来像电子邮件导航抽屉的收件箱。 NavitationView
项目被菜单资源膨胀,但我不知道如何将底部项目设置为菜单资源,或者如何将自定义视图设置为 NavigationView
或底部偏移量?我曾尝试将此<LinearLayout...>
作为页脚视图,但在小屏幕上,页脚会覆盖项目并且我无法滚动菜单,我尝试将页脚填充设置为NavigationView
,但页脚也采用了填充。
这不是在小屏幕上滚动:
<android.support.design.widget.NavigationView
android:id="@+id/drawer"
android:layout_
android:layout_
android:layout_gravity="start"
app:headerLayout="@layout/kuona_drawer_header"
app:menu="@menu/drawer">
<LinearLayout...>
</android.support.design.widget.NavigationView>
这会滚动,但页脚位于菜单项上方:
<android.support.design.widget.NavigationView
android:id="@+id/drawer"
android:layout_
android:layout_
android:layout_gravity="start"
android:paddingBottom="96dp"
app:headerLayout="@layout/kuona_drawer_header"
app:menu="@menu/drawer">
<LinearLayout...>
</android.support.design.widget.NavigationView>
抽屉菜单res/menu/drawer.xml
文件:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/action_current_list"
android:checked="true"
android:icon="@drawable/ic_current_list"
android:title="@string/current_list" />
<item
android:id="@+id/action_manage_lists"
android:icon="@drawable/ic_my_lists"
android:title="@string/my_lists" />
<item
android:id="@+id/action_search_products"
android:icon="@drawable/ic_search_black_24dp"
android:title="@string/search_products" />
<item
android:id="@+id/action_deals"
android:icon="@drawable/ic_product_promo"
android:title="@string/deals" />
</group>
</menu>
【问题讨论】:
你把@menu/drawer文件放在哪个位置了.. 在/res/menu/drawer.xml
您是否有不能将“反馈”和“退出”作为菜单项的原因?如果原因是您想动态更改“退出”的菜单图标,您应该可以使用menuItem.setIcon(Drawable)
来做到这一点。
这只是为了满足要求,我个人想知道谷歌是如何在收件箱应用中做到这一点的。
随着 23.1 的更新,这个问题变得更加重要
【参考方案1】:
如果您想在导航菜单中使用固定(非滚动)页脚,则需要将 NavigationView 包裹在另一个布局中,就像您发布的那样。 NavigationView 的工作方式与 FrameLayout 类似,因此最终会将内部布局“堆叠”在 NavigationView 菜单项的顶部。这是一种排列方式,使用 LinearLayout 作为页脚项:
固定页脚
<android.support.design.widget.NavigationView
android:id="@+id/drawer"
android:layout_
android:layout_
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer">
<LinearLayout
android:layout_
android:layout_
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<TextView
android:id="@+id/footer_item_1"
android:layout_
android:layout_
android:gravity="center"
android:text="Footer Item 1" />
<TextView
android:id="@+id/footer_item_2"
android:layout_
android:layout_
android:gravity="center"
android:text="Footer Item 2" />
</LinearLayout>
</android.support.design.widget.NavigationView>
我在这个例子中使用了 TextViews,但是你可以使用任何你想要的页脚视图。为避免页脚项目与菜单底部重叠,请在菜单资源文件的末尾添加一些虚拟项目(这些项目的作用类似于“空格”):
res/menu/drawer.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item
android:id="@+id/nav_item_1"
android:icon="@drawable/ic_nav_item_1"
android:title="Nav Item 1" />
<item
android:id="@+id/nav_item_2"
android:icon="@drawable/ic_nav_item_2"
android:title="Nav Item 2" />
<item
android:id="@+id/nav_item_3"
android:icon="@drawable/ic_nav_item_3"
android:title="Nav Item 3" />
<item
android:id="@+id/nav_item_4"
android:icon="@drawable/ic_nav_item_4"
android:title="Nav Item 4" />
<item
android:id="@+id/footer_spacer_1"
android:checkable="false"
android:enabled="false"
android:orderInCategory="200"
android:title="" />
<item
android:id="@+id/footer_spacer_2"
android:checkable="false"
android:enabled="false"
android:orderInCategory="200"
android:title="" />
</group>
</menu>
最后,不要忘记在 Activity 中为实际的页脚视图添加点击侦听器:
...
// Click listener for nav footer.
View navFooter1 = findViewById(R.id.footer_item_1);
navFooter1.setOnClickListener(new View.OnClickListener()
@Override
public void onClick(View v)
// Do footer action
);
View navFooter2 = findViewById(R.id.footer_item_2);
navFooter2.setOnClickListener(new View.OnClickListener()
@Override
public void onClick(View v)
// Do footer action
);
...
滚动页脚
如果您允许页脚与 NavigationView 的其余部分一起滚动,它会使事情变得更简单(无需额外的布局或点击侦听器)。只需将页脚项作为唯一的<group>
添加到您的菜单资源文件(这将创建一个separator line),所有内容都将自动处理并一起滚动:
res/menu/drawer.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/nav_menu">
<item
android:id="@+id/nav_item_1"
android:icon="@drawable/ic_nav_item_1"
android:title="Nav Item 1" />
<item
android:id="@+id/nav_item_2"
android:icon="@drawable/ic_nav_item_2"
android:title="Nav Item 2" />
<item
android:id="@+id/nav_item_3"
android:icon="@drawable/ic_nav_item_3"
android:title="Nav Item 3" />
<item
android:id="@+id/nav_item_4"
android:icon="@drawable/ic_nav_item_4"
android:title="Nav Item 4" />
</group>
<group android:id="@+id/nav_footer">
<item
android:id="@+id/nav_footer_1"
android:icon="@drawable/ic_footer_item_1"
android:title="Footer Item 1" />
<item
android:id="@+id/nav_footer_2"
android:icon="@drawable/ic_footer_item_2"
android:title="Footer Item 2" />
</group>
</menu>
【讨论】:
这只是为了满足要求,我个人想知道谷歌是如何在收件箱应用中做到这一点的。 我不确定 Google 是如何在 gmail 应用程序中做到这一点的,但从外观上看,它看起来就像我在答案中描述的那样。如果您需要分隔线,请使用单独的<group>
,否则,gmail 应用程序的导航页脚看起来就像普通菜单项(至少对我而言)。
啊,我明白了。我以为你在谈论 gmail 应用程序。我还没有安装收件箱应用程序,但如果您正在寻找静态页脚,那么您是对的,您必须使用单独的布局。不过这应该不会太难。让我们看看...
您可以在dimen.xml
中使用<dimen name="design_navigation_padding_bottom" tools:override="true">48dp</dimen>
,而不是在菜单中使用虚拟项目!太完美了!
如何为页脚文本视图设置抽屉项目的字体和字体大小?【参考方案2】:
我只是给你提示如何解决它,但我没有机会在 NavigationView 上测试它,我很确定它会工作
这里是示例布局 xml;
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:clipToPadding="false"
android:paddingBottom="96dp">
<TextView
android:layout_
android:layout_
android:background="#6F00" />
<TextView
android:layout_
android:layout_
android:layout_gravity="bottom"
android:layout_marginBottom="-96dp"
android:background="#600F" />
</FrameLayout>
结果如下:
诀窍是对父级应用内边距,对子级应用边距。
快速尝试:
<?xml version="1.0" encoding="utf-8"?>
<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_
android:layout_
android:layout_gravity="start"
android:clipToPadding="false"
android:paddingBottom="96dp"
app:headerLayout="@layout/sample_header"
app:menu="@menu/sample_menu">
<TextView
android:layout_
android:layout_
android:layout_gravity="bottom"
android:layout_marginBottom="-96dp"
android:background="#600F"
android:gravity="center"
android:text="I STAND BY MY SELF" />
</android.support.design.widget.NavigationView>
【讨论】:
这可能会奏效,但负边距是相当骇人听闻的。所以,就我个人而言,我尽可能避免使用它们。 此页脚,如果您将图标放在“底部”居中,您可以根据屏幕进行更改并被剪切,请参阅此帖子***.com/questions/32460312/… 您能提供任何有关完整示例的链接吗? 我们可以将其设置为可滚动吗?【参考方案3】:按照嵌套导航视图的其他答案中描述的方法,出现了一些问题:
有很多项目,或在横向模式下,页脚与菜单项重叠 如果真正的菜单有很多项目,嵌套的 NavigationView 会滚动,这看起来不太好 嵌套中有两个 NavigationView,不允许将自定义视图定义为页脚。 嵌套滚动视图的处理一团糟(有时会出现两个滚动条等) 固定页脚应始终位于底部(菜单项少也多)我对所有这些问题的解决方案如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout ...>
<include layout="@layout/main_content"/>
<android.support.design.widget.NavigationView ...>
<android.support.v4.widget.NestedScrollView
...
android:fillViewport="true"
android:scrollbars="vertical">
<LinearLayout
...
android:orientation="vertical">
<android.support.design.widget.NavigationView
...
app:elevation="0dp"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu">
</android.support.design.widget.NavigationView>
<LinearLayout
android:id="@+id/spacer_to_bottom"
...
android:layout_
android:layout_weight="1">
</LinearLayout>
<include layout="@layout/nav_footer"></include>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
这里,NestedScrollView 充当子 NavigationView 的滚动父级。 这意味着,子 NavigationView 本身永远不会显示滚动条,而是以平面方式显示整个内容。
布局“spacer_to_bottom”填满了所有剩余空间,因此在菜单图标很少的情况下,页脚仍位于底部。
最后,固定页脚被添加到线性布局中,它从真正的菜单(子导航视图)开始,间隔,底部有页脚。
在这里您可以找到完整的工作示例,如 AndroidStudio-Project:https://github.com/MarcDahlem/AndroidSidemenuFooterExample
特别是导航抽屉可以在这里找到: https://github.com/MarcDahlem/AndroidSidemenuFooterExample/blob/master/app/src/main/res/layout/activity_main.xml
截图:
【讨论】:
究竟是什么不起作用?如果需要,我可以提供一个示例项目,它非常适合滚动页脚。 @AndreaBaccega 我同意@AndreaBaccega,不工作,只显示导航菜单,不显示页脚 好的,第二个有问题。我将创建一个示例项目并将其上传到 github。铜很快 我在github上添加了一个示例项目:github.com/MarcDahlem/AndroidSidemenuFooterExample 高度属性的大赞。我采用相同的方法,但无法摆脱底部阴影。然后,我发现了这个。谢谢!【参考方案4】:最简单的答案是在抽屉布局中添加一个按钮,并将其重力设置为navigationview.xml
的底部。
代码如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/navigation"
android:layout_
android:layout_
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/menu_navigation">
<Button
android:id="@+id/btn_sing_in"
android:layout_
android:layout_
android:text="@string/sign_in"
android:layout_gravity="bottom"/>
</android.support.design.widget.NavigationView>
【讨论】:
对于少数菜单项,这可能有效。但是一旦您有许多菜单项,按钮就会与小型设备或横向模式下的菜单项重叠。 true 但是要克服这个问题,您可以放置空菜单项。 几乎可以将底部与不同屏幕尺寸的空菜单项对齐。但是,正如我在解决方案中描述的那样,有一种通用的方法可以做到这一点;-) --> 请参阅我的解决方案***.com/a/37714353/1075072【参考方案5】:我知道它迟到的答案,但它是大多数开发人员都在寻找的完美而准确的答案。
要在导航视图中添加页脚,请在导航菜单中添加自定义视图,如下所示:
footer_navigation_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:orientation="horizontal">
<android.support.v7.widget.AppCompatTextView
android:layout_
android:layout_
android:layout_alignParentLeft="true"
android:text="@string/version" />
<android.support.v7.widget.AppCompatTextView
android:layout_
android:layout_
android:layout_alignParentRight="true"
android:gravity="right" />
</RelativeLayout>
现在,将上面的视图添加到带有 group 属性的菜单 xml 中。这样,它可以区分为菜单中的页脚。
profile_menu.xml
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_support"
android:title="@string/nav_item_support" />
<item
android:id="@+id/nav_settings"
android:title="@string/nav_item_settings" />
<item
android:id="@+id/nav_log_out"
android:title="@string/nav_item_log_out" />
</group>
<group
android:id="@+id/nav_footer">
<item
android:id="@+id/nav_log_version"
app:actionLayout="@layout/footer_navigation_menu" />
</group>
就是这样。下面是输出:
【讨论】:
它在复杂的底视图中不起作用,因为它为底视图提供了固定的高度。 它可能有效,但无法将 onClickListeners 设置为页脚布局内的视图...在我的情况下,页脚上有社交媒体按钮发送到外部 url,但无法获取视图以我能想到的任何方式使用它们的 ID... @RamiroG.M. nav_veiw.getmenu().finItemByid().actionalyout.findviewbyid().setOnclicklisner 是的,@Sagar Maiyad 您的回答是准确的,大多数开发人员都希望这样做。要在自定义布局中获取视图,您可以使用以下代码: View footerView=nav_view.getMenu().findItem(R.id.footer).getActionView(); TextView 许可证 = footerView.findViewById(R.id.licence); TextView 版本 = footerView.findViewById(R.id.version);【参考方案6】:您需要有一个容器导航视图布局,然后它应该包含另外两个导航布局。您将它们与父布局的顶部和底部对齐。
我建议使用导航视图作为父视图而不是 FrameLayout,因为它本质上是 ScrimFrameLayout 并且与状态栏的交互更好。
以下是您的活动应该是什么样子的示例:
<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/layout_dashboard"
android:layout_
android:layout_
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<!-- Activity content goes here -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_drawer_container"
android:layout_
android:layout_
android:layout_gravity="start">
<android.support.design.widget.NavigationView
android:id="@+id/navigation_drawer"
android:layout_
android:layout_
android:layout_gravity="top"
app:menu="@menu/menu_navigation_drawer" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation_drawer_bottom"
android:layout_
android:layout_
android:layout_gravity="bottom"
app:menu="@menu/menu_navigation_drawer_bottom" />
</android.support.design.widget.NavigationView>
您可以阅读更多相关信息并在此处查看示例:http://blog.nitish.io/post/122633295558/android-design-library-navigationview-with-top
【讨论】:
这真是一个不错的解决方案。但是包装内容在顶部和底部 NavigationView 上都不起作用。您必须提供一些恒定的高度以防止底部 NavigationView 阻塞顶部 NavigationView。 完美解决方案 @Nitish 如何在“@+id/navigation_drawer”在纵向模式下具有更多值时避免重叠。它位于底部导航视图的后面。在我的例子中,顶部导航视图菜单项是动态填充的,底部导航视图具有静态菜单值。【参考方案7】:NavigationView 没有添加页脚的规定真是令人遗憾。不过你可以试试这样的,
<?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">
<include
layout="@layout/app_bar_base"
android:layout_
android:layout_ />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view_container"
android:layout_
android:layout_
android:fitsSystemWindows="false"
android:layout_gravity="start"
>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_
android:layout_
android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbars="vertical"
android:isScrollContainer="true"
app:headerLayout="@layout/nav_header_base"
app:menu="@menu/activity_base_drawer"
android:layout_gravity="top"
android:layout_marginBottom="x"
/>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view_footer"
android:layout_
android:layout_
app:headerLayout="@layout/hear_layout"
app:menu="@menu/menu_items"
android:scrollbars="none"
android:layout_gravity="bottom"
/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
如果你的页脚是一个列表,
app:headerLayout="@null"
app:menu="@menu/activity_base_drawer_footer"
但是,如果是某种自定义视图,
app:headerLayout="@layout/my_cutom_footer_view"
app:menu="@null"
另外,在这种情况下,您需要设置x = height of your custom footer view
希望对你有帮助。
【讨论】:
谢谢兄弟。你让我开心..:) 3 个导航视图?为什么?对于最差的表现?请观看其中一些视频:youtube.com/playlist?list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE @LouisCAD 如果您有一个实际可行且没有负边距的解决方案,请与我们分享。我有这里提到的问题,这是我考虑的唯一解决方案。也许不是完美的解决方案,并且可能会对性能产生一些影响......但是如果没有其他实现,请不要仅仅评论性能问题。首先,应用程序要求很重要。如果 Google 没有为您的应用需求提供解决方案...您没有太多选择。 我认为这是正确的做法。从这里尝试了不同的答案,发现这最有帮助。谢谢【参考方案8】:我用以下方式做了同样的事情:
<?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">
<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"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"
>
<LinearLayout android:layout_gravity="bottom"
android:background="#20191d1e"
android:layout_
android:paddingBottom="2dp"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="2dp"
android:orientation="horizontal"
android:layout_>
<ImageView
android:id="@+id/company_image_id"
android:layout_
android:layout_
android:layout_margin="@dimen/margin1dp"
android:padding="@dimen/margin2dp"
android:src="@mipmap/ic_launcher_round"
/>
<TextView
android:id="@+id/txtCompanyName"
android:layout_ android:layout_marginLeft="@dimen/margin3dp"
android:layout_
android:textSize="13dp" android:layout_gravity="center"
android:textStyle="bold"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
这里主要是我将布局重力放在底部,例如
LinearLayout android:layout_gravity="bottom"
【讨论】:
有了这个解决方案,底部视图将浮动在菜单项上(如果有多个菜单项)......但我希望它固定在底部。【参考方案9】:这就是我在导航底部添加布局的方式:
更新的库
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_drawer_container"
android:layout_
android:layout_
android:layout_gravity="start">
<androidx.core.widget.NestedScrollView
android:layout_
android:layout_
android:fillViewport="true">
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical">
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_
android:layout_
android:layout_gravity="top"
android:layout_weight="0.8"
app:headerLayout="@layout/nav_header_home"
app:menu="@menu/activity_home_drawer" />
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_drawer_bottom"
android:layout_
android:layout_
android:layout_weight="0.2">
<LinearLayout
android:id="@+id/linearLayout"
android:layout_
android:layout_
android:layout_alignParentBottom="true"
android:layout_below="@+id/scrollView"
android:orientation="vertical">
<TextView
android:id="@+id/text_dashboard_followUsAt"
android:layout_
android:layout_
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:text="Follow us at" />
<LinearLayout
android:layout_
android:layout_
android:orientation="horizontal"
android:paddingLeft="16dp"
android:paddingStart="16dp">
<ImageView
android:layout_
android:layout_
android:padding="5dp"
android:src="@drawable/fb" />
<ImageView
android:layout_
android:layout_
android:padding="5dp"
android:src="@drawable/fb" />
<ImageView
android:layout_
android:layout_
android:padding="5dp"
android:src="@drawable/fb" />
</LinearLayout>
<TextView
android:id="@+id/text_dashboard_version"
android:layout_
android:layout_
android:layout_gravity="end"
android:layout_marginTop="25dp"
android:paddingBottom="5dp"
android:paddingEnd="16dp"
android:paddingRight="16dp"
android:text="Version 1.0" />
</LinearLayout>
</com.google.android.material.navigation.NavigationView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</com.google.android.material.navigation.NavigationView>
【讨论】:
这是在导航视图底部添加页脚布局的正确解决方案。虽然不需要我在这个答案中编辑过的线性布局。 你是如何在这个活动中设置导航项选择的监听器的? @zohaib khaliq 您可以将其附加到 navView【参考方案10】:按照您的方法,一些小的更改可以帮助您实现想要实现的目标。
<LinearLayout
android:layout_
android:layout_
android:layout_gravity="bottom"
android:background="@color/background_material_light">
<TextView
android:id="@+id/footer_item"
android:layout_
android:layout_
android:background="?attr/selectableItemBackground"
android:gravity="center_vertical"
android:paddingLeft="?attr/listPreferredItemPaddingLeft"
android:text="Something"
android:textAppearance="?attr/textAppearanceListItem" />
</LinearLayout>
并在菜单中设置一些存根项,使菜单项不重叠。
<group>
...
<item
android:title=""
android:orderInCategory="200"/>
</group>
您还想为您的页脚项目添加一个点击监听器。
【讨论】:
感谢您的回答,这给了我添加页脚的解决方法,但如果没有人给我更好的答案,我希望接受您的回答。 +1 确实保持您的选择开放。期待更好的答案,因为页脚很重要。【参考方案11】:我的固定页脚和滚动菜单解决方案(100% 测试)
<android.support.design.widget.NavigationView
android:id="@+id/container_navigation"
android:layout_
android:layout_
android:layout_gravity=""
android:nestedScrollingEnabled="true"
android:scrollIndicators="none">
<RelativeLayout
android:layout_
android:layout_>
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_
android:layout_
android:layout_above="@+id/navigation2"
android:layout_gravity="top"
android:nestedScrollingEnabled="true"
android:paddingBottom="@dimen/dimen_20_dp"
app:headerLayout="@layout/nav_header"
app:itemIconTint="@color/black_800"
app:itemTextColor="@color/black_800"
app:menu="@menu/navigation_drawer_items">
</android.support.design.widget.NavigationView>
<android.support.design.widget.NavigationView
android:id="@+id/navigation2"
android:layout_
android:layout_
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_
android:layout_
android:layout_gravity="bottom"
android:background="@color/white_100"
android:orientation="horizontal">
<TextView
android:id="@+id/empty_spacer"
android:layout_
android:layout_
android:layout_weight="1"
android:drawableTop="@drawable/ic_search"
android:gravity="center"
android:text="Share" />
<TextView
android:id="@+id/mnuRate"
android:layout_
android:layout_
android:layout_weight="1"
android:drawableTop="@drawable/ic_search"
android:gravity="center"
android:text="Rate" />
<TextView
android:id="@+id/mnuHelp"
android:layout_
android:layout_
android:layout_weight="1"
android:drawableTop="@drawable/ic_search"
android:gravity="center"
android:text="Help" />
</LinearLayout>
</android.support.design.widget.NavigationView>
</RelativeLayout>
</android.support.design.widget.NavigationView>
【讨论】:
【参考方案12】:NavigationView
第一个孩子是 ListView
包含标题和菜单项。
唯一需要添加页脚的就是调用 .addFooterView 到 ListView
更多信息:http://www.andreabaccega.com/blog/2015/08/28/how-to-add-footer-to-navigationview/
复制粘贴代码:
public void onViewCreated(View view, @Nullable Bundle savedInstanceState)
super.onViewCreated(view, savedInstanceState);
ListView listView = (ListView) navigationView.getChildAt(0);
View toRet = LayoutInflater.from(view.getContext()).inflate(R.layout.drawer_footer, listView, false);
// Manipulate the view (if you need to) before calling addFooterView.
listView.addFooterView(toRet, null, false);
【讨论】:
在 'com.android.support:design:23.1.0' 上不起作用。它已成为 NavigationMenuPresenter 中的 RecyclerView 我添加了一个新答案,可能会解决您的问题。【参考方案13】:只需在 NavigationView 中放置另一个布局:
<android.support.design.widget.NavigationView
android:layout_
android:layout_
android:layout_gravity="start"
android:background="#000000"
app:itemTextColor="#FFFFFF"
app:headerLayout="@layout/fragment_side_menu_header"
app:menu="@menu/side_menu">
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical"
android:layout_gravity="bottom">
<TextView
android:textColor="#FFFFFF"
android:layout_
android:layout_
android:text="test" />
<TextView
android:textColor="#FFFFFF"
android:layout_
android:layout_
android:text="test2" />
</LinearLayout>
</android.support.design.widget.NavigationView>
诀窍是使用 layout_gravity="bottom" - 这会将您的整个布局放在底部并且 test,test2 正确堆叠。
【讨论】:
【参考方案14】:使用这个..
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_
android:layout_
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:itemIconTint="@color/accent"
app:itemTextColor="@color/primary_text"
app:menu="@menu/navigation_drawer_items">
<LinearLayout
android:layout_
android:layout_
android:layout_gravity="bottom"
android:background="@color/grey_200"
android:orientation="vertical">
<View
android:layout_
android:layout_
android:background="@color/grey_600"/>
<com.facebook.share.widget.LikeView
android:id="@+id/like_view"
android:layout_
android:layout_
android:layout_gravity="start"
android:padding="@dimen/small"/>
<com.facebook.login.widget.LoginButton
android:id="@+id/login_button"
android:layout_
android:layout_
android:layout_margin="@dimen/small"/>
</LinearLayout>
</android.support.design.widget.NavigationView>
然后将底部填充设置为 NavigationMenuView
final View menuView = navigationView.getChildAt(0);
final View bottomView = navigationView.getChildAt(1);
bottomView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
@Override
public void onGlobalLayout()
menuView.setPadding(0, 0, 0, bottomView.getMeasuredHeight());
);
【讨论】:
【参考方案15】:试试这个,这对我有用。
<android.support.design.widget.NavigationView
android:id="@+id/nav_view1"
android:layout_
android:layout_
android:layout_gravity="start"
android:fitsSystemWindows="true">
<ScrollView
android:layout_
android:layout_>
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:layout_
android:layout_
android:id="@+id/nav_view"
app:headerLayout="@layout/nav_header_admin"
app:menu="@menu/activity_admin_drawer"/>
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical"
android:id="@+id/lyNavFooter">
<!--INCLUDE YOUR FOOTER HERE -->
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.design.widget.NavigationView>
【讨论】:
【参考方案16】:我使用这种形式,为我工作。横向和纵向。
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_
android:layout_
android:layout_gravity="start">
<LinearLayout
android:orientation="vertical"
android:layout_
android:layout_>
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_
android:layout_
android:layout_weight="1"
app:headerLayout="@layout/master_main_header"
app:itemIconTint="@color/blue"
app:menu="@menu/menu_drawer">
</android.support.design.widget.NavigationView>
<Button
android:id="@+id/master_btn_closession"
android:layout_
android:layout_
android:layout_weight="0"
android:background="@color/blue"
android:text="Cerrar sesión" />
</LinearLayout>
</android.support.design.widget.NavigationView>
【讨论】:
【参考方案17】:
<include
layout="@layout/app_bar_main"
android:layout_
android:layout_ />
<android.support.design.widget.NavigationView
android:layout_
android:layout_
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="@menu/activity_main_drawer">
<android.support.v4.widget.NestedScrollView
android:layout_
android:layout_
android:fillViewport="true"
android:scrollbars="vertical">
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_
android:layout_
app:elevation="0dp"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer">
></android.support.design.widget.NavigationView>
<LinearLayout
android:id="@+id/spacer_to_bottom"
android:layout_
android:layout_
android:layout_weight="1"
android:orientation="vertical" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:layout_
android:layout_
android:layout_gravity="bottom"
android:layout_marginBottom="0dp">
<include layout="@layout/nav_footer_main" />
</LinearLayout>
</android.support.design.widget.NavigationView>
【讨论】:
添加一些解释,说明此答案如何帮助 OP 解决当前问题 我找到了解决方案。您必须在<android.support.design.widget.NavigationView>...</android.support.design.widget.NavigationView>
中包含页脚的静态布局。有关更多详细信息,请查看 github 存储库 (github.com/mehul0/AndroidSidemenuFooterExample-master)【参考方案18】:
这对我来说可以将图像放在导航抽屉的页脚(纵向和横向)
<?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">
<include
layout="@layout/app_bar_main3"
android:layout_
android:layout_ />
<android.support.design.widget.NavigationView
android:layout_
android:layout_
android:layout_gravity="start"
android:background="#f00"
android:fitsSystemWindows="true"
app:menu="@menu/activity_main3_drawer">
<android.support.v4.widget.NestedScrollView
android:layout_
android:fillViewport="true"
android:layout_
android:scrollbars="vertical">
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
app:elevation="0dp"
android:layout_
android:layout_
android:background="#ff0"
app:headerLayout="@layout/nav_header_main3"
app:menu="@menu/activity_main3_drawer">
></android.support.design.widget.NavigationView>
<LinearLayout
android:id="@+id/spacer_to_bottom"
android:layout_
android:orientation="vertical"
android:background="#0f0"
android:layout_
android:layout_weight="1">
<include layout="@layout/nav_footer_main3"></include>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
我的 nav_footer_main3 是
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_
android:layout_>
<ImageView
android:id="@+id/imageView"
android:layout_gravity="center_horizontal"
android:layout_
android:layout_
android:background="@drawable/logo_1" />
</LinearLayout>
【讨论】:
【参考方案19】:抽屉式菜单中置顶页眉和页脚的布局结构:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout>
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.AppBarLayout>
<LinearLayout>
<include layout="@layout/drawer_header"/>
<android.support.design.widget.NavigationView/>
<include layout="@layout/drawer_footer"/>
</LinearLayout>
</android.support.v4.widget.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:layout_
android:layout_
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_
android:layout_
android:theme="@style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_
android:layout_
android:background="@color/white"
android:layout_gravity="start"
android:orientation="vertical">
<include layout="@layout/drawer_menu_header"/>
<android.support.design.widget.NavigationView
android:id="@+id/drawer_menu_body"
app:elevation="0dp"
android:layout_
android:layout_
android:layout_weight="1"
android:background="@color/white"
android:theme="@style/AppTheme.PopupOverlay"
app:menu="@menu/main_drawer">
</android.support.design.widget.NavigationView>
<include layout="@layout/drawer_menu_footer"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
【讨论】:
【参考方案20】:试试这个,这对我有用。https://github.com/MarcDahlem/AndroidSidemenuFooterExample/blob/master/app/src/main/res/layout/activity_main.xml
但是,您可以禁用 NavigationViewScrolling 以获得更流畅的滚动
private void disableNavigationViewScrolling(NavigationView navigationView)
if (navigationView != null)
NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);
if (navigationMenuView != null)
navigationMenuView.setNestedScrollingEnabled(false);
Screenshots:
【讨论】:
【参考方案21】:版本 > 23.x.x 的滚动页脚
我终于设法实现了我想要的,不幸的是,它看起来不再像在 23.x.x 以下的版本中那样仅获取对 ListView 的引用并添加页眉和页脚(如 Andrea Baccega 所述)。仍然可以对标头执行此操作:
<android.support.design.widget.NavigationView
..
app:headerLayout="@layout/item_drawer_footer"
..
/>
但目前无法添加页脚。但是,如果您只是尝试添加页脚,我找到了一种解决方法:您只需反转视图,这会将页眉添加到底部,其行为类似于普通页脚。只需确保以相反的顺序创建菜单
// Grab reference to the embedded recycler view
RecyclerView mRecyclerView = (RecyclerView) navigationView.getChildAt(0);
// Create a LinearLayoutManager and set it to reversed
LinearLayoutManager mLayoutManager = new LinearLayoutManager(this);
mLayoutManager.setReverseLayout(true);
// Apply layout manager to the recycler view
mRecyclerView.setLayoutManager(mLayoutManager);
【讨论】:
【参考方案22】:我个人对固定页眉和页脚的解决方案是将 NavigationView 扩展如下:
/**
* Created by guness on 17.01.2018.
*/
class NavigationView : android.support.design.widget.NavigationView
private var mHeader: View? = null
private var mFooter: View? = null
private var mMenuView: NavigationMenuView? = null
constructor(context: Context) : this(context, null)
constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
val a = TintTypedArray.obtainStyledAttributes(context, attrs,
R.styleable.NavigationView, defStyleAttr,
R.style.Widget_Design_NavigationView)
if (a.hasValue(R.styleable.NavigationView_footerLayout))
inflateFooterView(a.getResourceId(R.styleable.NavigationView_footerLayout, 0))
a.recycle()
(mFooter?.layoutParams as FrameLayout.LayoutParams?)?.gravity = Gravity.BOTTOM
init
(0 until childCount)
.map getChildAt(it)
.filter it is NavigationMenuView
.forEach
mMenuView = it as NavigationMenuView
mMenuView!!.overScrollMode = View.OVER_SCROLL_NEVER
override fun inflateHeaderView(@LayoutRes res: Int): View
mHeader = LayoutInflater.from(context).inflate(res, this, false)
setHeaderView(mHeader!!)
return mHeader!!
@Deprecated("There can only be one header", ReplaceWith("#setHeaderView(view: View)"))
override fun addHeaderView(view: View)
throw IllegalAccessException("Please use #setHeaderView")
@UiThread
fun setHeaderView(view: View)
removeHeaderView()
mHeader = view
addView(mHeader, 0)
@Deprecated("No need to use params", ReplaceWith("#removeHeaderView()"))
override fun removeHeaderView(view: View)
removeHeaderView()
@UiThread
fun removeHeaderView()
if (mHeader != null)
removeView(mHeader)
mHeader = null
@Deprecated("No need to count, it is either 1 or zero", ReplaceWith("#hasHeader()"))
override fun getHeaderCount(): Int
return if (mHeader == null) 0 else 1
@Deprecated("No need to use params", ReplaceWith("#getHeaderView()"))
override fun getHeaderView(index: Int): View?
return getHeaderView()
fun getHeaderView(): View?
return mHeader
fun hasHeader(): Boolean
return mHeader != null
fun inflateFooterView(@LayoutRes res: Int): View
mFooter = LayoutInflater.from(context).inflate(res, this, false)
setFooterView(mFooter!!)
return mFooter!!
@UiThread
fun setFooterView(view: View)
removeFooterView()
mFooter = view
addView(mFooter, 0)
@UiThread
fun removeFooterView()
if (mFooter != null)
removeView(mFooter)
mFooter = null
fun hasFooter(): Boolean
return mFooter != null
fun getFooterView(): View?
return mFooter
fun setOnClickListener(@IdRes res: Int, listener: View.OnClickListener)
mHeader?.findViewById<View>(res)?.setOnClickListener(listener)
mFooter?.findViewById<View>(res)?.setOnClickListener(listener)
override fun onMeasure(widthSpec: Int, heightSpec: Int)
super.onMeasure(widthSpec, heightSpec)
val headerHeight = mHeader?.measuredHeight ?: 0
val footerHeight = mFooter?.measuredHeight ?: 0
val params = (mMenuView?.layoutParams as ViewGroup.MarginLayoutParams?)
var changed = false
if (params?.topMargin != headerHeight)
params?.topMargin = headerHeight
changed = true
if (params?.bottomMargin != footerHeight)
params?.bottomMargin = footerHeight
changed = true
if (changed)
mMenuView!!.measure(widthSpec, heightSpec)
最初,NavigationView 创建一个 LinearLayout 作为 RecyclerView 上的第一项并将所有内容一起滚动。这样做的想法是为页脚和页眉创建单独的视图,然后使用重力将它们推到顶部和底部。稍后测量 RecyclerView 的内容会解决滚动内容。
这是包含我编写的上述代码的库。 https://github.com/guness/NavigationView
好的一面,现在我可以在 xml 上定义页脚视图,就像在本机上定义页眉一样:
app:footerLayout="@layout/nav_footer_main"
app:headerLayout="@layout/nav_header_main"
【讨论】:
【参考方案23】:这是一个不需要嵌套的解决方案,它动态根据页脚视图自身的高度调整内部 NavigationMenuView 的底部填充,这意味着页脚高度可以设置为wrap_content
并且您可以将页脚的可见性动态更改为VISIBLE
或GONE
。
public class NavigationMenuFooterView extends LinearLayout
public NavigationMenuFooterView(Context context)
super(context);
public NavigationMenuFooterView(Context context, @Nullable AttributeSet attrs)
super(context, attrs);
public NavigationMenuFooterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr)
super(context, attrs, defStyleAttr);
@Override
protected void onVisibilityChanged(@NonNull View changedView, int visibility)
update(getHeight());
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
update(h);
private void update(int height)
ViewParent parent = getParent();
if (parent instanceof ViewGroup)
View navigationMenuView = ((ViewGroup) parent).findViewById(R.id.design_navigation_view);
if (navigationMenuView != null)
if (getVisibility() == View.GONE)
height = 0;
navigationMenuView.setPadding(navigationMenuView.getPaddingLeft(),
navigationMenuView.getPaddingTop(), navigationMenuView.getPaddingRight(), height);
你需要在你的ids.xml中定义design_navigation_view的id:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="design_navigation_view" type="id"/>
</resources>
并像这样使用:
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_view"
android:layout_
android:layout_
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:itemBackground="@drawable/drawer_item"
app:itemIconTint="@color/drawer_item"
app:itemTextColor="@color/drawer_item"
app:menu="@menu/menu_drawer">
<util.NavigationMenuFooterView
android:id="@+id/navigation_footer_view"
android:layout_
android:layout_
android:layout_gravity="bottom"
android:background="#fff"
android:orientation="vertical">
<View
android:layout_
android:layout_
android:background="#ddd" />
<include layout="@layout/..." />
</util.NavigationMenuFooterView>
</com.google.android.material.navigation.NavigationView>
用com.google.android.material:material:1.0.0
测试。
【讨论】:
【参考方案24】:如果您使用的是列表视图,您可以尝试这种方式。列表视图支持添加页脚视图功能,因此您可以使用 listview 对象添加自定义页脚 R.layout.drawer_footer 视图,如下代码
View footerView = LayoutInflater.from(getApplicationContext()).inflate(R.layout.drawer_footer, expandableListView, false);
TextView footer = footerView.findViewById(R.id.id_footer_wta_version_information);
expandableListView.addFooterView(footerView);
在我的例子中,我使用 expandableListView 而不是 listview(listview 也有 addFooter 函数)。希望这种方式对你有帮助
【讨论】:
【参考方案25】:将这些行放入您的菜单布局中。我希望它能解决你的问题:
<group
android:id="@+id/grp11"
android:checkableBehavior="single">
<item
android:title="" />
<item
android:title="" />
<item
android:title="" />
<item
android:title="" />
<item
android:title="" />
<item
android:title="" />
</group>
【讨论】:
以上是关于如何将页脚添加到 NavigationView - Android 支持设计库?的主要内容,如果未能解决你的问题,请参考以下文章
如何加入不同大小的图像 - 将页脚图像添加到所有图像(批量)