Tạo mặt đồng hồ cho Wear OS
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Trước khi bắt đầu

Để tạo mặt đồng hồ cho Wear OS, nhà phát triển phải sử dụng Định dạng mặt đồng hồ. Đây là định dạng dựa trên XML cho phép bạn tạo mặt đồng hồ ấn tượng và hoạt động hiệu quả.

Lớp học lập trình này dành cho những người muốn tự tạo mặt đồng hồ bằng XML hoặc những người muốn hiểu rõ hơn về định dạng này để xây dựng công cụ thiết kế của riêng mình.

Nếu muốn sử dụng các công cụ đồ hoạ để tạo mặt đồng hồ của riêng mình, bạn nên xem xét các công cụ hiện có như Watch Face Studio.

Điều kiện tiên quyết

Có kinh nghiệm về XML.

Bạn sẽ thực hiện

Trong lớp học lập trình này, bạn sẽ tìm hiểu:

Cách đóng gói mặt đồng hồ WFF
Cách tạo mặt đồng hồ, bao gồm cả chế độ môi trường xung quanh
Thêm các phần tử như hình dạng
Tích hợp nguồn dữ liệu vào mặt đồng hồ
Cách khắc phục sự cố về mặt đồng hồ

Bạn sẽ tạo một mặt đồng hồ có thể tuỳ chỉnh, với nhiều chủ đề màu sắc để lựa chọn, được tích hợp chỉ báo số bước và ngày.

Bạn cần có

Android Studio Meerkat trở lên – mặc dù không cần phải sử dụng trực tiếp Android Studio, nhưng đây là cách dễ nhất để đảm bảo bạn đã cài đặt những công cụ cần dùng như Công cụ xây dựng Android và Công cụ nền tảng.
Trình mô phỏng Wear OS hoặc đồng hồ Wear OS thực, đã bật tuỳ chọn cho nhà phát triển.

2. Tìm hiểu cấu trúc dự án Định dạng mặt đồng hồ

Tải các tệp của lớp học lập trình xuống

Để bắt đầu, hãy tải các tệp của lớp học lập trình này xuống tại đây

$ git clone https://github.com/android/codelab-watch-face-format

Ngoài ra, bạn có thể tải kho lưu trữ xuống dưới dạng tệp Zip:

Có hai dự án trong thư mục watch-face-format: start và finish. Chúng ta sẽ sử dụng dự án start, nhưng bạn có thể xem dự án finish bất cứ khi nào bạn muốn. Dự án này chứa lớp học lập trình đã hoàn tất.

Hãy cùng kiểm tra cấu trúc cơ bản của dự án Định dạng mặt đồng hồ. Bạn có thể dùng trình chỉnh sửa bạn chọn hoặc mở chính dự án bắt đầu trong Android Studio bằng cách sử dụng File > Open... (Tệp > Mở) rồi chọn thư mục start.

Trong thư mục start/watchface/src/main, bạn sẽ thấy các tệp sau, hãy xem chức năng của từng tệp:

Tệp	Nội dung mô tả
`AndroidManifest.xml`	Giống như trong một ứng dụng Android thông thường, tệp này chứa thông tin thiết yếu về mặt đồng hồ và những gì cần thiết để tạo mặt đồng hồ.
`res/xml/watch_face_info.xml`	Tệp thông tin về mặt đồng hồ chứa siêu dữ liệu về mặt đồng hồ, chẳng hạn như cách tìm hình ảnh xem trước và liệu mặt đồng hồ có thể tuỳ chỉnh hay không.
`res/raw/watchface.xml`	Tệp này chứa định nghĩa về chính mặt đồng hồ. Mặc dù có thể có nhiều định nghĩa, nhưng đây là tệp mặc định được dùng.
`res/drawable/preview.png`	Mỗi mặt đồng hồ cần có một hình ảnh xem trước mà hệ thống sử dụng. Để tạo dự án này, thư mục start/ chứa một bản xem trước trống – chúng ta sẽ cập nhật sau
`res/drawable/hour.pngres/drawable/minute.pngres/drawable/second.png`	Đây là các kim đồng hồ mà chúng ta sẽ dùng cho mặt đồng hồ.
`res/values/strings.xml`	Giống như trong một ứng dụng Android, sẽ có chứa các chuỗi có thể dùng cho mặt đồng hồ.

