Widżety to funkcja tarcz zegarków tradycyjnych i smartwatchów, która wyświetla dodatkowe informacje. Zwykle użytkownik wybiera, jakie informacje mają być wyświetlane w widżecie.
Widżety mają zwykle kilka kształtów:
- Prostokątny
- Okrągły
- Łuki wzdłuż krawędzi tarczy zegarka
- Tło zajmujące całą tarczę zegarka
Widżety w Wear OS można podzielić na 2 części:
- Źródło danych widżetu
- Renderowanie widżetu
Na przykład aplikacja do fitnessu i dbania o zdrowie może wdrożyć źródło danych widżetu Dziennej liczby kroków. Może to być renderowane przez format tarczy zegarka.
Źródła danych w widżetach
Źródła danych widżetów określają tylko dane do renderowania i typ widżetu. Źródło danych nie ma wpływu na sposób wyświetlania danych na tarczy zegarka.
Na przykład źródło danych widżetów Dzienny pomiar kroków dotyczących zdrowia i aktywności fizycznej może generować te dane, aby wskazać, że użytkownik wykonał dziś 2400 z 10 000 kroków:
- Typ:
GOAL_PROGRESS - Wartość:
2400 - Wartość docelowa:
10000
Zwróć uwagę, że w tych danych nie ma nic, co wskazywałoby, jak należy je renderować.
Tarcza zegarka określa, jakie typy widżetów może renderować. Określa to, które źródła danych są dostępne dla użytkownika.
W przypadku przykładu z dzienną liczbą kroków w definicji tarczy zegarka określasz, jak renderować symbole Value i TargetValue: jako tekst czy jako wskaźnik postępu. To Ty projektujesz tarczę zegarka, więc Ty wybierasz.
Definiowanie widżetów
Możliwość wyświetlania widżetów na tarczy zegarka może się przydać, ponieważ oferuje użytkownikom szybki dostęp do większej ilości potrzebnych informacji.
Zdecyduj, czy i ile widżetów ma być obsługiwanych na tarczy zegarka, jakie będą ich kształty i położenie oraz jakie typy danych będą obsługiwane.
Każde miejsce na tarczy zegarka, gdzie może pojawić się widżet, jest zdefiniowane jako ComplicationSlot z określonym obszarem ograniczającym jego renderowanie:
<ComplicationSlot slotId="1" supportedTypes="SHORT_TEXT SMALL_IMAGE EMPTY" x="100" y="100" width="100" height="100"> <BoundingOval x="0" y="0" width="100" height="100" /> <Complication type="SHORT_TEXT"> <!-- Complication content for rendering SHORT_TEXT data goes here --> </Complication> <Complication type="SMALL_IMAGE"> <!-- Complication content for rendering SMALL_IMAGE data goes here --> </Complication> </ComplicationSlot>
Podobne podejście można zastosować do innych kształtów ograniczających, takich jak prostokąt i elipsa.
Ustaw typ widżetu i wartości domyślne
System widżetów udostępnia wiele różnych typów, które pozwalają tarczy zegarka określić, jakie dane może wyświetlać na ekranie. Na przykład widżet Arc, jak pokazano wcześniej, nie pasuje do typu danych widżetu opartego na obrazach, jak np. SMALL_IMAGE, ale może dobrze działać w przypadku danych liczbowych, takich jak RANGED_VALUE.
W deklaracji ComplicationSlot ustaw supportedTypes na listę typów rozdzielonych spacjami, które mogą być renderowane w tym miejscu.
Musisz też ustawić domyślne źródło dla ComplicationSlot. Jeśli zezwolisz na typ EMPTY, ustawienie domyślnego źródła jest opcjonalne:
<ComplicationSlot slotId="2" supportedTypes="SHORT_TEXT SMALL_IMAGE EMPTY" x="250" y="100" width="100" height="100"> <DefaultProviderPolicy defaultSystemProvider="STEP_COUNT" defaultSystemProviderType="SHORT_TEXT" /> <!-- ... --> </ComplicationSlot>
Oprócz ustalania dostawców systemowych możesz opcjonalnie określić dostawców spoza systemu, np. dostawców zewnętrznych, których będziesz używać domyślnie, jeśli są już zainstalowani.
Renderowanie danych widżetu
Po zdefiniowaniu ComplicationSlot, granic i zawierającego elementu Complication użyj standardowych komponentów formatu tarczy zegarka, takich jak PartDraw, PartImage i PartText, aby wyświetlić dane widżetu.
Elementy w Complication mają dostęp do specjalnego źródła danych: COMPLICATION, które udostępnia różne właściwości danych ustawione przez źródło danych widżetu.
Na przykład widżet SMALL_IMAGE może ustawić wartości COMPLICATION.SMALL_IMAGE i COMPLICATION.SMALL_IMAGE_AMBIENT. Zamiast zasobu w elemencie Image możesz użyć tych elementów:
<Complication type="SMALL_IMAGE"> <PartImage x="0" y="0" width="100" height="100"> <Image resource="[COMPLICATION.SMALL_IMAGE]" /> </PartImage> </Complication>
Każdy typ widżetu ma inny zestaw dostępnych właściwości, które można ustawiać. Pełną listę znajdziesz w dokumentacji Complication.
Ten przykład przedstawia tekst z widżeta SHORT_TEXT:
<Complication type="SHORT_TEXT"> <PartText x="0" y="0" width="100" height="100"> <Text> <Font size="32"> <Template> <![CDATA[%s]]><Parameter expression="[COMPLICATION.TEXT]" /> </Template> </Font> </Text> </PartText> </Complication>
Maksymalizowanie przydatności podczas renderowania widżetów
Dodawanie ComplicationSlots do tarczy zegarka wiąże się z kilkoma wyzwaniami:
- Istnieje wiele typów danych widżetów. Różne aplikacje mogą udostępniać jedną lub wiele z tych funkcji.
- Każdy typ danych widżetu oprócz właściwości obowiązkowych ma też wiele właściwości opcjonalnych. Sprawdź, czy najbardziej przydatna wersja jest tworzona na podstawie dostępnych właściwości, z uwzględnieniem różnych kombinacji.
Aby rozwiązać te problemy, możesz zastosować następujące strategie:
- Obsługa wielu typów widżetów w przypadku każdego miejsca. Na przykład typ
SHORT_TEXTjest dość powszechnie obsługiwany przez źródła danych widżetów, więc obsługa wielu różnych typów, takich jakSHORT_TEXT RANGED_VALUEw przypadku małego okrągłego widżetu, zwiększa kompatybilność. - Oferowanie różnych typów widżetów na tarczy zegarka. Możesz na przykład obsługiwać
RANGED_VALUEiGOAL_PROGRESSw przypadku widżetów łukowych umieszczonych na krawędziach orazSHORT_TEXTiSMALL_IMAGEw przypadku widżetów okrągłych umieszczonych w głównej części tarczy zegarka. - Sprawdź, czy w przypadku każdego typu danych występują elementy opcjonalne. Na przykład
SHORT_TEXTopcjonalnie obsługuje właściwość tytułu i obraz. Układ renderowania dostępnych danych może się różnić w zależności od tego, czy obraz lub tytuł są dostępne.