Android Material 组件 1.2.0 现已发布

原创于 2020-08-27 09:30:00 发布 · 2.2k 阅读

CC 4.0 BY-SA版权

文章标签：

Google发布了Android Material组件1.2.0，新增了Material动效系统、Slider组件、ShapeableImageView，并增强了无障碍体验。Material动效包括四种转场模式，Slider支持数值选择，ShapeableImageView则允许自定义形状。此外，1.2.0还修复了MaterialButton自定义背景的问题，并提供了MaterialColors实用工具类。开发者可以查看版本说明和入门指南了解更多详情。

作者 / Nick Rout, Developer Advocate (Material Design), Google

我们为大家带来了全新 Android Material 组件 (MDC-Android) 1.2.0！此次发布新增了很多有意思的新功能、修复了很多问题，并改进了无障碍使用体验，让我们一起探索吧！

请务必查看版本说明以了解本次更新的详细内容。如果您是首次使用 MDC，欢迎查看我们的入门指南。

版本说明
https://github.com/material-components/material-components-android/releases/tag/1.2.0
入门指南
https://material.io/develop/android/docs/getting-started

1.2.0 中的新增功能

继 2 月份发布 1.1.0 后，我们又进行了很多更改: 增加了动效 (motion) 系统、Slider 组件以及支持图像形状主题的 widget，等等。1.2.0 的 alpha 版、beta 版和 RC 版中大家喜欢的功能现已正式成为稳定功能。如果您尚未开始使用 MDC 的 1.2.0 版本，现在便是进行更新的最佳时机。

MDC 1.1.0
https://medium.com/google-design/material-design-components-for-android-1-1-0-are-now-available-45e1d576037c

Material 动效

Material 动效系统包含一套 (四种) 转场动画模式。它们可以帮助用户理解应用并在其中导航浏览，还能增强组件之间或全屏视图之间的联系。这些转场模式包括:

容器变换
https://material.io/design/motion/the-motion-system.html#container-transform
共享轴
https://material.io/design/motion/the-motion-system.html#shared-axis
淡入淡出
https://material.io/design/motion/the-motion-system.html#fade-through
弹出
https://material.io/design/motion/the-motion-system.html#fade

利用 MDC 1.2.0，您可以在 Android 应用中实现 Material 动效。这四种转场模式均以类的形式实现，这些类基于 com.google.android.material.transition 软件包中的 AndroidX Transition 库 (androidx.transition) 和 com.google.android.material.transition.platform 软件包中的 Android Framework Transition 库 (android.transition) 构建而成。这些转场模式可用于 Fragment (包括 Jetpack Navigation) 、Activity 和 View 之间的过渡。

Jetpack Navigation
https://developer.android.google.cn/guide/navigation

Fragment 之间的容器变换 (使用 Jetpack Navigation)

<!-- fragment_a.xml -->
<View
    android:id="@+id/start_view"
    android:transitionName="start_container" />


<!-- fragment_b.xml -->
<View
    android:id="@+id/end_view"
    android:transitionName="end_container" />


// FragmentB.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    sharedElementEnterTransition = MaterialContainerTransform()
}


// FragmentA.kt
fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    exitTransition = Hold()
}
...
val directions = FragmentADirections.actionFragmentAToFragmentB()
val extras = FragmentNavigatorExtras(startView to "end_container")
findNavController().navigate(directions, extras)

Fragment 之间的共享 Z 轴

// FragmentA.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    reenterTransition = MaterialSharedAxis(
        MaterialSharedAxis.Z, /* forward = */ false)
    exitTransition = MaterialSharedAxis(
        MaterialSharedAxis.Z, /* forward = */ true)
}


// FragmentB.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    enterTransition = MaterialSharedAxis(
        MaterialSharedAxis.Z, /* forward = */ true)
    returnTransition = MaterialSharedAxis(
        MaterialSharedAxis.Z, /* forward = */ false)
}

Fragment 之间的淡入淡出

// FragmentA.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    exitTransition = MaterialFadeThrough()
}


// FragmentB.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    enterTransition = MaterialFadeThrough()
}

弹出目标视图 (使用 TransitionManager)

val fade = MaterialFade()
TransitionManager.beginDelayedTransition(container, fade)
view.visibility = View.VISIBLE // Use View.GONE to fade out

详细了解如何在 Android 上实现动效:

https://material.io/develop/android/theming/motion

Slider

利用 Slider (滑动条)，用户可以在一定的数值范围内进行选择，非常适合用于调整音量、亮度等设置数值或在应用图像滤镜时调整其参数。

Sliders
https://material.io/components/sliders

在 MDC 1.2.0 中，您可以通过 Slider 和 RangeSlider widget 在 Android 应用中使用滑动条。这些 widget 类似于 SeekBar，但包含更多功能并支持 Material 主题。

<!-- In layout -->
<com.google.android.material.slider.Slider
    android:id=”@+id/slider”
    ...
    android:valueFrom="0.0"
    android:valueTo="100.0"
    android:stepSize="10.0" />
...
<com.google.android.material.slider.RangeSlider
    android:id=”@+id/rangeSlider”
    ...
    android:valueFrom="0.0"
    android:valueTo="100.0"
    android:stepSize="10.0"
    app:values="@array/initial_slider_values" />