Mã ở đâu?

Hãy lưu ý rằng thực sự không có mã nào trong dự án. Ngoài tệp AndroidManifest.xml, mọi tệp của dự án đều nằm trong res/ – thư mục tài nguyên. Lý do là mặt đồng hồ theo Định dạng mặt đồng hồ không được chứa mã: Ví dụ: nếu bạn cố gắng đưa mã Kotlin hoặc Java vào, thì Cửa hàng Play sẽ không chấp nhận mặt đồng hồ đó.

Hệ thống Wear OS sẽ đọc các tài nguyên này và chịu trách nhiệm tạo cũng như chạy mặt đồng hồ cho bạn. Do đó, bạn không cần bất kỳ thời gian chạy hoặc logic nào khác để tiết kiệm công sức phát triển.

3. Tạo mặt đồng hồ

Chúng ta sẽ cập nhật từng tệp ở trên để tạo một mặt đồng hồ có chức năng.

Chuẩn bị tệp kê khai

Để xác định gói là mặt đồng hồ theo Định dạng mặt đồng hồ, tệp kê khai cần khai báo 2 nội dung:

Không có mã nào trong dự án.
Phiên bản Định dạng mặt đồng hồ đang được sử dụng.

Trước tiên, hãy cập nhật phần tử <application> để thêm thuộc tính hasCode:

<application
    android:label="@string/watch_face_name"
    android:hasCode="false">

Thứ hai, hãy thêm <property> vào phần tử <application> để chỉ định phiên bản Định dạng mặt đồng hồ được dùng cho mặt đồng hồ này:

<property
    android:name="com.google.wear.watchface.format.version"
    android:value="1" />

Xác định tệp `watch_face_info`

Tệp watch_face_info.xml có một yêu cầu bắt buộc: chỉ định vị trí của hình ảnh xem trước. Trong dự án này, chúng tôi đã cung cấp hình ảnh xem trước tại res/drawable/preview.png. Đây là một tệp trống nhưng chúng ta sẽ cập nhật tệp này sau bằng ảnh chụp màn hình thực tế của mặt đồng hồ đã hoàn thiện.

Trong lớp học lập trình này, chúng ta cũng sẽ tạo mặt đồng hồ có thể tuỳ chỉnh. Chúng ta cũng khai báo thông tin này trong watch_face_info.xml file bằng phần tử <Editable>.

Cập nhật res/xml/watch_face_info.xml để thêm các phần tử sau:

<Preview value="@drawable/preview" />
<Editable value="true" />

Viết XML cho Định dạng mặt đồng hồ

Định nghĩa về mặt đồng hồ thực tế có trong res/raw/watchface.xml. Kiểm tra tệp này trong trình soạn thảo. Bạn sẽ thấy phần tử <WatchFace> xác định chiều rộng và chiều cao cho mặt đồng hồ là 450x450. Không gian toạ độ này được dùng trong phần còn lại của tệp bất kể kích thước pixel thực tế mà mặt đồng hồ chạy trên đó, điều chỉnh tỷ lệ lên hoặc xuống cho phù hợp.

XML sẽ như sau:

<?xml version="1.0"?>
<WatchFace width="450" height="450">
  <Scene>
    <PartText x="0" y="0" width="450" height="450">
      <Text>
        <Font family="SYNC_TO_DEVICE" size="48">Hello, World!</Font>
      </Text>
    </PartText>
  </Scene>
</WatchFace>

Hiện tại, định nghĩa này chỉ hiển thị "Hello, World!" (Xin chào!) trên đồng hồ – nhưng chưa có thời gian! – nhưng chúng ta sẽ quay lại để khắc phục vấn đề này. Hãy xem cách tạo và đưa mặt đồng hồ lên thiết bị.

Tạo và triển khai mặt đồng hồ

Trên dòng lệnh, hãy đảm bảo bạn đang ở thư mục bắt đầu và đưa ra lệnh sau:

./gradlew installDebug

Hoặc trên Windows:

