时间戳

首页 > 解决方案 > BottomNavigationView 内的 FAB 在某些设备中不可见

android - BottomNavigationView 内的 FAB 在某些设备中不可见

问题描述

我正在尝试使用以下代码在 BottomNavigationView 的中心添加 FAB

activity_main.xml

.......
.......  
<android.support.constraint.ConstraintLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

    <FrameLayout
      android:id="@+id/container"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

    <!--<View
      android:id="@+id/shadowView"
      android:layout_width="wrap_content"
      android:layout_height="130dp"
      android:layout_gravity="bottom"
      android:background="@drawable/ic_shadow"
      app:layout_constraintStart_toStartOf="@id/bottomNav"
      app:layout_constraintEnd_toEndOf="@id/bottomNav"
      app:layout_constraintBottom_toBottomOf="@id/bottomNav" /> -->

    <com.inito.ovulation.view.CurvedBottomNavigationView
      android:layout_width="match_parent"
      android:layout_height="130dp"
      android:clickable="false"
      app:layout_constraintBottom_toBottomOf="@id/bottomNav"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:radius="30dp" />

    <android.support.design.widget.BottomNavigationView
      android:id="@+id/bottomNav"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/Widget.BottomNavigationView"
      app:itemIconTint="@color/bottom_nav_color"
      app:itemTextColor="@color/bottom_nav_color"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:menu="@menu/bottom_nav_menu" />


    <android.support.design.widget.FloatingActionButton
      android:id="@+id/takeTestFab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="20dp"
      app:backgroundTint="@color/test_button_disabled_color"
      app:elevation="8dp"
      app:layout_constraintBottom_toBottomOf="@id/bottomNav"
      app:layout_constraintEnd_toEndOf="@id/bottomNav"
      app:layout_constraintStart_toStartOf="@id/bottomNav"
      app:srcCompat="@drawable/ic_test" />

</android.support.constraint.ConstraintLayout>

.....
.....

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto">
<item
  android:id="@+id/calendar"
  android:icon="@drawable/ic_calendar"
  android:title="@string/calendar" />
<item
  android:id="@+id/action_empty"
  android:checkable="false"
  android:checked="false"
  android:enabled="false"
  android:title=""
  app:showAsAction="always" />
<item
  android:id="@+id/charts"
  android:icon="@drawable/ic_charts"
  android:title="@string/cycles" />
</menu>

在大多数手机用户界面看起来像

在此处输入图像描述

但在某些手机（Redmi note 8 pro、摩托罗拉、Moto G7 power、一加 7 Pro）中，用户界面看起来像

在此处输入图像描述

为什么会这样？

标签： androidandroid-constraintlayoutfloating-action-buttonbottomnavigationview

解决方案

并非所有手机都存在问题。此问题仅出现在曲面屏手机上。原因是如果在同一个布局中使用 BottomNavigationView 和 FloatingActionButton，BottomNavigationView 会获得优先级，会与 FloatingActionButton 重叠。将 FloatingActionButton 移动到不同的布局将解决此问题。检查以下代码：

<android.support.design.widget.CoordinatorLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">

            <android.support.constraint.ConstraintLayout
              android:layout_width="match_parent"
              android:layout_height="match_parent">

                <FrameLayout
                  android:id="@+id/container"
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  app:layout_constraintBottom_toBottomOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toTopOf="parent" />

                <View
                  android:id="@+id/shadowView"
                  android:layout_width="wrap_content"
                  android:layout_height="180dp"
                  android:layout_gravity="bottom"
                  android:background="@drawable/ic_shadow"
                  app:layout_constraintStart_toStartOf="@id/bottomNav"
                  app:layout_constraintEnd_toEndOf="@id/bottomNav"
                  app:layout_constraintBottom_toBottomOf="@id/bottomNav" />

                <com.inito.ovulation.view.CurvedBottomNavigationView
                  android:layout_width="match_parent"
                  android:layout_height="130dp"
                  android:clickable="false"
                  app:layout_constraintBottom_toBottomOf="@id/bottomNav"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:radius="30dp" />

                <android.support.design.widget.BottomNavigationView
                  android:id="@+id/bottomNav"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:theme="@style/Widget.BottomNavigationView"
                  app:itemIconTint="@color/bottom_nav_color"
                  app:itemTextColor="@color/bottom_nav_color"
                  app:layout_constraintBottom_toBottomOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  android:layout_marginStart="@dimen/space_normal"
                  android:layout_marginEnd="@dimen/space_normal"
                  app:menu="@menu/bottom_nav_menu"/>

            </android.support.constraint.ConstraintLayout>

            <android.support.design.widget.FloatingActionButton
              android:id="@+id/takeTestFab"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="center_horizontal|bottom"
              android:layout_marginBottom="20dp"
              app:backgroundTint="@color/test_button_disabled_color"
              app:elevation="8dp"
              app:srcCompat="@drawable/ic_test" />
        </android.support.design.widget.CoordinatorLayout>

推荐阅读