<!-- In res/values/arrays.xml -->
<resources>
    ...
    <array name="initial_slider_values">
        <item>20.0</item>
        <item>70.0</item>
    </array>
</resources>


// In code
slider.addOnChangeListener { slider, value, fromUser ->
    // Respond to change in slider's value
}
...
val values = rangeSlider.values

在这里详细了解如何实现滑动条。

Slider
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/slider/Slider.java
RangeSlider
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/slider/RangeSlider.java
Material 主题
https://material.io/design/material-theming/overview.html
实现滑动条
https://material.io/develop/android/components/slider

ShapeableImageView

全新的 ShapeableImageView widget 是 AppCompatImageView 的扩展，用于处理形状主题 (shape theming)。常见用例是对矩形源图像进行圆角遮罩。不过，该 widget 也支持各种圆角尺寸、切角以及不同的描边宽度和颜色。

<!-- res/values/shape.xml -->
<style name=”ShapeAppearanceOverlay.App.CornerSize50Percent”
    parent=””>
    <!--
    Sets size of corners to be 50% of min(width, height) of widget
    -->
    <item name=”cornerSize”>50%</item>
</style>


<!-- res/values/styles.xml -->
<style name=”Widget.App.ShapeableImageView”
    parent=”Widget.MaterialComponents.ShapeableImageView”>
    <item name=”shapeAppearance”>
        ?attr/shapeAppearanceSmallComponent
    </item>
    <item name=”shapeAppearanceOverlay”>
        @style/ShapeAppearanceOverlay.App.CornerSize50Percent
    </item>
    <item name=”strokeWidth”>1dp</item>
    <item name=”strokeColor”>?attr/colorPrimary</item>
</style>


<!-- In layout -->
<com.google.android.material.imageview.ShapeableImageView
    ...
    style=”@style/Widget.App.ShapeableImageView”
    app:srcCompat=”@drawable/image” />

ShapeableImageView
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/imageview/ShapeableImageView.java

MaterialColors

MaterialColors 实用程序类也已正式加入 MDC 1.2.0。该类提供了各种有用的静态方法，可供您在应用中以编程方式处理颜色时使用。

// Resolve color from theme attr
val primaryColor = MaterialColors.getColor(
    view, R.attr.colorPrimary)


// Layer background color with overlay color + alpha
val overlayedColor = MaterialColors.layer(
    view, R.attr.colorSurface, R.attr.colorPrimary, 0.38f)

MaterialColors
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/color/MaterialColors.java

在所有组件中支持 materialThemeOverlay

利用 materialThemeOverlay 属性，您可以应用主题叠加 (theme overlay)。与 android:theme 不同的是，该属性可以用于默认组件样式 (例如 materialButtonStyle)。默认情况下，该属性只能与 MDC 结合使用；在 1.2.0 中已增加对所有组件的完整支持。您可以使用 MaterialThemeOverlay#wrap 将此功能添加到自定义视图中。

主题叠加
https://medium.com/androiddevelopers/android-styling-themes-overlay-1ffd57745207
MaterialThemeOverlay#wrap
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/theme/overlay/MaterialThemeOverlay.java#L61

MaterialButton 会遵循

android:background 的相应设置

MaterialButton 此前会忽略通过 android:background 应用的自定义背景可绘制内容 (drawable)。MDC 1.2.0 中已修复此问题。如果未设置自定义背景，则 MaterialShapeDrawable 仍将用作默认背景。

MaterialButton
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/MaterialButton.java
MaterialShapeDrawable
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/shape/MaterialShapeDrawable.java

注意: MaterialButton 的默认样式包含 backgroundTint，后者也将应用于自定义背景可绘制内容。您可能需要将其更改为其他颜色或将其设置为 @empty，从而移除此内容。

<!--
Note: Button is auto-inflated as
MaterialButton by MaterialComponentsViewInflater
-->
<Button
    ...
    android:background=”@drawable/custom_background”
    app:backgroundTint=”@empty” />

MDC 未来有哪些计划？

我们正在开发 MDC 的下一个功能版本 1.3.0，并已发布多个 alpha 版。令人期待的新增内容包括 ProgressIndicator、MaterialTimePicker 以及对现有组件的各种改进。我们一如既往地期待您在 GitHub 上提交错误报告和功能需求。另外，请务必查看我们的 Android 示例应用以及了解如何构建 Material 主题。

MDC 1.3.0 alpha 版
https://github.com/material-components/material-components-android/releases/
提交错误报告
https://github.com/material-components/material-components-android/issues/new?assignees=&labels=bug&template=bug_report.md&title=%5BComponent+name%5D+Short+description+of+issue
提交功能需求
https://github.com/material-components/material-components-android/issues/new?assignees=&labels=feature+request&template=feature_request.md&title=%5BComponent+name%5D+Short+description+of+request
示例应用
https://github.com/material-components/material-components-android-examples
构建 Material 主题
https://material.io/resources/build-a-material-theme/

我们强烈建议您开始体验 MDC 1.2.0。如果您正在自己的 Android 应用中使用该版本的功能，请在下方发表评论和我们分享您的使用体验！