gradlew.bat installDebug

Thao tác này sẽ tạo và cài đặt mặt đồng hồ trên thiết bị. Nhấn và giữ màn hình mặt đồng hồ rồi tìm mặt đồng hồ trong Lớp học lập trình. Một cách khác là dùng dòng lệnh để đặt mặt đồng hồ:

adb shell am broadcast -a com.google.android.wearable.app.DEBUG_SURFACE --es operation set-watchface --es watchFaceId com.example.codelab

Giờ đây, bạn sẽ thấy mặt đồng hồ trên đồng hồ hoặc trình mô phỏng! Xin chúc mừng!

4. Thêm thời gian

Định dạng mặt đồng hồ hỗ trợ việc hiển thị cả đồng hồ kim và đồng hồ kỹ thuật số. Thậm chí, một mặt đồng hồ có thể chứa cả hai hoặc nhiều loại đồng hồ.

Hãy xem cách thêm đồng hồ kim bằng phần tử < AnalogClock>. Trước tiên, hãy xoá toàn bộ phần tử < PartText> khỏi tệp watchface.xml rồi thay thế bằng phần tử sau:

<AnalogClock x="0" y="0" width="450" height="450">
  <!-- TODO: Add shadows here later -->
  <HourHand resource="hour"
      x="215" y="50" width="20" height="190"
      pivotX="0.5" pivotY="0.921" >
  </HourHand>
  <MinuteHand resource="minute"
      x="217" y="25" width="16" height="220"
      pivotX="0.5" pivotY="0.9">
  </MinuteHand>
  <SecondHand resource="second"
      x="221" y="15" width="8" height="245"
      pivotX="0.5" pivotY="0.857">
    <Variant mode="AMBIENT" target="alpha" value="0" />
    <Sweep frequency="15" />
  </SecondHand>
</AnalogClock>

Phần tử <AnalogClock> có chiều cao và chiều rộng là 450. Do đó, phần tử này đang chiếm toàn bộ màn hình. Phần tử này cũng có 3 phần tử con: < HourHand>, < MinuteHand> và < SecondHand>. Hãy lưu ý những điều sau về cách xác định các thuộc tính này:

Tài nguyên: Mỗi phần tử con này đều có một thuộc tính tài nguyên tương ứng với một thành phần có thể vẽ. Ví dụ: có một tệp hour.png trong res/drawable được phần tử <HourHand> sử dụng. Lưu ý rằng bạn không cần chỉ định @drawable.
Trục xoay: Kim đồng hồ được tự động xoay, nhưng pivotX và pivotY chỉ định vị trí của trục xoay. Ví dụ: pivotY được tính như sau:

Biến thể: <SecondHand> bao gồm một phần tử con < Variant>. Phần tử này ẩn kim giây vì mặt đồng hồ sẽ chỉ cập nhật mỗi phút khi ở chế độ môi trường xung quanh.

Bây giờ, hãy chạy các lệnh sau để tạo lại và triển khai mặt đồng hồ cho thiết bị hoặc trình mô phỏng:

./gradlew installDebug

Lần này, chúng ta đã có một đồng hồ hoạt động, mặc dù vẫn còn nhiều việc cần làm để cải thiện đồng hồ này!

5. Thêm màu sắc và giao diện

Một trong những yếu tố khiến mặt đồng hồ trở nên ấn tượng là khả năng cá nhân hoá và thể hiện phong cách riêng.

Mặt đồng hồ của chúng ta hiện có vẻ hơi đơn giản – toàn là màu trắng. Vì vậy, hãy thêm một chút màu sắc nào! Không chỉ vậy, hãy tạo các chủ đề màu sắc có thể tuỳ chỉnh.

Tạo ColorConfiguration

Trước tiên, chúng ta sẽ xác định các chủ đề màu sắc có trong mặt đồng hồ. Trong watchface.xml, hãy tìm văn bản  rồi thay thế bằng:

