Công việc chính của mặt đồng hồ là hiển thị thời gian và Đị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 Scene mặt đồng hồ:
<DigitalClock x="125" y="50" 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 thể hiện thời gian bằng cách kết hợp giờ, phút và giây. Các lựa 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 dùng; phiên bản 2 sẽ mở rộng các lựa chọn ở đây.
Trong ví dụ trước, Font được đặt để sử dụng phông chữ hệ thống.
Bạn cũng có thể dùng tiện ích này để hiển thị thời gian ở các địa điểm khác trên thế giới, chẳng hạn như đồ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="125" y="100" width="200" height="50"> <Localization timeZone="Europe/London" /> <!-- TimeText goes here --> <!-- START_EXCLUDE --> <TimeText x="0" y="0" width="200" height="50" format="hh:mm"> <Font family="SYNC_TO_DEVICE" size="16" /> </TimeText> <!-- END_EXCLUDE --> </DigitalClock>
Đồng hồ kim
Để tạo đồng hồ kim, hãy dùng phần tử AnalogClock. Mỗi phần tử con HourHand, MinuteHand và SecondHand chỉ định tài nguyên cần dùng trong quá trình kết xuất:
<AnalogClock x="0" y="0" width="450" height="450"> <HourHand resource="hour" x="220" y="55" width="20" height="190" pivotX="0.5" pivotY="0.9210" /> <MinuteHand resource="minute" x="222" y="30" width="16" height="220" pivotX="0.5" pivotY="0.9" /> <SecondHand resource="second" x="226" y="20" width="8" height="245" pivotX="0.5" pivotY="0.8571" /> </AnalogClock>
Chỉ định điểm xoay
Mỗi tài nguyên giờ, phút và giây đều được xoay khi thời gian trôi đi, nhưng điều quan trọng là bạn phải chỉ định đúng điểm mà mỗi tài nguyên sẽ xoay quanh.
Trong một số trường hợp, điểm xoay không nằm ở cuối bàn tay mà nằm ở giữa theo chiều ngang. Bạn phải chỉ định giá trị này là <HourHand …
pivotY="(pivot_ratio)" />, trong đó:
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ồ, bạn nên có màu có thể định cấu hình cho kim đồng hồ.
Một cách để đạt được điều này là thông qua tintColor trên mỗi bàn tay để tô màu riêng từng bàn tay hoặc trên AnalogClock để tô màu tất cả các bàn tay bằng cùng một màu.
Ngoài việc cho phép người dùng tô màu các màu cụ thể, bạn có thể cung cấp một lựa chọn cấu hình cho tintColor để cho phép người dùng chọn, ví dụ: thêm tintColor="[CONFIGURATION.handColors.0] vào phần tử AnalogClock.
Bóng đổ
Để có 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 có chiều sâu.
Để đạt được điều này, hãy sử dụng hai loại bàn tay trong một AnalogClock, bù một loại phía sau loại kia và sử dụng một tài nguyên riêng cho bàn tay đại diện cho bóng.
Trang trí khuôn mặt
Mặt đồng hồ kim thường có các hoạ tiết xung quanh mặt đồng hồ cho biết giờ hoặc phút. Để đạt được điều này, có hai cách tiếp cận:
Đưa hình nền toàn màn hình có chứa mặt đồng hồ được vẽ trước vào. Xem phần làm việc với hình ảnh.
<PartImage x="0" y="0" width="450" height="450"> <Image resource="watch_face_dial" /> </PartImage>
Vẽ các hình trang trí riêng biệt và đặt chúng xung quanh khuôn mặt bằng cách xoay.
<!-- Content for the "12" --> <Group x="200" y="0" width="50" height="450"> <PartText x="0" y="0" width="50" height="50"> <Text> <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF"> <![CDATA[12]]> </Font> </Text> </PartText> </Group> <!-- Content for the "1" --> <Group x="200" y="0" width="50" height="450" angle="30"> <PartText x="0" y="0" width="50" height="50"> <Text> <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF"> <![CDATA[1]]> </Font> </Text> </PartText> </Group> <!-- etc -->