带 fab 的底部导航 [英] Bottom Navigation with fab
问题描述
我目前正在使用 BottomNavigationView
和 FloatingActionButton
.我想要实现的是以下设计:
I am currently working with BottomNavigationView
and FloatingActionButton
.
What i want to achieve is this below design:
我尝试过的:
<?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"
app:layout_insetEdge="bottom"
tools:context=".activity.BottomNavPrimary">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_insetEdge="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_primary"></android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
推荐答案
你的设计看起来好像你想使用新的 BottomAppBar
来自 MaterialComponents
将完全随 Android P 一起发布.特别是如果左边的图标代表一种侧导航它可能是正确的导航元素.
Your design looks as if you want to use the new BottomAppBar
from the MaterialComponents
that will fully be release with Android P. Especially if the left icon stands for a kind of side navigation it could be the right navigation element.
但是,您必须注意,FAB 左侧和右侧的元素与 底部导航.BottomAppBar
不是应用程序中主要目的地"的入口点,而是定义为:
However, you have to be aware, that the elements on the left and right of the FAB have a different purpose than a bottom navigation. Instead of being entry points to "primary destinations" in an app, the BottomAppBar
is defined as:
底部应用栏在移动屏幕底部显示导航和关键操作.
A bottom app bar displays navigation and key actions at the bottom of mobile screens.
页面操作(如打开仪表板或搜索)也是如此.更多解释可以在设计文档中找到.
So it is for page actions (like opening the dashboard or search). More explanation can be found in the design documentation.
我还没有机会实现它(因为我真的需要底部导航),但这里是代码文档示例:
I haven't had a chance to implement it yet (because I really needed it with a bottom navigation), but here is the code documentation example:
<android.support.design.widget.CoordinatorLayout
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">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:navigationIcon="@drawable/ic_menu_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bar"/>
</android.support.design.widget.CoordinatorLayout>
所以对我来说,听起来好像是您定义了两个页面菜单选项,并且由于 FAB 固定在栏上,因此会将它们推到两侧.
So to me, it sounds as if you define your two page menu options and since the FAB is anchored to the bar it will push them to the sides.
该文档还包括今年 Google I/O 期间展示的可选 FAB 底座的选项,并展示了如何处理菜单和点击处理.
The documentation also includes options for the optional FAB cradle that was shown during this year's Google I/O and shows how to handle menu and click handling.
这是另一个关于如何设置gradle的有用链接以包含项目中的新材料组件.
Here is another useful link on how to set up gradle to include the new material components in your project.
这篇关于带 fab 的底部导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!