<UserConfigurations>
  <ColorConfiguration id="themeColor" displayName="color_label" defaultValue="0">
    <ColorOption id="0" displayName="color_theme_0" colors="#ffbe0b #fb5607 #ff006e #8338ec #883c3c3c" />
    <ColorOption id="1" displayName="color_theme_1" colors="#8ecae6 #219ebc #ffb703 #fb8500 #883c3c3c" />
    <ColorOption id="2" displayName="color_theme_2" colors="#ff595e #ffca3a #8ac926 #1982c4 #883c3c3c" />
    <ColorOption id="3" displayName="color_theme_3" colors="#ff0000 #00ff00 #ff00ff #00ffff #883c3c3c" />
    <ColorOption id="4" displayName="color_theme_4" colors="#ff99c8 #fcf6bd #d0f4de #a9def9 #883c3c3c" />
    <ColorOption id="5" displayName="color_theme_5" colors="#1be7ff #6eeb83 #e4ff1a #ffb800 #883c3c3c" />
  </ColorConfiguration>
</UserConfigurations>

Thao tác này xác định 6 chủ đề màu sắc, trong đó mỗi chủ đề chứa 5 màu. Mỗi chủ đề là một danh sách màu được phân tách bằng dấu cách, như trong thuộc tính colors.

Mỗi chủ đề sẽ cần có một tên dễ đọc. Vì vậy, hãy thêm các định nghĩa sau vào tệp res/values/strings.xml:

<string name="color_label">Color Theme</string>
<string name="color_theme_0">Bold</string>
<string name="color_theme_1">Magic</string>
<string name="color_theme_2">Breeze</string>
<string name="color_theme_3">Daytime</string>
<string name="color_theme_4">Relaxed</string>
<string name="color_theme_5">Smart</string>

Sử dụng ColorConfiguration

Sau khi xác định chủ đề màu sắc, hãy áp dụng các chủ đề đó cho kim đồng hồ bằng cách thêm thuộc tính tintColor vào từng kim. Sửa đổi watchface.xml như sau:

<HourHand ... tintColor="[CONFIGURATION.themeColor.0]">
...
<MinuteHand ... tintColor="[CONFIGURATION.themeColor.1]">
...
<SecondHand ... tintColor="[CONFIGURATION.themeColor.2]">

<HourHand> tham chiếu đến màu đầu tiên trong chủ đề đã chọn, <MinuteHand> là màu thứ hai và <SecondHand> là màu thứ ba.

Tạo lại và triển khai mặt đồng hồ như trước và bạn sẽ thấy mặt đồng hồ hiện đã có màu!

Không chỉ vậy, nếu nhấn và giữ mặt đồng hồ rồi nhấn vào nút cài đặt, bạn có thể chọn trong số 6 chủ đề màu sắc!

6. Thêm màu nền

Chúng ta có thể thực hiện thêm một số việc để làm nổi bật mặt đồng hồ này. Hãy thêm một thiết kế có nền đậm. Mặc dù nền vẫn chủ yếu là màu đen, nhưng điểm nhấn màu sắc này sẽ giúp nâng tầm giao diện.

Chúng ta sẽ sử dụng phần tử Định dạng mặt đồng hồ < PartDraw> để tạo một lớp vẽ các hình cơ bản như đường thẳng, hình chữ nhật, hình bầu dục và vòng cung. Thay thế văn bản:  bằng nội dung sau:

<Group x="100" y="100" width="250" height="250" name="background" alpha="127">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <PartDraw x="0" y="0" width="250" height="250">
    <Ellipse x="0" y="0" width="250" height="250">
      <Fill color="[CONFIGURATION.themeColor.3]" />
    </Ellipse>
    <Ellipse x="50" y="50" width="150" height="150">
      <Fill color="#000000" />
    </Ellipse>
  </PartDraw>
</Group>

Lưu ý khi sử dụng lại phần tử <Variant>: Thao tác này sẽ xoá vòng nền khi ở chế độ môi trường xung quanh để giảm thiểu số lượng điểm ảnh sáng.

Ngoài ra, hãy lưu ý cách chúng ta sử dụng lại chủ đề màu sắc để chọn màu cho vòng tròn, nhờ đó duy trì kiểu trên mọi phần tử của mặt đồng hồ.

7. Xác thực mặt đồng hồ

