Biểu thị thời gian

Nhiệm vụ chính của mặt đồng hồ là hiển thị thời gian. Định dạng mặt đồng hồ cho phép bạn tạo cả đồng hồ kim và đồng hồ kỹ thuật số bằng cách sử dụng các phần tử AnalogClock và DigitalClock.

Đồng hồ kỹ thuật số

Bạn có thể xác định đồng hồ kỹ thuật số cơ bản bằng cách sử dụng phần tử DigitalClock và TimeText trong mặt đồng hồ Scene:

<DigitalClock x="100" y="100" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
</DigitalClock>

Thuộc tính format cho phép bạn kiểm soát cách hiển thị thời gian bằng cách kết hợp giờ, phút và giây. Các tuỳ chọn chính xác sẽ khác nhau tuỳ thuộc vào phiên bản Định dạng mặt đồng hồ đang được sử dụng; phiên bản 2 mở rộng các tuỳ chọn tại đây.

Trong ví dụ trước, Font (Phông chữ) được đặt để sử dụng phông chữ hệ thống.

Bạn cũng có thể hiển thị thời gian ở các địa điểm khác trên thế giới, ví dụ: đồng hồ thế giới. Bạn có thể thực hiện việc này thông qua phần tử Localization:

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

Đồng hồ kim

Để tạo đồng hồ kim, hãy sử dụng phần tử AnalogClock. Mỗi phần tử con HourHand, MinuteHand và SecondHand chỉ định tài nguyên cần sử dụng trong quá trình kết xuất:

<AnalogClock x="0" y="0" width="200" height="200">
    <HourHand resource="hour_hand" ... />
    <MinuteHand resource="minute_hand" />
    <SecondHand resource="second_hand" />
    <!-- Optionally add a Tick or Sweep child element to define SecondHand behavior -->
</AnalogClock>

Chỉ định điểm xoay

Mỗi tài nguyên giờ, phút và giây được xoay khi thời gian trôi qua, nhưng điều quan trọng là phải chỉ định đúng điểm xoay cho mỗi tài nguyên.

Trong một số trường hợp, điểm xoay không hoàn toàn ở cuối kim đồng hồ và nằm ở giữa theo chiều ngang. Bạn nên chỉ định giá trị này là <HourHand … pivotY="(pivot_ratio)" />, trong đó:

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

Tô màu kim đồng hồ

Để cho phép người dùng tuỳ chỉnh giao diện của mặt đồng hồ, thông thường bạn nên có màu có thể định cấu hình cho kim đồng hồ.

Một cách để thực hiện việc này là thông qua tintColor trên mỗi kim đồng hồ để phủ màu riêng cho từng kim hoặc trên AnalogClock để phủ màu tất cả kim đồng hồ cùng một màu.

Ngoài việc cho phép người dùng phủ màu các màu cụ thể, bạn có thể cung cấp một tuỳ chọn cấu hình cho tintColor để cho phép người dùng chọn:

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

Bóng đổ

Để tạo hiệu ứng kim đồng hồ chân thực, bạn có thể sử dụng hiệu ứng đổ bóng phía sau mỗi kim để tạo cảm giác chiều sâu. Để đạt được điều này, hãy sử dụng hai loại kim đồng hồ, một kim ở phía sau kim còn lại, cung cấp một tài nguyên riêng cho bóng:

<!-- Offset the shadow by 5 units in both directions -->
<HourHand resource="hour_hand_shadow" ... x="105" y="105">
<!-- ... -->
<HourHand resource="hour_hand" ... x="100" y="100">

Trang trí khuôn mặt

Mặt đồng hồ kim thường có các chi tiết trang trí xung quanh mặt đồng hồ cho biết giờ hoặc phút. Để đạt được điều này, có hai phương pháp:

  1. Thêm hình nền toàn màn hình chứa mặt đồng hồ được vẽ sẵn. Xem cách làm việc với hình ảnh.

    <PartImage x="0" y="0" width="450" height="450" ...>
    <Image resource="watch_face_dial" />
</PartImage>

  2. Vẽ các phần trang trí riêng biệt và định vị chúng xung quanh mặt đồng hồ bằng cách xoay.

    <Group ... >
    <!-- Content for the "12" marker -->
</Group>
<Group pivotX="..." pivotY="..." angle="30">
    <!-- Content for the "1" marker -->
</Group>