返回

Wear OS 简约模拟表盘开发：仅用 WFF XML 无资源文件实现

Android

使用 WatchFaceFormat (WFF) 创建简约模拟表盘

创建简约模拟表盘时，开发者有时会遇到代码示例不足和文档不完善的问题。 本文将深入探讨如何仅使用WFF XML 定义，不依赖 PNG/SVG 等资源文件，创建一个简单的模拟表盘。

问题分析

原始代码尝试使用矩形作为时针、分针和秒针，但最终效果不理想。 主要原因是 AnalogClock 元素及其子元素 HourHand、 MinuteHand、 SecondHand 的尺寸、位置和旋转中心点（pivotX 和 pivotY）设置不正确，导致指针显示位置和旋转行为不符合预期。 另外，由于缺乏必要的视觉元素（例如表盘刻度），表盘整体显得简陋，可读性差。

解决方案

下面提供两种解决方案，分别从简化代码和增加表盘元素两个方面入手。

方案一： 简化指针定义并调整参数

此方案旨在简化指针的定义，使用线条代替矩形，并调整 AnalogClock 及指针元素的尺寸和位置参数，使其正确显示和旋转。

代码示例:

修改后的 /raw/watchface.xml 文件内容如下:

<?xml version="1.0"?>
<WatchFace width="450" height="450">
    <Metadata key="CLOCK_TYPE" value="ANALOG" />
    <Metadata key="PREVIEW_TIME" value="10:08:32" />

    <Scene backgroundColor="#000000">
        <AnalogClock width="450" height="450" centerX="225" centerY="225">

            <!-- Hour Hand (Line) -->
            <HourHand length="80" thickness="8" color="#ffffff" pivotX="0" pivotY="0"/>

            <!-- Minute Hand (Line) -->
            <MinuteHand length="110" thickness="6" color="#00ff00" pivotX="0" pivotY="0"/>

            <!-- Second Hand (Line) -->
            <SecondHand length="130" thickness="2" color="#ff0000" pivotX="0" pivotY="0"/>

            <!-- Center Dot -->
             <Group>
                  <Circle centerX="225" centerY="225" radius="4" color="#ffffff" />
            </Group>

        </AnalogClock>
    </Scene>
</WatchFace>

操作步骤：

  1. 替换项目中的 /raw/watchface.xml 文件内容为以上代码。
  2. 重新编译并部署应用到 Wear OS 设备或模拟器。

代码解释:

  • 使用 Line 元素替代 Rectangle 元素绘制指针， 简化代码结构。
  • 设置 AnalogClock 的 centerX 和 centerY 属性为表盘中心点 (225, 225)，确保指针围绕表盘中心旋转。
  • 调整 HourHand, MinuteHand, SecondHand 的 length 和 thickness 属性，控制指针长度和粗细。
  • 设置指针的 pivotX 和 pivotY 属性为 0 ， 使指针根部与旋转中心重合。
  • 加入 Group 和 Circle 元素，在表盘中心绘制一个小圆点，增强视觉效果。

安全建议:

  • 代码中所有颜色值均可根据个人喜好调整。
  • 建议将指针长度、粗细等参数定义为常量，方便后期调整和维护。
  • 避免使用过于鲜艳的颜色，以免造成视觉疲劳。

方案二： 增加表盘刻度及细节

此方案在方案一的基础上，增加表盘刻度，进一步提升表盘的可读性和美观度。

代码示例:

<?xml version="1.0"?>
<WatchFace width="450" height="450">
    <Metadata key="CLOCK_TYPE" value="ANALOG" />
    <Metadata key="PREVIEW_TIME" value="10:08:32" />

    <Scene backgroundColor="#000000">
        <AnalogClock width="450" height="450" centerX="225" centerY="225">

            <!-- Hour Ticks -->
            <Group>
                 <RepeatingGroup count="12">
                        <Line x1="225" y1="20" x2="225" y2="40" width="4" color="#ffffff" rotateDegrees="30" />
                        <Transform rotateDegrees="30" pivotX="225" pivotY="225" />
                </RepeatingGroup>
           </Group>

            <!-- Minute Ticks -->
             <Group>
                 <RepeatingGroup count="60">
                     <ConditionalElement condition="(${_angle} mod 15) != 0" >
                          <Line x1="225" y1="20" x2="225" y2="30" width="2" color="#666666" rotateDegrees="6"/>
                        </ConditionalElement>
                         <Transform rotateDegrees="6" pivotX="225" pivotY="225"/>
                 </RepeatingGroup>
            </Group>

            <!-- Hour Hand (Line) -->
            <HourHand length="80" thickness="8" color="#ffffff" pivotX="0" pivotY="0"/>

            <!-- Minute Hand (Line) -->
            <MinuteHand length="110" thickness="6" color="#00ff00" pivotX="0" pivotY="0"/>

            <!-- Second Hand (Line) -->
            <SecondHand length="130" thickness="2" color="#ff0000" pivotX="0" pivotY="0"/>

             <!-- Center Dot -->
             <Group>
                <Circle centerX="225" centerY="225" radius="4" color="#ffffff" />
            </Group>

        </AnalogClock>
    </Scene>
</WatchFace>

操作步骤:

  1. 替换项目中的 /raw/watchface.xml 文件内容为以上代码。
  2. 重新编译并部署应用到 Wear OS 设备或模拟器。

代码解释：

  • 使用 RepeatingGroup 元素和 Line 元素绘制 12 个小时刻度和 60 个分钟刻度。
  • 为了视觉上的区分，时针刻度和分针刻度使用了不同颜色、长度、粗细。
  • 为防止分钟刻度与时针刻度重叠，使用ConditionalElement 进行条件渲染，每 15 度跳过一次绘制，保证了视觉上的整洁性。
  • 刻度颜色、粗细、长度均可自定义。

安全建议：

  • 添加过多视觉元素可能会影响表盘性能，建议合理控制刻度数量和复杂程度。
  • 可以通过调整 RepeatingGroup 的 count 属性和 Line 元素的 rotateDegrees 属性来改变刻度的数量和位置。
  • 考虑使用不同的颜色或形状来区分小时刻度和分钟刻度， 提高可读性。
  • 复杂表盘设计需要更多测试， 保证不同时间显示效果均正常。

相关资源

以上两种方案提供了一个基本模拟表盘的创建思路。 实际开发中，开发者可以根据需求进行调整和扩展，例如添加日期显示、电池电量指示等功能。 在满足功能需求的前提下， 也要注重表盘的美观性和可读性。