Material 设计 3 顶部应用栏没有阴影。如何启用它?
Material Design 3 Top app bar does not have a shadow. How to enable it?
新的 'Material Design 3 top app bar' 文档说他们去掉了阴影。
我怎样才能启用它?在 Toolbar 或 AppBar 上设置高度根本不起作用。
我遇到了同样的情况。我发现:
- 阴影从 API 28 开始应用,低于 API 28 - 阴影效果与 MaterialComponents 主题相同。
- 颜色填充在 API 28 以下有效(在 API 26 上测试)。
Top app bar specs 的文档说 TopAppBar 的 container 有一个角色 "Surface" 和 海拔(滚动) 2 级.
在页面 Color system - Color roles 上,我发现以下信息:
At elevation +2 components with surface color containers receive a primary color overlay with 8% opacity.
所以 TopAppBarLayout 的默认样式使用 ?attr/colorSurface 作为背景颜色,?attr/colorPrimary 8% 的不透明度作为 overlay(一种稀松布效果)。
我的解决方案:
- 案例 1 - 只启用阴影效果。
为AppBarLayout创建样式,并设置android:outlineAmbientShadowColor和android:outlineSpotShadowColor为黑色(因为它是创建阴影的默认颜色)。这些属性在 Widget.Material3.AppBarLayout.
中设置为透明
<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
<item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
</style>
- 案例 2 - 启用阴影效果并摆脱覆盖。
除上述之外,您还可以添加带有颜色的 android:background 属性或 materialThemeOverlay 属性将 colorSurface 设置为您的颜色(背景)并将 colorPrimary 设置为 @android:transparent(覆盖)。我更喜欢直接添加 android:background 因为添加 materialThemeOverlay 会对 AppBarLayout 的子视图产生影响。
<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
<item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="android:background">@color/white</item>
</style>
或
<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
<item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.App.DayNight.NoActionBar</item>
</style>
<style name="ThemeOverlay.App.DayNight.NoActionBar" parent="Theme.Material3.DayNight.NoActionBar">
<item name="colorPrimary">@android:color/transparent</item>
<item name="colorSurface">@android:color/white</item>
</style>
不要忘记将您的样式应用于您的 AppBarLayout 或主题。
顺便说一句,liftOnScroll属性在Widget中设置为true。Material3.AppBarLayout所以不需要设置它。一切都适用于滚动视图的设置 layout_behavior。
新的 'Material Design 3 top app bar' 文档说他们去掉了阴影。
我怎样才能启用它?在 Toolbar 或 AppBar 上设置高度根本不起作用。
我遇到了同样的情况。我发现:
- 阴影从 API 28 开始应用,低于 API 28 - 阴影效果与 MaterialComponents 主题相同。
- 颜色填充在 API 28 以下有效(在 API 26 上测试)。
Top app bar specs 的文档说 TopAppBar 的 container 有一个角色 "Surface" 和 海拔(滚动) 2 级.
在页面 Color system - Color roles 上,我发现以下信息:
At elevation +2 components with surface color containers receive a primary color overlay with 8% opacity.
所以 TopAppBarLayout 的默认样式使用 ?attr/colorSurface 作为背景颜色,?attr/colorPrimary 8% 的不透明度作为 overlay(一种稀松布效果)。
我的解决方案:
- 案例 1 - 只启用阴影效果。
为AppBarLayout创建样式,并设置android:outlineAmbientShadowColor和android:outlineSpotShadowColor为黑色(因为它是创建阴影的默认颜色)。这些属性在 Widget.Material3.AppBarLayout.
中设置为透明<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
<item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
</style>
- 案例 2 - 启用阴影效果并摆脱覆盖。
除上述之外,您还可以添加带有颜色的 android:background 属性或 materialThemeOverlay 属性将 colorSurface 设置为您的颜色(背景)并将 colorPrimary 设置为 @android:transparent(覆盖)。我更喜欢直接添加 android:background 因为添加 materialThemeOverlay 会对 AppBarLayout 的子视图产生影响。
<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
<item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="android:background">@color/white</item>
</style>
或
<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
<item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.App.DayNight.NoActionBar</item>
</style>
<style name="ThemeOverlay.App.DayNight.NoActionBar" parent="Theme.Material3.DayNight.NoActionBar">
<item name="colorPrimary">@android:color/transparent</item>
<item name="colorSurface">@android:color/white</item>
</style>
不要忘记将您的样式应用于您的 AppBarLayout 或主题。
顺便说一句,liftOnScroll属性在Widget中设置为true。Material3.AppBarLayout所以不需要设置它。一切都适用于滚动视图的设置 layout_behavior。