具有透明背景的BottomAppBar内的BottomNavigationView

时间:2019-09-04 09:43:51

标签: android material-design bottomnavigationview material-components bottomappbar

我一直在将新的(ish)Material BottomAppBar与标准的BottomNavigationView结合在一起。我的xml是这样的:

$ (trap "" PIPE; perl -MIPC::Open3 -e 'my $pid = open3 my $in, my $out, my $err, "seq 100000 | tac 2>/dev/tty"; print scalar <$out>')
100000
$ tac: write error

在以前的版本1.0.0上,它运行良好,我仍然可以按预期看到FAB。唯一的次要缺点是此版本的材料组件库未对底部应用栏的提升效果进行排序,因此不清楚该栏与上方内容之间的区别。

当我升级到最新的库时(在撰写本文时,我相信它是 <com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bottom_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:contentInsetStart="0dp" app:contentInsetStartWithNavigation="0dp" app:fabAlignmentMode="center"> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="0dp" android:layout_marginEnd="0dp" android:background="@android:color/transparent" app:itemTextAppearanceActive="@style/AppTheme.Text.BottomNavText.Active" app:itemTextAppearanceInactive="@style/AppTheme.Text.BottomNavText" app:labelVisibilityMode="labeled" app:menu="@menu/bottom_nav_menu" /> </com.google.android.material.bottomappbar.BottomAppBar> ),我会得到BottomAppBar的高程效果,但是当我将透明背景应用于BottomNavigationView时,会得到非常奇怪的视觉效果使我一生都无法理解。

Strange BottomAppBar effect

如果我删除了透明的背景色,效果将继续,但是我丢失了FAB插图,如下所示:

Bottom Nav without transparency, lose the inset effect

如果我完全删除了底部导航视图子级,而只是有了BottomAppBar,我会看到正常的视觉效果,但是却没有导航:

Without the bottom nav view as child, all works normal

我愿意:  -一个很好的解决方案,可以在BottomAppBar内合并底部导航视图,同时保留版本1.1.0库良好的提升效果,并且在其内部有效地具有BottomNavigationView,因此我保留了该导航组件的所有优点  -或解释到底是什么原因造成了这种特殊的第一高程效应,并且是一种理想的解决方法

1 个答案:

答案 0 :(得分:2)

好吧,这与BottomAppBar无关...在材料库1.1.0- ...中,无论背景在哪里,背景问题都会发生在BottomNavigationView上。

(我认为)这是最新版本的BottomNavigationView的错误,其中,如果background为null或ColorDrawable ...,并且在xml中设置颜色时,它将背景设置为MaterialShapeDrawableBackground作为背景,它为ColorDrawable(包括透明)。这是BottomNavigationView代码中的问题:

    if (getBackground() == null || getBackground() instanceof ColorDrawable) {
      // Add a MaterialShapeDrawable as background that supports tinting in every API level.
      ViewCompat.setBackground(this, createMaterialShapeDrawableBackground(context));
    }

您将获得上面看到的随机阴影形状。

解决方案

解决方法是在xml中设置背景,该背景既不能为null,也不能为ColorDrawable。我创建了自己的drawable,它只是一个透明矩形,并将其设置为BottomNavigationView背景,并且可以使用。

background_transparent.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:padding="10dp"
  android:shape="rectangle" >

  <solid android:color="#00000000" />

</shape>

现在是更新的BottomNavigationView xml:

        <com.google.android.material.bottomnavigation.BottomNavigationView
          android:id="@+id/bottom_navigation"
          style="@style/BottomNav"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginStart="0dp"
          android:layout_marginEnd="0dp"
          android:background="@drawable/background_transparent"
          app:itemTextAppearanceActive="@style/AppTheme.Text.BottomNavText.Active"
          app:itemTextAppearanceInactive="@style/AppTheme.Text.BottomNavText"
          app:labelVisibilityMode="labeled"
          app:menu="@menu/bottom_nav_menu" />

结果:

enter image description here