La funzione principale di un quadrante è mostrare l'ora e Watch Face Format consente di creare orologi sia analogici che digitali utilizzando gli elementi AnalogClock e DigitalClock.
Orologi digitali
Un orologio digitale di base può essere definito utilizzando gli elementi DigitalClock e
TimeText all'interno del quadrante 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>
L'attributo format ti consente di controllare la modalità di rappresentazione dell'ora utilizzando
una combinazione di ore, minuti e secondi. Le opzioni esatte variano a seconda della versione di Watch Face Format utilizzata. La versione 2 amplia le opzioni disponibili.
Nell'esempio precedente, Carattere è impostato per utilizzare il carattere di sistema.
Può essere utile anche mostrare l'ora di altre località nel mondo, ad esempio un orologio internazionale. Questo risultato può essere ottenuto tramite l'elemento Localization:
<DigitalClock x="100" y="100" width="200" height="50">
<Localization timeZone="Europe/London" />
...
</DigitalClock>
Orologi analogici
Per creare un orologio analogico, utilizza l'elemento AnalogClock. Ciascuno degli elementi secondari HourHand, MinuteHand e SecondHand specifica la risorsa da utilizzare nel rendering:
<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>
Specifica il punto di rotazione
Ogni risorsa di ora, minuto e secondo viene ruotata con il passare del tempo, ma è importante specificare il punto corretto attorno al quale ruotare ogni risorsa.
In alcuni casi, il punto di rotazione non si trova esattamente nella parte inferiore della mano, ma è centrato orizzontalmente. Deve essere specificato come <HourHand …
pivotY="(pivot_ratio)" />, dove:
Colorare le lancette
Per consentire all'utente di personalizzare l'aspetto del quadrante, è comune avere un colore configurabile per le lancette.
Un modo per farlo è utilizzare tintColor su ciascuna mano per colorare ciascuna mano separatamente oppure AnalogClock per colorare tutte le mani dello stesso colore.
Oltre a consentire agli utenti di colorare colori specifici, puoi fornire un'opzione di configurazione a tintColor per consentire all'utente di scegliere:
<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />
Ombra
Per un effetto realistico delle lancette dell'orologio, puoi utilizzare un'ombra dietro ogni lancetta per dare un'impressione di profondità. Per farlo, utilizza due mani di ogni tipo, una leggermente più indietro dell'altra, e fornisci una risorsa separata per l'ombra:
<!-- 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">
Decorazioni per il viso
I quadranti analogici sono spesso decorati intorno al quadrante con le ore o i minuti. Per farlo, puoi utilizzare due approcci:
Includi un'immagine di sfondo a schermo intero contenente il quadrante pre-disegnato. Scopri come utilizzare le immagini.
<PartImage x="0" y="0" width="450" height="450" ...> <Image resource="watch_face_dial" /> </PartImage>Disegna decorazioni separate e posizionale intorno al viso utilizzando le rotazioni.
<Group ... > <!-- Content for the "12" marker --> </Group> <Group pivotX="..." pivotY="..." angle="30"> <!-- Content for the "1" marker --> </Group>