翻译自国外文档加自己理解 原文
我们最近宣布了 Material Design Components（MDC）1.1.0 ，这是一个库更新，为您的 Android 应用程序带来了 Material Theming 、新的组件、深色主题和其他令人兴奋的功能。
MDC取代了设计支持库。本指南将向您展示如何迁移代码库，以便您可以使用新的属性，样式和小部件。
精简的主题示例
本指南使用了精简的应用程序来演示迁移过程。它使用AppCompat主题，设计支持库中的小部件（包括具有自定义背景的按钮）以及需要迁移的各种其他元素。我们将从使用传统AppCompat模板的应用程序主题开始：
使用 AppCompat 和 Design Support Library 的 APP
从 Support Library 迁移到 JetPack
在使用MDC之前，您需要从支持库迁移到Android Jetpack。Jetpack使用新的androidx.*名称空间，并将以前的支持库程序包拆分为单独维护的语义版本化的库，从而提供部分功能的新库。MDC是使用AndroidX库构建的，因此必须进行迁移。
要迁移到 AndroidX ，建议您遵循官方开发人员文档。 Android Studio中的 重构 > 迁移到 AndroidX 工具会将您的 Design Support Library 依赖重构成 MDC。
更新到 MDC
首先要将build.gradle 依赖中
com.android.support:design:28.0.0 修改成 com.google.android.material:material:1.0.0
更改主题
需要将 app 的主题修改成 Material Components 主题的子类
+
[图片上传失败...(image-a94a98-1600164406898)]
更喜爱 MDC 样式和控件
如上所述，先前支持库的风格已经变成了 MDC 的一部分。在大多数的情况下，我们都可以通过 Widget.MaterialComponents.* 来替换 Widget.Design.* 样式。并且还启用了新的属性，虽然可以不使用，但是我们建议还是采用新的 MDC 样式！
建议使用 MDC 组件来替换AppCompat 或者 MaterialButton （如果有的话）这些组件默认情况下使用更新后的材料设计指南。并且支持启用 Material Theming 和其他功能。
下面这几种情况应该考虑
- 在布局中写的控件如果有对应的 MDC 控件的话，直接使用 MDC 控件
- 任何的风格，默认风格和默认风格属性应该改变成 MDC 版本
- 在编程中或者自定义类的父级类使用的任何控件都应该为 MDC 版本。
完整 控件和样式映射表
| MDC-Android widget (moved from Design Support Library) | Design Support Library default style | MDC-Android default style | Default style attr |
|---|---|---|---|
AppBarLayout |
Widget.Design.AppBarLayout |
Widget.MaterialComponents.AppBarLayout.* |
appBarLayoutStyle |
BottomNavigationView |
Widget.Design.BottomNavigationView |
Widget.MaterialComponents.BottomNavigationView |
bottomNavigationStyle |
BottomSheetBehavior |
Widget.Design.BottomSheet.Modal |
Widget.MaterialComponents.BottomSheet.* |
bottomSheetStyle |
BottomSheetDialog BottomSheetDialogFragment |
Theme.Design.Light.BottomSheetDialog |
Theme.MaterialComponents.*.BottomSheetDialog ThemeOverlay.MaterialComponents.*.BottomSheetDialog |
bottomSheetDialogTheme |
CollapsingToolbarLayout |
Widget.Design.CollapsingToolbar |
N/A | N/A |
FloatingActionButton |
Widget.Design.FloatingActionButton |
Widget.MaterialComponents.FloatingActionButton |
floatingActionButtonStyle |
NavigationView |
Widget.Design.NavigationView |
Widget.MaterialComponents.NavigationView |
navigationViewStyle |
Snackbar |
Widget.Design.Snackbar |
Widget.MaterialComponents.Snackbar |
snackbarStyle |
TabLayout TabItem |
Widget.Design.TabLayout |
Widget.MaterialComponents.TabLayout |
tabStyle |
TextInputLayout TextInputEditText |
Widget.Design.TextInputLayout |
Widget.MaterialComponents.TextInputLayout.* |
textInputStyle |
| AppCompat widget | AppCompat default style | AppCompat default style attr | MDC-Android widget | MDC-Android default style | MDC-Android default style attr |
|---|---|---|---|---|---|
AlertDialog.Builder |
AlertDialog.AppCompat ThemeOverlay.AppCompat.Dialog.Alert |
alertDialogStyle alertDialogTheme |
MaterialAlertDialogBuilder |
MaterialAlertDialog.MaterialComponents ThemeOverlay.MaterialComponents.MaterialAlertDialog |
alertDialogStyle materialAlertDialogTheme |
AppCompatAutoCompleteTextView |
Widget.AppCompat.AutoCompleteTextView |
autoCompleteTextViewStyle |
MaterialAutoCompleteTextView |
Widget.MaterialComponents.AutoCompleteTextView.* ThemeOverlay.MaterialComponents.AutoCompleteTextView.* |
autoCompleteTextViewStyle |
AppCompatButton |
Widget.AppCompat.Button |
buttonStyle |
MaterialButton |
Widget.MaterialComponents.Button |
materialButtonStyle |
AppCompatCheckBox |
Widget.AppCompat.CompoundButton.CheckBox |
checkboxStyle |
MaterialCheckbox |
Widget.MaterialComponents.CompoundButton.CheckBox |
checkboxStyle |
AppCompatImageView |
N/A | N/A | ShapeableImageView |
Widget.MaterialComponents.ShapeableImageView |
N/A |
AppCompatRadioButton |
Widget.AppCompat.CompoundButton.RadioButton |
radioButtonStyle |
MaterialRadioButton |
Widget.MaterialComponents.CompoundButton.RadioButton |
radioButtonStyle |
AppCompatTextView |
Widget.AppCompat.TextView |
N/A | MaterialTextView |
Widget.MaterialComponents.TextView |
N/A |
CardView |
CardView |
cardViewStyle |
MaterialCardView |
Widget.MaterialComponents.CardView |
materialCardViewStyle |
PopupMenu |
Widget.AppCompat.PopupMenu.* |
popupMenuStyle |
N/A | Widget.MaterialComponents.PopupMenu.* |
popupMenuStyle |
SwitchCompat |
Widget.AppCompat.CompoundButton.Switch |
switchStyle |
SwitchMaterial |
Widget.MaterialComponents.CompoundButton.Switch |
switchStyle |
Toolbar |
Widget.AppCompat.Toolbar |
toolbarStyle |
MaterialToolbar |
Widget.MaterialComponents.Toolbar |
toolbarStyle |
最新的组件完整列表以及使用文档：https://material.io/develop/android/
示例更新
用 MDC 版本的组件来替换
-
...
-
+
-颜色
MDC的颜色调色板直接从 Material Design color system 中绘制。
由于MDC-Android，AppCompat和框架之间共享历史记录，因此，颜色属性集包括以下内容：
- 框架中已适当命名的现有属性（例如
android:colorBackground） - AppCompat中已适当命名的现有属性（例如
colorPrimary和colorError） - 新的属性由MDC介绍（如
colorSurface，colorOnPrimary等）
MDC窗口小部件使用这些属性来为其背景，文本，图标等着色。要了解哪些小部件使用哪种颜色，需要检查源代码中的默认小部件样式。
AppCompat和框架中还存在一些颜色，但不再适用于此新系统。该Theme.MaterialComponents.*主题尽最大努力向后兼容他们，例如小部件，这些旧属性。
但是，您应该考虑不推荐使用这些属性。使用更合适的MDC属性或逐步淘汰它们。
请参阅下面的颜色属性映射表：
注意 AppCompat 中的颜色属性就不要再使用了
| AppCompat /框架颜色属性 | MDC-Android颜色属性 |
|---|---|
colorPrimary |
colorPrimary |
colorPrimaryDark |
colorPrimaryVariant （android:statusBarColor明确指定） |
| 不适用 | colorOnPrimary |
colorAccent |
colorSecondary |
| 不适用 | colorSecondaryVariant |
| 不适用 | colorOnSecondary |
| 不适用 | colorSurface |
| 不适用 | colorOnSurface |
android:colorBackground |
android:colorBackground |
| 不适用 | colorOnBackground |
colorError |
colorError |
| 不适用 | colorOnError |
android:textColorPrimary，android:textColorSecondary等等。 |
N / A （建议将MDC设置为“ on”属性或使用默认值） |
colorControlNormal，colorControlHighlight，colorControlActivated |
N / A （“接通”或ATTRS使用默认偏好MDC） 注意：这些仍然被用来着色MaterialCheckBox，MaterialRadioButton，SwitchMaterial和MaterialToolbar图标。 |
例子
@color对于包含的按钮文本颜色，我们还应该使用新的“ on”颜色属性
字体板式
新的 TextAppearance 样式/属性
MDC字体板式直接从Material Design类型系统中提取。表达的意思就是紧贴 Material Design 风格
引入了一组新的TextAppearance.MaterialComponents.*样式和相应的textAppearance*主题属性，它们替代了现有的AppCompat /框架样式。
[图片上传失败...(image-6d024e-1600164406898)]
MDC小部件使用这些属性来设置文本样式。要知道哪些窗口小部件使用哪种类型板式，需要检查源代码中的默认窗口小部件样式。
请参阅下面的完整类型样式和属性映射表： 13 种类型
| AppCompat文字样式 | MDC-Android文字样式 | MDC-Android文字属性 |
|---|---|---|
TextAppearance.AppCompat.Display4 |
TextAppearance.MaterialComponents.Headline1 |
textAppearanceHeadline1 |
TextAppearance.AppCompat.Display3 |
TextAppearance.MaterialComponents.Headline2 |
textAppearanceHeadline2 |
TextAppearance.AppCompat.Display2 |
TextAppearance.MaterialComponents.Headline3 |
textAppearanceHeadline3 |
TextAppearance.AppCompat.Display1 |
TextAppearance.MaterialComponents.Headline4 |
textAppearanceHeadline4 |
TextAppearance.AppCompat.Headline |
TextAppearance.MaterialComponents.Headline5 |
textAppearanceHeadline5 |
TextAppearance.AppCompat.Title TextAppearance.AppCompat.Large |
TextAppearance.MaterialComponents.Headline6 |
textAppearanceHeadline6 |
TextAppearance.AppCompat.Subhead TextAppearance.AppCompat.Menu |
TextAppearance.MaterialComponents.Subtitle1 |
textAppearanceSubtitle1 |
TextAppearance.AppCompat.Small |
TextAppearance.MaterialComponents.Subtitle2 |
textAppearanceSubtitle2 |
TextAppearance.AppCompat.Body1 |
TextAppearance.MaterialComponents.Body1 |
textAppearanceBody1 |
TextAppearance.AppCompat.Body2 |
TextAppearance.MaterialComponents.Body2 |
textAppearanceBody2 |
TextAppearance.AppCompat.Button |
TextAppearance.MaterialComponents.Button |
textAppearanceButton |
TextAppearance.AppCompat.Caption |
TextAppearance.MaterialComponents.Caption |
textAppearanceCaption |
| 不适用 | TextAppearance.MaterialComponents.Overline |
textAppearanceOverline |
例子
...
自定义
我们还可以选择在应用程序主题中覆盖类型比例，以使用自定义字体系列，XML或通过Android Studio 下载字体：
+
+
上面我们只是重写了 13 种类型中的一种。如果你想要改变字体的话，建议也把剩余的 12 修改了，以保持APP中字体的一致性。
Shape
ShapeAppearance styles/attributes
Shape（ Material Design shape system） 是用来处理 MDC 控件的边角的一种方式，分成了小，中，大
这些合适的样式属性来自 ShapeAppearance.* styles。包括：cornerFamily （两种值：rounded cut） 。用 cornerSize 来表示尺寸
[图片上传失败...(image-a943e9-1600164406898)]
MDC小部件使用这些属性来设置其背景样式。要了解哪些窗口小部件适用于哪些形状类别，需要检查源代码中的默认窗口小部件样式。
控件背景
实现此功能的类为 MaterialShapeDrawable. 默认情况下，所有的 MDC 控件都将此可绘制对象当做背景，我们也可以考虑将它用作自定义 View 的背景。它可以处理形状主题、阴影、黑色主题等等。
因此。我们不建议使用 android:background 作为 MDC 控件的背景。因为它会覆盖 MaterialShapeDrawable。大多数的 MDC 控件的默认 style 都指定了
为了避免这种情况，应该使用 shapeApperance/shapeAppearanceOverlay 和 backgroundTint 属性来调整背景形状和颜色。
以下情况需要单独注意：
-
MaterialButton在1.2.0-alpha06版本前忽略了android:background如果你确实需要用这个属性，考虑使用AppCompatButton在你的布局中。 -
MaterialShapeDrawable是不支持gradients的。如果确实需要的话，最好用android:background
例子
在我们的示例中我们可以删除一些由 shape theming 来处理的属性。
...
使用 corner family 和 size 来自定义 shape
我们可以选择在应用主题中覆盖形状样式来表达我们自己的品牌。
+
+
+
[图片上传失败...(image-e93686-1600164406898)]
使用 shape theming 的例子
恢复 Button 的自定义渐变背景
-
如果使用的是 MDC 1.2.0-alpha-06 或者更新的版本，可以直接使用 MaterialButton 的 android:background。需要注意的是要清空 backgroundTint，因为在默认的 style 中，backgroundTint 为 colorPrimary