很长一段时间来，微件 (widget) 始终是 Android 用户体验的外围组成部分，很多利用通过微件来晋升用户黏度。用户乐于应用微件的起因是能够在不关上利用的状况下应用利用性能，且可自定义设施的主屏幕。

Android 12 更新了已有的 Widget API，重塑了微件的设计来符合 "Material You" 设计语言。这些更新能够帮忙您应用设施的主题色彩和圆角来构建更加好看的微件，从而晋升微件在搜寻和摆放时的可发现性和视觉观感。

△ 比照更新之前 (Android 11) 和更新后的浅色和深色主题 (Android 12)

在这个系列中，咱们将带您更新微件来适配 Android 12。在本文中咱们将进行一些简略的批改，使您的微件可能在 Android 12 的设施上看起来更加粗劣，且在较旧版本的设施中提供统一的用户体验。在第二篇文章中，咱们将理解新的 API，通过它们能够使微件更加个性化、响应更灵活并且更具互动性。

视觉变动

对于用户来说，毫无疑问最直观的视觉变动是格调和设计上的扭转。更新可视元素，比方色彩和圆角，呈现出的外观会令用户耳目一新。减少这些批改，咱们举荐您创立一个自定义的主题。

减少动静色彩

Material You 旨在提供更加个性化的用户体验。在 Android 12 中，动静色彩能够使您的微件与其它微件以及零碎保持一致的格调。微件能够应用零碎默认的主题 Theme.DeviceDefault.DayNight，并且在微件的 UI 元素中应用主题色彩属性。

https://www.bilibili.com/vide...

△ Material Design 更新一览

对于 SDK 级别低于 31 的设施，您须要创立一个继承自 DeviceDefault 的自定义主题。

values/themes.xml<style name="Theme.AppWidget.AppWidgetContainer"   parent="@android:style/Theme.DeviceDefault" />

对于 SDK 级别为 31 的设施，应用主题 DeviceDefault.DayNight 来创立自定义主题。

values-v31/themes.xml<style name="Theme.AppWidget.AppWidgetContainer"    parent="@android:style/Theme.DeviceDefault.DayNight" />
  • values/themes.xml
  • values-v31/themes.xml
或者，如果您的利用应用了 [Material Components]()，您能够应用 Theme.MaterialComponents.DayNight 作为根底主题，而不是应用 Theme.DeviceDefault。

为了可能让您的微件能够动静适配零碎色彩，您能够将该主题配置到您的微件上，并且在微件的其它视图上应用主题色彩属性。

layout/widget_checkbox_list_title_region.xml...<TextView android:id="@+id/checkbox_list_title"   android:layout_width="0dp"   android:layout_height="wrap_content"       android:layout_gravity="center_vertical"   android:layout_marginStart="8dp"   android:layout_weight="1"   android:text="@string/grocery_list"   android:textColor="?android:attr/textColorPrimary" /><ImageButton   android:layout_width="@dimen/widget_element_min_length"   android:layout_height="@dimen/widget_element_min_length"   android:background="?android:attr/selectableItemBackground"   android:clickable="true"   android:contentDescription="@string/add_button_grocery_list_content_description"   android:src="@drawable/ic_add_24"   android:tint="?android:attr/colorAccent" />...
  • layout/widget_checkbox_list_title_region.xml

△ 在浅色/深色主题中动态色彩与动静色彩的比照

圆角

从 Android 12 开始，圆角将主动利用于微件。这也意味着圆角会裁剪微件的局部内容。为了避免出现这样的问题，并且提供与其它微件和零碎格调统一的外观和用户体验，您能够应用 system_app_widget_background_radius 在微件的背景增加圆角，应用 system_app_widget_inner_radius 在微件中的视图增加圆角。后者的值须要比 system_app_widget_background_radius 小 8dp。

在增加上述批改时，请留神如果您的微件蕴含凑近角区域的内容，这些内容可能会被裁减掉。要解决该问题，您须要增加足够大的 padding 来防止微件的内容与圆角之间的抵触。

values/attrs.xml<declare-styleable name="AppWidgetAttrs">   <attr name="appWidgetPadding" format="dimension" />      <attr name="appWidgetInnerRadius" format="dimension" />   <attr name="appWidgetRadius" format="dimension" /></declare-styleable>values/themes.xml<style name="Theme.AppWidget.AppWidgetContainerParent"   parent="@android:style/Theme.DeviceDefault"><!-- 微件的外轮廓的圆角半径 -->   <item name="appWidgetRadius">16dp</item><!-- widget 外部视图边缘的圆角半径。它的值为 8 dp 或者小于 appWidgetRadius  -->   <item name="appWidgetInnerRadius">8dp</item></style><style name="Theme.AppWidget.AppWidgetContainer"   parent="Theme.AppWidget.AppWidgetContainerParent"> <!-- 减少 padding 来防止微件的内容与圆角抵触 -->   <item name="appWidgetPadding">16dp</item></style>values-v31/themes.xml<style name="Theme.AppWidget.AppWidgetContainerParent"   parent="@android:style/Theme.DeviceDefault.DayNight">   <item name="appWidgetRadius">       @android:dimen/system_app_widget_background_radius</item>        <item name="appWidgetInnerRadius">       @android:dimen/system_app_widget_inner_radius</item></style>values/styles.xml<style name="Widget.AppWidget.AppWidget.Container"   parent="android:Widget">   <item name="android:id">@android:id/background</item>   <item name="android:background">       ?android:attr/colorBackground</item></style>
  • values/attrs.xml
  • values/themes.xml
  • values-v31/themes.xml
  • values/styles.xml
