Udostępnianie przydatnych danych za pomocą widżetów

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:

  1. Prostokątny
  2. Okrągły
  3. Łuki wzdłuż krawędzi tarczy zegarka
  4. Tło zajmujące całą tarczę zegarka

Widżety w Wear OS można podzielić na 2 części:

  1. Źródło danych widżetu
  2. 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:

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 ValueTargetValue: 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, PartImagePartText, 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_IMAGECOMPLICATION.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:

  1. Istnieje wiele typów danych widżetów. Różne aplikacje mogą udostępniać jedną lub wiele z tych funkcji.
  2. 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:

  1. Obsługa wielu typów widżetów w przypadku każdego miejsca. Na przykład typ SHORT_TEXT jest dość powszechnie obsługiwany przez źródła danych widżetów, więc obsługa wielu różnych typów, takich jak SHORT_TEXT RANGED_VALUE w przypadku małego okrągłego widżetu, zwiększa kompatybilność.
  2. Oferowanie różnych typów widżetów na tarczy zegarka. Możesz na przykład obsługiwać RANGED_VALUEGOAL_PROGRESS w przypadku widżetów łukowych umieszczonych na krawędziach oraz SHORT_TEXTSMALL_IMAGE w przypadku widżetów okrągłych umieszczonych w głównej części tarczy zegarka.
  3. Sprawdź, czy w przypadku każdego typu danych występują elementy opcjonalne. Na przykład SHORT_TEXT opcjonalnie 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.