晶圆厂底部导航 [英] 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>

推荐答案

您的设计看起来就像您想使用新的

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左侧和右侧的元素的用途不同于

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.

这篇关于晶圆厂底部导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！