[英]How to add footer to NavigationView - Android support design library?
How can I set footer settings and profile items to NavitationView
?如何将页脚设置和配置文件项设置为NavitationView
? to looks like the Inbox by email navigation drawer.看起来像电子邮件导航抽屉的收件箱。 The NavitationView
items are inflated by menu resource, but I don't know how to set bottom items to a menu resource, or how can I set a custom view to NavigationView
or an bottom offset? NavitationView
项目由菜单资源膨胀,但我不知道如何将底部项目设置为菜单资源,或者如何将自定义视图设置为NavigationView
或底部偏移? I have tried putting this <LinearLayout...>
as footer view, but on small screens the footer puts over the items and I cant scroll the menu, I have tried to set a footer padding to NavigationView
, but the footer takes the padding too.我试过把这个<LinearLayout...>
作为页脚视图,但在小屏幕上页脚放在项目上,我不能滚动菜单,我试图将页脚填充设置为NavigationView
,但页脚也需要填充.
This is not scrolling on small screens:这不是在小屏幕上滚动:
<android.support.design.widget.NavigationView
android:id="@+id/drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/kuona_drawer_header"
app:menu="@menu/drawer">
<LinearLayout...>
</android.support.design.widget.NavigationView>
This scrolls, but the footer its over the menu items:这会滚动,但页脚位于菜单项上:
<android.support.design.widget.NavigationView
android:id="@+id/drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:paddingBottom="96dp"
app:headerLayout="@layout/kuona_drawer_header"
app:menu="@menu/drawer">
<LinearLayout...>
</android.support.design.widget.NavigationView>
Drawer menu res/menu/drawer.xml
file:抽屉菜单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>
If you want a fixed (non-scrolling) footer in your navigation menu, you need wrap NavigationView around another layout, like you've posted.如果您想在导航菜单中使用固定(非滚动)页脚,则需要将 NavigationView 包裹在另一个布局中,就像您发布的那样。 NavigationView works like FrameLayout, so this ends up "stacking" the inner layout on top of the NavigationView menu items. NavigationView 的工作方式类似于 FrameLayout,因此最终将内部布局“堆叠”在 NavigationView 菜单项的顶部。 Here's one way to arrange it, using LinearLayout for the footer items:这是安排它的一种方法,对页脚项目使用 LinearLayout:
Fixed Footer固定页脚
<android.support.design.widget.NavigationView
android:id="@+id/drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<TextView
android:id="@+id/footer_item_1"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:text="Footer Item 1" />
<TextView
android:id="@+id/footer_item_2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:text="Footer Item 2" />
</LinearLayout>
</android.support.design.widget.NavigationView>
I used TextViews in this example, but you can use whatever you want for the footer views.我在这个例子中使用了 TextViews,但你可以使用任何你想要的页脚视图。 To avoid the footer items overlapping with the bottom of the menu, add some dummy items to the end of your menu resource file (these will act like "spacers"):为避免页脚项目与菜单底部重叠,请在菜单资源文件的末尾添加一些虚拟项目(这些将起到“间隔”的作用):
res/menu/drawer.xml 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>
Lastly, don't forget to add click listeners in your Activity for the actual footer views:最后,不要忘记在您的 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
}
});
...
Scrolling Footer滚动页脚
If you allow the footer to scroll with the rest of the NavigationView though, it makes things simpler (no additional layouts or click listeners).如果您允许页脚与 NavigationView 的其余部分一起滚动,它会使事情变得更简单(没有额外的布局或单击侦听器)。 Simply add the footer items to your menu resource file as a unique <group>
(this will create a separator line ), and everything will be handled automatically and scroll together:只需将页脚项作为唯一的<group>
添加到您的菜单资源文件中(这将创建一个分隔线),所有内容都将自动处理并一起滚动:
res/menu/drawer.xml 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>
I'll just give you the hint how to solve it, but I have no chance to test it on NavigationView, and am pretty sure it will work我只是给你提示如何解决它,但我没有机会在 NavigationView 上测试它,我很确定它会工作
here the sample layout xml;这里是示例布局 xml;
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="96dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#6F00" />
<TextView
android:layout_width="match_parent"
android:layout_height="96dp"
android:layout_gravity="bottom"
android:layout_marginBottom="-96dp"
android:background="#600F" />
</FrameLayout>
here is the result:结果如下:
the trick is by applying padding to parent and minus margin to the child.诀窍是对父级应用填充并为子级应用减去边距。
Quick try:快速尝试:
<?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_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:clipToPadding="false"
android:paddingBottom="96dp"
app:headerLayout="@layout/sample_header"
app:menu="@menu/sample_menu">
<TextView
android:layout_width="match_parent"
android:layout_height="96dp"
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>
Following the approaches described in the other answers of nesting navigation views, some problems came up:按照嵌套导航视图的其他答案中描述的方法,出现了一些问题:
My solution for all of these problems was the following:我对所有这些问题的解决方案如下:
<?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_height="0dp"
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>
Here, the NestedScrollView acts as a scrolling parent for the sub-NavigationView.在这里,NestedScrollView 充当子 NavigationView 的滚动父级。 That means, the sub-NavigationView does never show up scrollbars itself, but the whole content is shown in a flat way.这意味着,子导航视图本身永远不会显示滚动条,而是以平面方式显示整个内容。
The layout 'spacer_to_bottom' fills all remaining space, so that with few menu icons, the footer is still on the bottom.布局 'spacer_to_bottom' 填充了所有剩余空间,因此只有很少的菜单图标,页脚仍位于底部。
Finally, the fixed footer is added to the linear layout,which starts with the real menu (sub-NavigationView), the spacer, and has on the bottom the footer.最后,固定页脚被添加到线性布局中,从真正的菜单(子导航视图)开始,间隔器,底部有页脚。
Here you can find the complete working example as AndroidStudio-Project: https://github.com/MarcDahlem/AndroidSidemenuFooterExample在这里你可以找到完整的工作示例作为 AndroidStudio-Project: https : //github.com/MarcDahlem/AndroidSidemenuFooterExample
Especially the navigation drawer can be found here: https://github.com/MarcDahlem/AndroidSidemenuFooterExample/blob/master/app/src/main/res/layout/activity_main.xml特别是导航抽屉可以在这里找到: https : //github.com/MarcDahlem/AndroidSidemenuFooterExample/blob/master/app/src/main/res/layout/activity_main.xml
The simplest answer is to add a button inside the Drawer layout and set it gravity to bottom in the navigationview.xml
.最简单的答案是在 Drawer 布局中添加一个按钮,并在navigationview.xml
中将其设置为底部。
Here is the code:这是代码:
<?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_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/menu_navigation">
<Button
android:id="@+id/btn_sing_in"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="@string/sign_in"
android:layout_gravity="bottom"/>
</android.support.design.widget.NavigationView>
I know its late answer but its perfect and accurate answer which most developers looking for.我知道它迟到的答案,但它是大多数开发人员寻找的完美而准确的答案。
For adding footer in navigation view, Add custom view into navigation menu just like below:要在导航视图中添加页脚,请将自定义视图添加到导航菜单中,如下所示:
footer_navigation_menu.xml 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_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="@string/version" />
<android.support.v7.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right" />
</RelativeLayout>
Now, add above view into your menu xml with group attribute.So that, it can differentiate as footer in menu.现在,将上面的视图添加到带有组属性的菜单 xml 中。这样,它就可以区分为菜单中的页脚。
profile_menu.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>
That's it.就是这样。 Below is output:下面是输出:
You need to have a container navigation view layout and then that should contain two more navigation layouts.您需要有一个容器导航视图布局,然后应该包含另外两个导航布局。 You align those to top and bottom of the parent layout.您将它们与父布局的顶部和底部对齐。
I would recommend using a navigation view as the parent and not a FrameLayout because it's essentially a ScrimFrameLayout and interacts with the status bar better.我建议使用导航视图作为父视图而不是 FrameLayout,因为它本质上是一个 ScrimFrameLayout 并且可以更好地与状态栏交互。
Here's an example of what your activity should look like:以下是您的活动应该是什么样子的示例:
<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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<!-- Activity content goes here -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_drawer_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<android.support.design.widget.NavigationView
android:id="@+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="top"
app:menu="@menu/menu_navigation_drawer" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation_drawer_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="@menu/menu_navigation_drawer_bottom" />
</android.support.design.widget.NavigationView>
You can read more about it and see an example here: http://blog.nitish.io/post/122633295558/android-design-library-navigationview-with-top您可以阅读有关它的更多信息并在此处查看示例: http : //blog.nitish.io/post/122633295558/android-design-library-navigationview-with-top
Its kind of a bummer that NavigationView does not have a provision to add footer. NavigationView 没有提供添加页脚的条款,这有点令人失望。 But you can try something like this,但是你可以尝试这样的事情,
<?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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_base"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
android:layout_gravity="start"
>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="x"
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>
In case if your footer is a list,如果您的页脚是列表,
app:headerLayout="@null"
app:menu="@menu/activity_base_drawer_footer"
But, if it is some kind of custom view,但是,如果它是某种自定义视图,
app:headerLayout="@layout/my_cutom_footer_view"
app:menu="@null"
Also, in this case, you will need to set x = height of your custom footer view
此外,在这种情况下,您需要设置x = height of your custom footer view
Hope it helps.希望能帮助到你。
I made the same thing in the following manner:我用以下方式做了同样的事情:
<?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_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" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:paddingBottom="2dp"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="2dp"
android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/company_image_id"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="@dimen/margin1dp"
android:padding="@dimen/margin2dp"
android:src="@mipmap/ic_launcher_round"
/>
<TextView
android:id="@+id/txtCompanyName"
android:layout_width="match_parent" android:layout_marginLeft="@dimen/margin3dp"
android:layout_height="wrap_content"
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>
Here the main thing is that i put the layout gravity to bottom eg这里的主要事情是我将布局重力放在底部,例如
LinearLayout android:layout_gravity="bottom"
This is how I achieve to add layout at bottom of navigation:这就是我在导航底部添加布局的方法:
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_drawer_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="0dp"
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_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2">
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/scrollView"
android:orientation="vertical">
<TextView
android:id="@+id/text_dashboard_followUsAt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:text="Follow us at" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="16dp"
android:paddingStart="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/fb" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/fb" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/fb" />
</LinearLayout>
<TextView
android:id="@+id/text_dashboard_version"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
Following your approach, some minor changes can help what you want to achieve.按照你的方法,一些小的改变可以帮助你实现你想要的目标。
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/background_material_light">
<TextView
android:id="@+id/footer_item"
android:layout_width="match_parent"
android:layout_height="?attr/listPreferredItemHeight"
android:background="?attr/selectableItemBackground"
android:gravity="center_vertical"
android:paddingLeft="?attr/listPreferredItemPaddingLeft"
android:text="Something"
android:textAppearance="?attr/textAppearanceListItem" />
</LinearLayout>
And set some stub items in the menu, so that menu items don't overlap.并在菜单中设置一些存根项,使菜单项不重叠。
<group>
...
<item
android:title=""
android:orderInCategory="200"/>
</group>
Also you would want to add a click listener to your footer item.您还希望向页脚项添加一个点击侦听器。
My solution with fixed footer and scroll menus (100% tested)我的带有固定页脚和滚动菜单的解决方案(100% 测试)
<android.support.design.widget.NavigationView
android:id="@+id/container_navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity=""
android:nestedScrollingEnabled="true"
android:scrollIndicators="none">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/white_100"
android:orientation="horizontal">
<TextView
android:id="@+id/empty_spacer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/ic_search"
android:gravity="center"
android:text="Share" />
<TextView
android:id="@+id/mnuRate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/ic_search"
android:gravity="center"
android:text="Rate" />
<TextView
android:id="@+id/mnuHelp"
android:layout_width="0dp"
android:layout_height="wrap_content"
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>
NavigationView
first child is the ListView
containing both header and menu items. NavigationView
第一个子ListView
包含标题和菜单项的ListView
。
The only thing needed to add a footer is call .addFooterView to the ListView添加页脚唯一需要的是调用 .addFooterView 到 ListView
More info: http://www.andreabaccega.com/blog/2015/08/28/how-to-add-footer-to-navigationview/更多信息: http : //www.andreabaccega.com/blog/2015/08/28/how-to-add-footer-to-navigationview/
Copy paste code:复制粘贴代码:
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);
}
Just put another layout inside your NavigationView:只需在您的 NavigationView 中放置另一个布局:
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom">
<TextView
android:textColor="#FFFFFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:textColor="#FFFFFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test2" />
</LinearLayout>
</android.support.design.widget.NavigationView>
The trick is to use layout_gravity="bottom" - this will put your whole layout at the bottom and test,test2 are properly stacked.诀窍是使用 layout_gravity="bottom" - 这会将您的整个布局放在底部并正确堆叠 test,test2。
use this..用这个..
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/grey_200"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="@dimen/divider_height"
android:background="@color/grey_600"/>
<com.facebook.share.widget.LikeView
android:id="@+id/like_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:padding="@dimen/small"/>
<com.facebook.login.widget.LoginButton
android:id="@+id/login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/small"/>
</LinearLayout>
</android.support.design.widget.NavigationView>
then set bottom padding to NavigationMenuView然后将底部填充设置为 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());
}
});
Try this, this work for me.试试这个,这对我有用。
<android.support.design.widget.NavigationView
android:id="@+id/nav_view1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/nav_view"
app:headerLayout="@layout/nav_header_admin"
app:menu="@menu/activity_admin_drawer"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/lyNavFooter">
<!--INCLUDE YOUR FOOTER HERE -->
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.design.widget.NavigationView>
I use this form, work for me.我使用这种形式,为我工作。 in landscape & portrait.在横向和纵向。
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="0dp"
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_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="@color/blue"
android:text="Cerrar sesión" />
</LinearLayout>
</android.support.design.widget.NavigationView>
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="@menu/activity_main_drawer">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="0dp">
<include layout="@layout/nav_footer_main" />
</LinearLayout>
</android.support.design.widget.NavigationView>
This is working for me to put images on footer of navigation drawer(portrait and Landscape orientation)这对我来说可以将图像放在导航抽屉的页脚(纵向和横向)
<?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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main3"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#f00"
android:fitsSystemWindows="true"
app:menu="@menu/activity_main3_drawer">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
app:elevation="0dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
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_width="match_parent"
android:orientation="vertical"
android:background="#0f0"
android:layout_height="0dp"
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>
my nav_footer_main3 is我的 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_width="match_parent"
android:layout_height="60dp">
<ImageView
android:id="@+id/imageView"
android:layout_gravity="center_horizontal"
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@drawable/logo_1" />
</LinearLayout>
The layout structure for sticky header and footer in the drawer menu:抽屉菜单中粘性页眉和页脚的布局结构:
<?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>
The complete layout:完整的布局:
<?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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
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_height="0dp"
android:layout_width="match_parent"
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>
Try this, this work for me.试试这个,这对我有用。 https://github.com/MarcDahlem/AndroidSidemenuFooterExample/blob/master/app/src/main/res/layout/activity_main.xml https://github.com/MarcDahlem/AndroidSidemenuFooterExample/blob/master/app/src/main/res/layout/activity_main.xml
However, you to disable NavigationViewScrolling for smoother scrolling但是,您要禁用 NavigationViewScrolling 以实现更平滑的滚动
private void disableNavigationViewScrolling(NavigationView navigationView) {
if (navigationView != null) {
NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);
if (navigationMenuView != null) {
navigationMenuView.setNestedScrollingEnabled(false);
}
}
}
Scrolling footer for Version > 23.xx版本 > 23.xx 的滚动页脚
I finally managed to achieve what I wanted, unfortunately it looks like it is not longer possible to just grab the reference to the ListView and add a header and footer as in versions below 23.xx (as described by Andrea Baccega).我终于设法实现了我想要的东西,不幸的是,看起来不再可能像 23.xx 以下的版本那样仅获取对 ListView 的引用并添加页眉和页脚(如 Andrea Baccega 所述)。 Doing this for the header is still possible:仍然可以对标头执行此操作:
<android.support.design.widget.NavigationView
..
app:headerLayout="@layout/item_drawer_footer"
..
/>
But adding a footer is not possible at the moment.但目前无法添加页脚。 However, I found a workaround in case you are just trying to add a footer: You just reverse the view, this will add the header to the bottom which behaves like a normal footer.但是,我找到了一种解决方法,以防您只是尝试添加页脚:您只需反转视图,这会将页眉添加到底部,其行为类似于普通页脚。 Just make sure to create your menu in reverse order只需确保以相反的顺序创建菜单
// 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);
My personal solution for fixed header and footer is extending NavigationView as following:我对固定页眉和页脚的个人解决方案是扩展 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)
}
}
}
Originally NavigationView creates an LinearLayout as first item on the RecyclerView and scrolls all the content together.最初 NavigationView 创建一个 LinearLayout 作为 RecyclerView 上的第一项,并将所有内容滚动在一起。 The idea on this is to create separate Views for footer and header and then, push them to top and bottom using Gravity.这个想法是为页脚和页眉创建单独的视图,然后使用重力将它们推到顶部和底部。 Later on measuring content for RecyclerView settles the scrolling content.稍后测量 RecyclerView 的内容会解决滚动内容。
Here is the library that contains above code I wrote.这是包含我编写的上述代码的库。 https://github.com/guness/NavigationView https://github.com/guness/NavigationView
Good side of this, now I can define footer view on the xml just like the header on native:好的一面,现在我可以在 xml 上定义页脚视图,就像本机上的页眉一样:
app:footerLayout="@layout/nav_footer_main"
app:headerLayout="@layout/nav_header_main"
Here's a solution that doesn't require nesting and which dynamically adjusts the bottom padding of the internal NavigationMenuView based on the footer view's own height, which means the footer height can be set to wrap_content
and you can dynamically change the footer's visibility to VISIBLE
or GONE
.这是一个不需要嵌套的解决方案,它根据页脚视图自身的高度动态调整内部 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);
}
}
}
}
You need to define the id of design_navigation_view in your ids.xml:您需要在 ids.xml 中定义 design_navigation_view 的 id:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="design_navigation_view" type="id"/>
</resources>
And use like this:并像这样使用:
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
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_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#fff"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ddd" />
<include layout="@layout/..." />
</util.NavigationMenuFooterView>
</com.google.android.material.navigation.NavigationView>
Tested with com.google.android.material:material:1.0.0
.用com.google.android.material:material:1.0.0
测试。
If you are using listview, you can try this way.如果您使用的是列表视图,则可以尝试这种方式。 The list view support add footer view function, so you can add a custom footer R.layout.drawer_footer view using listview object as below code列表视图支持添加页脚视图功能,因此您可以使用列表视图对象添加自定义页脚 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);
In my case, I use expandableListView instead of listview (the listview also has addFooter function).就我而言,我使用 expandableListView 而不是 listview(listview 也有 addFooter 函数)。 Hope this way help you希望这种方式能帮到你
Put these lines into your menu layout.将这些行放入您的菜单布局中。 I hope it will fix your issue:我希望它能解决您的问题:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.