从 Design 库到 MDC ,样式变成 Theme.MaterialComponents.* 后有了一些变化。拿 Button 来举例,Button失去了自定义背景。现在 Button 有了一个绿色的强调色并且字体间的间距变大了。
那么为什么会这样呢?我们先来看一下布局
<Button android:id="@+id/containedButton" // 这是自定义的某种颜色的背景 android:background="@drawable/bg_button_gradient" android:textColor="@android:color/white" ... /> <Button android:id="@+id/textButton" style=”?attr/borderlessButtonStyle” ... />之所以出现这种情况是因为,在填充布局的时候,会自动将我们布局中的普通控件替换成 MDC 控件。
和 AppCompat 一样,MDC 会在填充的时候用 MDC 等效的控件来替换某些原始控件。这样就可以发布新功能和错误修正了,而不必将所有声明都换成新的类型。这是通过 MaterialComponentsViewInflater 来完成的,它属于 AppCompatViewInflater 的子类。
映射关系:
Framework widget AppCompat widget (replaced by AppCompatViewInflater) MDC-Android widget (replaced by MaterialComponentsViewInflater)Button AppCompatButton MaterialButton
CheckBox AppCompatCheckBox MaterialCheckBox
RadioButton AppCompatRadioButton MaterialRadioButton
TextView AppCompatTextView MaterialTextView
AutoCompleteTextView AppCompatAutoCompleteTextView MaterialAutoCompleteTextView
注意: 在 MDC 1.0.0 中只有 Button 控件被替换了。
我们例子中如果是 Theme.AppCompat.* 的主题,那么就会把 Button 用 AppCompatButton 来替换。现在把主题修改成 Theme.MaterialComponents.* ,那么就会把 Button 替换成 MaterialButton ,会有默认的 style
和 AppCompatButton 不同的是 MaterialButton 不支持自定义背景。到 1.2.0-alpha06 版本开始支持。使用 Shape 可以进行变通。下面章节会详细介绍。
更新到 MDC 1.1.0从 1.0.0 到 1.1.0 有了很多新变化:
完整的 Material Theming
Dark Theme 支持
Android 10 手势导航支持
新组件:扩展 FAB、date picker、badges、toggle buttons
无障碍功能提升、bug 修复等等
implementation ‘com.google.android.material:material:1.1.0’
一些出乎意料的改变和普通问题MDC 1.1.0更改了一些默认的小部件样式,以更好地符合“材料设计”准则。但是,升级后,您可能会注意到某些控件颜色和其他属性的某些意外更改。
在上面的示例中,按钮发生了变化、文本和图标的颜色发生了变化。FAB 现在变成了蓝绿色,并且文本字段看起来完全不同。不用担心。我们的当前主题中可能是丢失了一些重要的 MDC 属性,同时有一些重要的 AppCompat 或者原有属性(android:xxx)不再需要。下面我们通过一些常见的迁移方案来了解一下这些问题
文字栏位改变在 MDC 中,文字字段默认样式发生了改变。改进版本是经过用户调查研究的。
我们建议您使用这个版本,来提高可用性和可配置项性。但是我们意识到这可能并不适合您的品牌和设计系统。
要恢复为旧的文本字段可以在布局中添加样式
<com.google.android.material.textfield.TextInputLayout ... +> ... </com.google.android.material.textfield.TextInputLayout>或者你也可以在主题中给所有的文本设置默认样式
<style parent="Theme.MaterialComponents.*"> ... + <item name=”textInputStyle”>@style/Widget.App.TextInputLayout</item> </style> +<style name=”Widget.App.TextInputLayout” parent=”Widget.Design.TextInputLayout”> + <!-- Custom attrs --> +</style>更喜爱 MDC 样式和控件