再不迁移到Material Design Components 就out啦 (6)

再不迁移到Material Design Components 就out啦


再不迁移到Material Design Components 就out啦

MDC小部件使用这些属性来设置其背景样式。要了解哪些窗口小部件适用于哪些形状类别,需要检查源代码中的默认窗口小部件样式。

控件背景

实现此功能的类为 MaterialShapeDrawable. 默认情况下,所有的 MDC 控件都将此可绘制对象当做背景,我们也可以考虑将它用作自定义 View 的背景。它可以处理形状主题、阴影、黑色主题等等。

因此。我们不建议使用 android:background 作为 MDC 控件的背景。因为它会覆盖 MaterialShapeDrawable。大多数的 MDC 控件的默认 style 都指定了 <item>@null</item>

为了避免这种情况,应该使用 shapeApperance/shapeAppearanceOverlay 和 backgroundTint 属性来调整背景形状和颜色。

以下情况需要单独注意:

MaterialButton 在 1.2.0-alpha06 版本前忽略了 android:background 如果你确实需要用这个属性,考虑使用 AppCompatButton 在你的布局中。

MaterialShapeDrawable 是不支持 gradients 的。如果确实需要的话,最好用 android:background

例子

在我们的示例中我们可以删除一些由 shape theming 来处理的属性。

<com.google.android.material.bottomnavigation.BottomNavigationView - android:background="@android:color/white" ... /> <com.google.android.material.card.MaterialCardView - app:cardCornerRadius="2dp" ...> ... </com.google.android.material.card.MaterialCardView> 使用 corner family 和 size 来自定义 shape

我们可以选择在应用主题中覆盖形状样式来表达我们自己的品牌。

<style parent="Theme.MaterialComponents.*"> ... + <item>@style/ShapeAppearance.App.SmallComponent</item> + <item>@style/ShapeAppearance.App.MediumComponent</item> + <item>@style/ShapeAppearance.App.LargeComponent</item> </style> +<style + parent="ShapeAppearance.MaterialComponents.SmallComponent"> + <item>rounded</item> + <item>8dp</item> +</style> +<style + parent="ShapeAppearance.MaterialComponents.MediumComponent"> + <item>rounded</item> + <item>12dp</item> +</style> +<style + parent="ShapeAppearance.MaterialComponents.LargeComponent"> + <item>rounded</item> + <item>16dp</item> +</style>

再不迁移到Material Design Components 就out啦


再不迁移到Material Design Components 就out啦

使用 shape theming 的例子

恢复 Button 的自定义渐变背景

-<Button +<androidx.appcompat.widget.AppCompatButton android:background="@drawable/bg_button_gradient" + android:textAppearance="?attr/textAppearanceButton" ... />

如果使用的是 MDC 1.2.0-alpha-06 或者更新的版本,可以直接使用 MaterialButton 的 android:background。需要注意的是要清空 backgroundTint,因为在默认的 style 中,backgroundTint 为 colorPrimary

<!-- Copyright 2020 Google LLC. SPDX-License-Identifier: Apache-2.0 --> <Button android:background="@drawable/bg_button_gradient" + app:backgroundTint="@null" ... />

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zypxxp.html