Android Material Component BottomNavigation 顶部阴影在放置在底部时与在中心时不同

标签 android bottomnavigationview material-components-android

我正在尝试向我的导航栏添加更多高度,当我使用 layout_gravity 中心上的栏更改高度时,它会像我预期的那样阴影,但是当我将其锚定到底部时,高度被覆盖或阴影被重置。

布局:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">


    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:elevation="48dp"
            android:background="@android:color/background_light"
            app:itemIconTint="@android:color/primary_text_light"
            app:itemTextColor="@android:color/primary_text_light"
            app:menu="@menu/navbar_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

外观示例: enter image description here enter image description here

最佳答案

并不是阴影被覆盖或重置,而是Material Design对阴影的误解。

在 Material Design 中,您在更改 View 的高度时看到的阴影实际上是根据阴影在现实世界对象中的显示方式计算的。

实际上,阴影并非无处不在。相反,当有光源照射到物体时,它们就会出现。如果你看这个link ,您会看到 Google 提到 Material Design 中的阴影是由两个虚拟光源创建的。一个光源被称为Key Lights,另一个光源被称为Ambient Lights

Key Light 创造了一个更锐利和更具方向性的阴影,通过让它的虚拟光从屏幕顶部向下照射, View 底部的更深和更暗的阴影通常会看到这种阴影。

环境光通过让虚拟光从屏幕中心向下照射,在整个 View 周围创建更柔和的阴影。这就是为什么您仍然会在 View 的顶部看到较浅的阴影。这是因为不仅有一个光源从顶部照射,而且还有一个光源从屏幕中央照射。

这是光源如何工作的图片 look :

然而,就光源而言,仅此而已。屏幕底部没有光源,所以当你的 BottomNavigationView放在底部,你只会在 BottomNavigationView 的顶部边缘看到一个非常微妙的阴影。 .一道影子,淡淡的,几乎不存在。这被认为是正常的。

当您移动 BottomNavigationView到屏幕中央,您现在将其放置得更靠近其他两个光源,因此,您会得到更明显的阴影。

Google 确实警告不要故意向 View 添加更深的阴影,因为这实际上会使布局看起来不自然。换句话说,它并没有模仿现实中的真实阴影。所以,不要故意尝试向 BottomNavigationView 添加更深的顶部阴影。 ,因为考虑到其他 View 的自然阴影时,它看起来会很奇怪。

您可能会争辩说您想要放置从屏幕底部发光的第三个光源,但不要忘记这也会对屏幕上的所有其他 View 产生直接影响。想象一下在每个 View 的顶部和底部都有一个更深的阴影……它不像当前的实现那样令人愉快或自然,只有底部有一个更深的阴影。

另外,请记住 Material Design 中的阴影是基于两个虚拟光源创建的。因此,不要假设 Elevation 是影响阴影显示方式的唯一元素。 View 的大小、高度、在屏幕上的位置以及可能的其他因素都可能决定阴影如何出现在 View 中。

底线是,不要试图在元素上强加阴影,因为阴影更丰富可能看起来更漂亮。它可能会导致它看起来不自然,这与 Material Design 背道而驰,一些用户可以接受这一点。

关于Android Material Component BottomNavigation 顶部阴影在放置在底部时与在中心时不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54611093/

相关文章:

android - 如何显示介绍 View 5 秒

Android:跟踪有问题的设备

android - 仅在单击 BottomNavigationView 时显示的项目

android - Material Chip 输入小部件只能与 Theme.AppCompat 一起使用

android - 如何在 Flutter 中模拟 Android 的 showAsAction ="ifRoom"?

android - 调整 ImageView 上的色温

android - 带有导航编辑器的 BottomNavigationView 面临 fragment 未更改的问题

java - 我如何将 BottomNavigationView 放在 <layout> 中?

android - 未应用更改 CircularProgressIndicator 宽度或高度

android - 在 Android 中以编程方式隐藏工具栏主页/后退按钮?