如果您的 minTargetSDK 小于 21，那么您须要提供实用于 SDK 版本 21 的 style，因为在 可绘制对象 上应用 android:attr/colorBackground 须要 SDK 版本至多为 21。

至此您曾经创立了主题，当初能够在微件的布局上设置款式了。

layout/widget_grocery_list.xml<LinearLayout   style="@style/Widget.AppWidget.AppWidget.Container">   ...</LinearLayout>
  • layout/widget_grocery_list.xml

△ 比照原有格调、主动圆角成果以及带有圆角和 padding 的成果

过渡

当利用通过微件关上时，Android 12 提供了过渡成果。该过渡成果是由零碎主动解决的，并且在旧版本的 Android 上不会呈现。要启用该成果，您须要在微件布局根元素上指定一个 id，并设置它的值为 android:id/background。

<LinearLayout   android:id="@android:id/background">   ...</LinearLayout>

△ 过渡成果的慢放动画

如果您的微件应用了 broadcast trampoline，也就是说您的微件在用户点击时创立了 PendingIntent，通过播送或者服务启动 Activity，那么在这种状况下，该过渡动画不会失效。

微件选择器的优化

预览

Android 12 蕴含新的通过改良的微件选择器。与应用动态可绘制资源不同，新的微件选择器应用 XML 布局来动态创建缩放的微件预览。

如果您的微件并不蕴含动静元素，比方 ListView 或者 GridView，您能够应用微件的布局实现预览。

要实现预览，您须要将默认值间接设置到原始布局上。

<TextView   style="@style/Widget.AppWidget.Checkbox"   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:text="@string/widget_title_preview" /><TextView   style="@style/Widget.AppWidget.Checkbox"   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:text="@string/widget_subject_preview" />

在布局上设置默认值可能会带来大量的提早，因为占位的值会在理论值之前首先被启用。要防止该问题，您能够为预览创立一个独立的布局文件，并且启用自定义的预览主题。

<resources>   <!-- 申明属性-->   <attr name="widgetTitlePreview" format="string" />   <attr name="widgetSubjectPreview" format="string" />   <!-- 申明 style -->   <style name="Theme.MyApp.Widget"       parent="@style/Theme.DeviceDefault.DayNight.AppWidget">       <item name="widgetTitlePreview"></item>       <item name="widgetSubjectPreview"></item></style>   <style name="Theme.MyApp.Widget.Preview">       <item name="widgetTitlePreview">Preview Title</item>       <item name="widgetSubjectPreview">Preview Subject</item></style></resources>

创立预览主题后，您能够在布局中将它利用到预览元素上。

layout/my_widget_preview.xml<LinearLayout ...>   <include layout="@layout/widget_header"        android:theme=”@style/Theme.MyApp.Widget.Preview” /></LinearLayout>layout/my_widget_actual.xml<LinearLayout ...>   <include layout="@layout/widget_header"       android:theme=”@style/Theme.MyApp.Widget” /></LinearLayout>

最初，您须要将微件的布局设置为 appwidget-provider 的 previewLayout 属性。

xml/app_widget_info_checkbox_list.xml<appwidget-provider   android:previewLayout="@layout/widget_grocery_list"   .../>
  • xml/app_widget_info_checkbox_list.xml

△ 比照动态预览成果与缩放预览成果

对于显示多个元素的 ListView、GridView 或者 Stack，是无奈间接在布局上设置默认值的。对于这些视图，您能够为微件预览创立另一个布局，并且在布局中设置固定的值。

要实现上述操作，举荐的最佳实际是应用 <include> 标签来复用布局的一部分以启用默认值，而无需复制整个布局。您能够将新的布局设置为 appwidget-provider 的 previewLayout 属性。

形容

您也能够设置 description 属性作为形容信息显示在微件选择器上。尽管这是可选项，然而提供形容信息能够帮忙用户更好地理解微件的性能。

app_widget_info_checkbox_list.xml<appwidget-provider  android:description="@string/app_widget_grocery_list_description"  .../>

△ 微件形容

总结

在本文中，咱们为您展现了如何更新微件设计并且在微件选择器中提供更好的用户体验。上述内容能够疾速更新您的微件来适配 Android 12，您的用户能够看到十分直观的区别。

但这并不是全副。在下一篇文章中，咱们将会理解新的 API，它能够使您的微件更加个性化，响应更灵活且更具互动性。

欢迎您 点击这里 向咱们提交反馈，或分享您喜爱的内容、发现的问题。您的反馈对咱们十分重要，感谢您的反对！