Trước khi tiếp tục cải thiện mặt đồng hồ, hãy cùng tìm hiểu cách đơn giản hoá quy trình phát triển thông qua việc sử dụng Trình xác thực Định dạng mặt đồng hồ.

Trình xác thực là một công cụ kiểm tra tính chính xác của XML, nhờ đó bạn tiết kiệm thời gian tạo và triển khai mặt đồng hồ mà không phải lo lắng về việc mặt đồng hồ đó không hoạt động.

Tải tệp JAR của trình xác thực từ kho lưu trữ GitHub.
Chạy trình xác thực trên tệp watchface.xml

java -jar wff-validator.jar 1 watchface/src/main/res/raw/watchface.xml

Nếu XML cho mặt đồng hồ là hợp lệ, bạn sẽ thấy thông báo xác nhận. Tuy nhiên, nếu phát hiện lỗi, thông tin chi tiết về lỗi và vị trí sẽ xuất hiện, ví dụ:

SEVERE: [Line 18:Column 49]: cvc-complex-type.2.4.a: Invalid content was found starting with element 'PartDrw'

8. Sử dụng nguồn dữ liệu

Định dạng mặt đồng hồ có thể tận dụng một loạt các nguồn dữ liệu để giúp mặt đồng hồ hữu ích hơn.

Hãy thêm 2 nguồn dữ liệu thường dùng để giúp mặt đồng hồ hữu ích hơn: Ngày hiện tại (ai mà chưa từng quên ngày chứ?) và số bước hằng ngày của bạn.

Mỗi phần tử trong số này được đặt trong vùng chứa < PartText>. Đây là một lớp để thực hiện các thao tác văn bản.

Thêm ngày

Thay thế văn bản  bằng nội dung sau:

<PartText x="225" y="225" width="225" height="225">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <TextCircular centerX="0" centerY="0" width="415" height="415" startAngle="180" endAngle="90" align="CENTER" direction="COUNTER_CLOCKWISE">
    <Font family="SYNC_TO_DEVICE" size="28" color="[CONFIGURATION.themeColor.0]">
      <Template>
        <![CDATA[%d %s]]>
        <Parameter expression="[DAY]"/>
        <Parameter expression="[MONTH_S]"/>
      </Template>
    </Font>
  </TextCircular>
</PartText>

Trong đoạn mã trên, chúng ta sử dụng < Template> để định dạng 2 nguồn dữ liệu thành một chuỗi. DAY là một số nguyên từ 1 đến 31 còn MONTH_S đã là một chuỗi. Vì vậy, chúng ta sử dụng biểu thức định dạng %d %s để đặt số nguyên và chuỗi với nhau.

Bạn nên bao quanh phần tử này bằng phần tử CDATA để tránh tình trạng khoảng trắng vô tình được đưa vào quá trình kết xuất. Điều này có thể ảnh hưởng đến việc xác định vị trí và căn chỉnh.

Cuối cùng, hãy lưu ý lần nữa về cách chúng ta sử dụng lại chủ đề màu sắc để đảm bảo rằng phần bổ sung mới nhất cho mặt đồng hồ này vẫn áp dụng chủ đề hiện có.

Thêm số bước

Thay thế văn bản  bằng nội dung sau:

<PartText x="0" y="0" width="225" height="225">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <TextCircular centerX="225" centerY="225" width="415" height="415" startAngle="270" endAngle="360" align="CENTER" direction="CLOCKWISE">
    <Font family="SYNC_TO_DEVICE" size="28" color="[CONFIGURATION.themeColor.2]">
      <Template>
        <![CDATA[%05d]]>
        <Parameter expression="[STEP_COUNT]"/>
      </Template>
    </Font>
  </TextCircular>
</PartText>

Định dạng mặt đồng hồ hỗ trợ nhiều nguồn dữ liệu và số bước là một phần bổ sung hữu ích cho mọi mặt đồng hồ, giúp người dùng theo dõi hoạt động và bài tập thể dục hằng ngày của họ.

Tạo và triển khai mặt đồng hồ để kiểm tra những phần bổ sung mới nhất này:

9. Hoàn thiện và xem trước

Với mặt đồng hồ, mọi thứ đều cần được chú ý đến từng chi tiết. Vì vậy, hãy thêm một vài chi tiết hoàn thiện cuối cùng.

