带 fab 的底部导航 [英] Bottom Navigation with fab

本文介绍了带 fab 的底部导航的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在使用 BottomNavigationViewFloatingActionButton.我想要实现的是以下设计:

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