Thêm bóng vào mặt đồng hồ

Các kim đồng hồ kết hợp với nhau rất hài hoà với nhiều màu sắc, nhưng trông hơi phẳng so với mặt đồng hồ. Thay thế  bằng nội dung sau để thêm bóng phía sau kim đồng hồ:

<HourHand resource="hour" x="220" y="55" width="20" height="190"
    pivotX="0.5" pivotY="0.921" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
</HourHand>
<MinuteHand resource="minute" x="222" y="30" width="16" height="220"
    pivotX="0.5" pivotY="0.9" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
</MinuteHand>
<SecondHand resource="second" x="226" y="20" width="8" height="245"
    pivotX="0.5" pivotY="0.857" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <Sweep frequency="15" />
</SecondHand>

Thêm biểu trưng vui nhộn

Mỗi nhà sản xuất đồng hồ nổi tiếng đều có biểu trưng trên mặt đồng hồ. Vì vậy, hãy thêm biểu trưng của riêng chúng ta! Đương nhiên, hãy sử dụng biểu trưng Android!

Tuy nhiên, vì đây là đồng hồ thông minh nên hãy thử một điều gì đó mới lạ và thêm một biểu trưng có thể di chuyển theo góc nghiêng cổ tay của người đeo.

Để làm việc này, chúng ta sẽ đặt hình ảnh bên trong phần tử < Group>, sau đó sử dụng phần tử < Transform> để xoay phần tử <Group> theo góc nghiêng cổ tay. Cấu trúc của chúng ta sẽ có dạng như sau:

Điểm xoay mặc định cho một phần tử nằm ở giữa nên chúng ta không cần điều chỉnh pivotX và pivotY của <Group>. Việc áp dụng <Transform> cho <Group> sẽ làm xoay <PartImage> xung quanh điểm xoay trung tâm đó.

Trong <Transform>, chúng ta sử dụng nguồn dữ liệu [ ACCELEROMETER_ANGLE_XY], đại diện cho tổng các góc theo hướng X và Y.

Thay thế  bằng đoạn mã sau:

<Group x="92" y="92" width="266" height="266" name="logo_container">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <Transform target="angle" mode="BY" value="0.1 * [ACCELEROMETER_ANGLE_XY]" />
  <PartImage x="97" y="0" width="72" height="72"
    tintColor="[CONFIGURATION.themeColor.2]">
    <Image resource="android"/>
  </PartImage>
</Group>

Triển khai lại mặt đồng hồ. Nếu bạn đang dùng một thiết bị thực, hãy đeo thiết bị đó và xoay cổ tay để xem biểu trưng Android di chuyển! Nếu bạn đang dùng trình mô phỏng, hãy mở các chế độ điều khiển mở rộng của trình mô phỏng và thao tác với các góc X và Y trong cảm biến ảo.

Cập nhật bản xem trước

Bạn còn nhớ ở đầu lớp học lập trình, chúng ta đã thấy có một tệp preview.png mà hệ thống dùng để hiển thị bản xem trước mặt đồng hồ không? Bây giờ, hãy cập nhật thông tin này để phản ánh rõ hơn mặt đồng hồ đã hoàn thiện!

Cách dễ nhất để tạo ảnh chụp màn hình là sử dụng trình mô phỏng. Khi mặt đồng hồ đang chạy, hãy nhấp vào nút chụp ảnh màn hình:

Đảm bảo rằng bạn đã đặt chế độ chụp thành Hình dạng hiển thị:

Lưu hình ảnh và thay thế tệp res/drawable/preview.png bằng hình ảnh mới này. Tạo lại và triển khai mặt đồng hồ như trước.

10. Xin chúc mừng

Xin chúc mừng! Bạn đã tìm hiểu các kiến thức cơ bản về cách tạo mặt đồng hồ bằng Định dạng mặt đồng hồ!

Giải pháp cho lớp học lập trình

Bạn có thể lấy đoạn mã cho giải pháp của lớp học lập trình này trên kho lưu trữ GitHub:

$ git clone https://github.com/android/codelab-watch-face-format