Tworzenie cyferblatu
W tym przewodniku wyjaśniono, jak zaimplementować niestandardową usługę rozpoznawania twarzy zegarka dla systemu Android Wear 1.0. Instrukcje krok po kroku są dostarczane do tworzenia usuniętej cyfrowej usługi rozpoznawania twarzy zegarka, a następnie więcej kodu, aby utworzyć analogową twarz zegarka.
Omówienie
W tym przewodniku zostanie utworzona podstawowa usługa rozpoznawania twarzy zegarka, aby zilustrować podstawy tworzenia niestandardowej twarzy zegarka Android Wear 1.0. Początkowa usługa rozpoznawania twarzy zegarka wyświetla prosty zegarek cyfrowy, który wyświetla bieżący czas w godzinach i minutach:
Po opracowaniu i przetestowaniu tej cyfrowej twarzy zegarka dodawany jest więcej kodu, aby uaktualnić go do bardziej wyrafinowanej twarzy zegarka analogowego z trzema rękami:
Usługi rozpoznawania twarzy zegarków są połączone i instalowane w ramach aplikacji Wear 1.0. W poniższych przykładach nie zawiera więcej niż kod z szablonu aplikacji Wear 1.0, MainActivity
dzięki czemu usługa rozpoznawania twarzy zegarka może być spakowana i wdrożona w inteligentnym zegarku w ramach aplikacji. W efekcie ta aplikacja będzie służyć wyłącznie jako pojazd do pobierania usługi rozpoznawania twarzy zegarka załadowanego do urządzenia Wear 1.0 (lub emulatora) na potrzeby debugowania i testowania.
Wymagania
Aby zaimplementować usługę rozpoznawania twarzy zegarka, wymagane są następujące elementy:
System Android 5.0 (poziom interfejsu API 21) lub nowszy na urządzeniu Wear lub emulatorze.
Biblioteki pomocy technicznej systemu Android platformy Xamarin dla systemu Android muszą zostać dodane do projektu platformy Xamarin.Android.
Chociaż system Android 5.0 jest minimalnym poziomem interfejsu API do implementowania usługi rozpoznawania twarzy zegarka, zalecany jest system Android 5.1 lub nowszy. Urządzenia z systemem Android Wear z systemem Android 5.1 (INTERFEJS API 22) lub nowszym umożliwiają aplikacjom Wear sterowanie tym, co jest wyświetlane na ekranie, gdy urządzenie jest w trybie otoczenia o niskiej mocy. Gdy urządzenie opuszcza tryb otoczenia o niskiej mocy, jest w trybie interaktywnym. Aby uzyskać więcej informacji na temat tych trybów, zobacz Utrzymywanie widoczności aplikacji.
Uruchamianie projektu aplikacji
Utwórz nowy projekt Android Wear 1.0 o nazwie WatchFace (aby uzyskać więcej informacji na temat tworzenia nowych projektów platformy Xamarin.Android, zobacz Hello, Android):
Ustaw nazwę pakietu na com.xamarin.watchface
:
Ponadto przewiń w dół i włącz uprawnienia INTERNETOWE i WAKE_LOCK :
Następnie pobierz preview.png — zostanie on dodany do folderu drawables w dalszej części tego przewodnika.
Dodawanie pakietu Xamarin.Android Wear
Uruchom Menedżer pakietów NuGet (w programie Visual Studio kliknij prawym przyciskiem myszy pozycję Odwołania w Eksplorator rozwiązań i wybierz polecenie Zarządzaj pakietami NuGet ...). Zaktualizuj projekt do najnowszej stabilnej wersji platformy Xamarin.Android.Wear:
Następnie, jeśli jest zainstalowany program Xamarin.Android.Support.v13 , odinstaluj go:
Skompiluj i uruchom aplikację na urządzeniu Wear lub emulatorze (aby uzyskać więcej informacji o tym, jak to zrobić, zobacz Przewodnik Wprowadzenie ). Na urządzeniu Wear powinien zostać wyświetlony następujący ekran aplikacji:
W tym momencie podstawowa aplikacja Wear nie ma funkcji rozpoznawania twarzy zegarka, ponieważ nie zapewnia jeszcze implementacji usługi rozpoznawania twarzy zegarka. Ta usługa zostanie dodana w następnej kolejności.
CanvasWatchFaceService
Android Wear implementuje twarze zegarków za pośrednictwem CanvasWatchFaceService
klasy. CanvasWatchFaceService
pochodzi z WatchFaceService
elementu , z którego pochodzi WallpaperService
sam element, jak pokazano na poniższym diagramie:
CanvasWatchFaceService
zawiera zagnieżdżone CanvasWatchFaceService.Engine
; tworzy wystąpienie CanvasWatchFaceService.Engine
obiektu, który wykonuje rzeczywistą pracę rysunku twarzy zegarka. CanvasWatchFaceService.Engine
jest pochodzi z WallpaperService.Engine
, jak pokazano na powyższym diagramie.
Nie pokazano na tym diagramie elementu Canvas
, który CanvasWatchFaceService
jest używany do rysowania twarzy zegarka — jest on Canvas
przekazywany za pośrednictwem OnDraw
metody, jak opisano poniżej.
W poniższych sekcjach zostanie utworzona niestandardowa usługa rozpoznawania twarzy zegarka, wykonując następujące kroki:
Zdefiniuj klasę o nazwie
MyWatchFaceService
, która pochodzi zCanvasWatchFaceService
klasy .W programie
MyWatchFaceService
utwórz zagnieżdżonych klasę o nazwieMyWatchFaceEngine
, która pochodzi z klasyCanvasWatchFaceService.Engine
.W
MyWatchFaceService
pliku zaimplementuj metodęCreateEngine
, która tworzy wystąpienieMyWatchFaceEngine
i zwraca ją.W
MyWatchFaceEngine
programie zaimplementuj metodęOnCreate
, aby utworzyć styl twarzy zegarka i wykonać inne zadania inicjowania.Zaimplementuj metodę
OnDraw
MyWatchFaceEngine
. Ta metoda jest wywoływana za każdym razem, gdy twarz zegarka musi zostać ponownie wyrysowana (tj. unieważniona).OnDraw
to metoda, która rysuje (i ponownie rysuje) elementy twarzy, takie jak godzina, minuta i drugie ręce.Zaimplementuj metodę
OnTimeTick
MyWatchFaceEngine
.OnTimeTick
jest wywoływany co najmniej raz na minutę (zarówno w trybach otoczenia, jak i interaktywnych) lub kiedy data/godzina uległa zmianie.
Aby uzyskać więcej informacji na temat CanvasWatchFaceService
programu , zobacz dokumentację interfejsu API CanvasWatchFaceService dla systemu Android.
Podobnie canvasWatchFaceService.Engine wyjaśnia rzeczywistą implementację twarzy zegarka.
Dodawanie elementu CanvasWatchFaceService
Dodaj nowy plik o nazwie MyWatchFaceService.cs (w programie Visual Studio kliknij prawym przyciskiem myszy pozycję WatchFace w Eksplorator rozwiązań, kliknij polecenie Dodaj > nowy element..., a następnie wybierz pozycję Klasa.
Zastąp zawartość tego pliku następującym kodem:
using System;
using Android.Views;
using Android.Support.Wearable.Watchface;
using Android.Service.Wallpaper;
using Android.Graphics;
namespace WatchFace
{
class MyWatchFaceService : CanvasWatchFaceService
{
public override WallpaperService.Engine OnCreateEngine()
{
return new MyWatchFaceEngine(this);
}
public class MyWatchFaceEngine : CanvasWatchFaceService.Engine
{
CanvasWatchFaceService owner;
public MyWatchFaceEngine (CanvasWatchFaceService owner) : base(owner)
{
this.owner = owner;
}
}
}
}
MyWatchFaceService
(pochodzi z CanvasWatchFaceService
) jest "głównym programem" twarzy zegarka. MyWatchFaceService
implementuje tylko jedną metodę , OnCreateEngine
która tworzy wystąpienie i zwraca MyWatchFaceEngine
obiekt (MyWatchFaceEngine
pochodzi z CanvasWatchFaceService.Engine
metody ). MyWatchFaceEngine
Wystąpienie obiektu musi zostać zwrócone jako WallpaperService.Engine
. Obiekt hermetyzujący MyWatchFaceService
jest przekazywany do konstruktora.
MyWatchFaceEngine
to rzeczywista implementacja twarzy zegarka — zawiera kod, który rysuje twarz zegarka. Obsługuje również zdarzenia systemowe, takie jak zmiany ekranu (tryby otoczenia/interakcyjne, wyłączanie ekranu itp.).
Implementowanie metody OnCreate aparatu
Metoda OnCreate
inicjuje twarz zegarka. Dodaj następujące pole do MyWatchFaceEngine
:
Paint hoursPaint;
Ten Paint
obiekt będzie używany do rysowania bieżącego czasu na twarzy zegarka. Następnie dodaj następującą metodę do MyWatchFaceEngine
:
public override void OnCreate(ISurfaceHolder holder)
{
base.OnCreate (holder);
SetWatchFaceStyle (new WatchFaceStyle.Builder(owner)
.SetCardPeekMode (WatchFaceStyle.PeekModeShort)
.SetBackgroundVisibility (WatchFaceStyle.BackgroundVisibilityInterruptive)
.SetShowSystemUiTime (false)
.Build ());
hoursPaint = new Paint();
hoursPaint.Color = Color.White;
hoursPaint.TextSize = 48f;
}
OnCreate
jest wywoływana wkrótce po MyWatchFaceEngine
uruchomieniu. Konfiguruje WatchFaceStyle
element (który kontroluje sposób interakcji urządzenia Wear z użytkownikiem) i tworzy wystąpienie Paint
obiektu, który będzie używany do wyświetlania czasu.
Wywołanie metody wykonuje SetWatchFaceStyle
następujące czynności:
Ustawia tryb podglądu na
PeekModeShort
wartość , co powoduje, że powiadomienia są wyświetlane jako małe karty "zaglądaj" na ekranie.Ustawia widoczność tła na
Interruptive
, co powoduje wyświetlanie tła karty podglądu tylko na krótko, jeśli reprezentuje powiadomienie przerywające.Wyłącza domyślny czas interfejsu użytkownika systemu narysowany na twarzy zegarka, dzięki czemu niestandardowa twarz zegarka może wyświetlać czas.
Aby uzyskać więcej informacji na temat tych i innych opcji stylu twarzy zegarka, zobacz dokumentację interfejsu API WatchFaceStyle.Builder dla systemu Android.
Po SetWatchFaceStyle
zakończeniu OnCreate
Paint
tworzy wystąpienie obiektu (hoursPaint
) i ustawia jego kolor na biały, a jego rozmiar tekstu na 48 pikseli (rozmiar tekstu musi być określony w pikselach).
Implementowanie metody OnDraw aparatu
Metoda OnDraw
jest być może najważniejszą CanvasWatchFaceService.Engine
metodą — jest to metoda, która faktycznie rysuje elementy twarzy zegarka, takie jak cyfry i dłonie zegara.
W poniższym przykładzie rysuje ciąg czasu na twarzy zegarka.
Dodaj następującą metodę do MyWatchFaceEngine
:
public override void OnDraw (Canvas canvas, Rect frame)
{
var str = DateTime.Now.ToString ("h:mm tt");
canvas.DrawText (str,
(float)(frame.Left + 70),
(float)(frame.Top + 80), hoursPaint);
}
Gdy system Android wywołuje OnDraw
metodę , przechodzi w wystąpieniu Canvas
i granicach, w których można narysować twarz. W powyższym przykładzie DateTime
kodu służy do obliczania bieżącego czasu w godzinach i minutach (w formacie 12-godzinnym). Wynikowy ciąg czasu jest rysowany na kanwie przy użyciu Canvas.DrawText
metody . Ciąg pojawi się 70 pikseli od lewej krawędzi i 80 pikseli w dół od górnej krawędzi.
Aby uzyskać więcej informacji na temat metody, zobacz dokumentację interfejsu OnDraw
API onDraw dla systemu Android.
Implementowanie metody OnTimeTick aparatu
System Android okresowo wywołuje metodę OnTimeTick
w celu zaktualizowania czasu wyświetlanego przez twarz zegarka. Jest on wywoływany co najmniej raz na minutę (zarówno w trybach otoczenia, jak i interaktywnych) lub gdy data/godzina lub strefa czasowa uległa zmianie. Dodaj następującą metodę do MyWatchFaceEngine
:
public override void OnTimeTick()
{
Invalidate();
}
Ta implementacja po prostu wywołuje metodę OnTimeTick
Invalidate
. Metoda Invalidate
planuje OnDraw
ponowne rysowanie twarzy zegarka.
Aby uzyskać więcej informacji na temat metody, zobacz dokumentację interfejsu OnTimeTick
API onTimeTick dla systemu Android.
Rejestrowanie aplikacji CanvasWatchFaceService
MyWatchFaceService
należy zarejestrować w AndroidManifest.xml skojarzonej aplikacji Wear. W tym celu dodaj następujący kod XML do <application>
sekcji:
<service
android:name="watchface.MyWatchFaceService"
android:label="Xamarin Sample"
android:allowEmbedded="true"
android:taskAffinity=""
android:permission="android.permission.BIND_WALLPAPER">
<meta-data
android:name="android.service.wallpaper"
android:resource="@xml/watch_face" />
<meta-data
android:name="com.google.android.wearable.watchface.preview"
android:resource="@drawable/preview" />
<intent-filter>
<action android:name="android.service.wallpaper.WallpaperService" />
<category android:name="com.google.android.wearable.watchface.category.WATCH_FACE" />
</intent-filter>
</service>
Ten kod XML wykonuje następujące czynności:
android.permission.BIND_WALLPAPER
Ustawia uprawnienie. To uprawnienie daje usłudze rozpoznawania twarzy zegarka uprawnienie do zmiany tapety systemowej na urządzeniu. Należy pamiętać, że to uprawnienie musi być ustawione w<service>
sekcji, a nie w sekcji zewnętrznej<application>
.watch_face
Definiuje zasób. Ten zasób jest krótkim plikiem XML, który deklarujewallpaper
zasób (ten plik zostanie utworzony w następnej sekcji).Deklaruje obraz z możliwością rysowania o nazwie
preview
, który będzie wyświetlany przez ekran wyboru selektora zegarka.Zawiera element
intent-filter
, aby poinformować system Android, żeMyWatchFaceService
będzie wyświetlać twarz zegarka.
To kończy kod dla podstawowego WatchFace
przykładu. Następnym krokiem jest dodanie niezbędnych zasobów.
Dodawanie plików zasobów
Przed uruchomieniem usługi watch service należy dodać zasób watch_face i obraz podglądu. Najpierw utwórz nowy plik XML w folderze Resources/xml/watch_face.xml i zastąp jego zawartość następującym kodem XML:
<?xml version="1.0" encoding="UTF-8"?>
<wallpaper xmlns:android="http://schemas.android.com/apk/res/android" />
Ustaw akcję kompilacji tego pliku na AndroidResource:
Ten plik zasobów definiuje prosty wallpaper
element, który będzie używany dla twarzy zegarka.
Jeśli jeszcze tego nie zrobiono, pobierz preview.png.
Zainstaluj ją na stronie Resources/drawable/preview.png. Pamiętaj, aby dodać ten plik do WatchFace
projektu. Ten obraz podglądu jest wyświetlany użytkownikowi w selektorze twarzy zegarka na urządzeniu Wear. Aby utworzyć obraz podglądu dla własnej twarzy zegarka, możesz wykonać zrzut ekranu przedstawiający twarz zegarka podczas jego działania. (Aby uzyskać więcej informacji na temat pobierania zrzutów ekranu z urządzeń Wear, zobacz Wykonywanie zrzutów ekranu).
Wypróbuj!
Skompiluj i wdróż aplikację na urządzeniu Wear. Powinien zostać wyświetlony ekran aplikacji Wear, tak jak poprzednio. Wykonaj następujące czynności, aby włączyć nową twarz zegarka:
Przesuń palcem w prawo, aż zobaczysz tło ekranu zegarka.
Naciśnij i przytrzymaj w dowolnym miejscu na tle ekranu przez dwie sekundy.
Szybko przesuń palcem od lewej do prawej, aby przeglądać różne twarze zegarka.
Wybierz twarz zegarka Xamarin Sample (pokazana po prawej stronie):
Naciśnij twarz zegarka Xamarin Sample , aby go wybrać.
Spowoduje to zmianę twarzy zegarka urządzenia Wear w celu korzystania z niestandardowej usługi rozpoznawania twarzy zegarka zaimplementowanej do tej pory:
Jest to stosunkowo surowa twarz zegarka, ponieważ implementacja aplikacji jest tak minimalna (na przykład nie zawiera tła twarzy zegarka i nie wywołuje Paint
metod anty aliasu w celu poprawy wyglądu).
Jednak implementuje ona nagie funkcje kości, które są wymagane do utworzenia niestandardowej twarzy zegarka.
W następnej sekcji ta twarz zegarka zostanie uaktualniona do bardziej wyrafinowanej implementacji.
Uaktualnianie twarzy zegarka
W pozostałej części tego przewodnika zostanie uaktualniony, MyWatchFaceService
aby wyświetlić analogową twarz zegarka w stylu analogowym i został rozszerzony w celu obsługi większej liczby funkcji. W celu utworzenia uaktualnionej twarzy zegarka zostaną dodane następujące możliwości:
Wskazuje czas z analogiczną godziną, minutą i drugą ręką.
Reaguje na zmiany widoczności.
Reaguje na zmiany między trybem otoczenia a trybem interaktywnym.
Odczytuje właściwości bazowego urządzenia Wear.
Automatycznie aktualizuje czas zmiany strefy czasowej.
Przed zaimplementowaniem poniższych zmian w kodzie pobierz drawable.zip, rozpakuj go i przenieś rozpakowane pliki .png do zasobów/rysowania (zastąp poprzednią preview.png). Dodaj nowe pliki .png do WatchFace
projektu.
Funkcje aparatu aktualizacji
Następnym krokiem jest uaktualnienie MyWatchFaceService.cs do implementacji, która rysuje analogową twarz zegarka i obsługuje nowe funkcje. Zastąp zawartość MyWatchFaceService.cs analogiczną wersją kodu twarzy zegarka w MyWatchFaceService.cs (możesz wyciąć i wkleić to źródło do istniejącego MyWatchFaceService.cs).
Ta wersja MyWatchFaceService.cs dodaje więcej kodu do istniejących metod i zawiera dodatkowe metody zastąpienia, aby dodać więcej funkcji. Poniższe sekcje zawierają przewodnik po kodzie źródłowym.
Oncreate
Zaktualizowana metoda OnCreate konfiguruje styl twarzy zegarka tak jak poprzednio, ale obejmuje kilka dodatkowych kroków:
Ustawia obraz tła na zasób xamarin_background , który znajduje się w obszarze Resources/drawable-hdpi/xamarin_background.png.
Inicjuje
Paint
obiekty do rysowania ręki godziny, minuty i drugiej ręki.Inicjuje
Paint
obiekt do rysowania godzinowych znaczników wokół krawędzi twarzy zegarka.Tworzy czasomierz, który wywołuje
Invalidate
metodę (redraw), tak aby druga ręka zostanie ponownie narysowana co sekundę. Należy pamiętać, że ten czasomierz jest niezbędny, ponieważOnTimeTick
wywołujeInvalidate
tylko raz na minutę.
Ten przykład zawiera tylko jeden obraz xamarin_background.png , jednak możesz utworzyć inny obraz tła dla każdej gęstości ekranu, który będzie obsługiwał niestandardowa twarz zegarka.
Ondraw
Zaktualizowana metoda OnDraw rysuje analogową twarz zegarka, wykonując następujące kroki:
Pobiera bieżący czas, który jest teraz utrzymywany w
time
obiekcie.Określa granice powierzchni rysunkowej i jej środka.
Rysuje tło, skalowane w celu dopasowania urządzenia, gdy tło jest rysowane.
Rysuje dwanaście kleszczy wokół twarzy zegara (odpowiadające godzinom w twarzy zegara).
Oblicza kąt, obrót i długość każdej ręki zegarka.
Rysuje każdą rękę na powierzchni zegarka. Należy pamiętać, że druga ręka nie jest rysowana, jeśli zegarek jest w trybie otoczenia.
OnPropertiesChanged
Ta metoda jest wywoływana w celu poinformowania MyWatchFaceEngine
o właściwościach urządzenia Wear (np. w trybie otoczenia o niskiej wartości bitowej i ochronie przed zużyciem). W MyWatchFaceEngine
systemie ta metoda sprawdza tylko tryb otoczenia o niskiej bitzie (w trybie otoczenia niskiego bitu ekran obsługuje mniej bitów dla każdego koloru).
Aby uzyskać więcej informacji na temat tej metody, zobacz dokumentację interfejsu API w systemie Android onPropertiesChanged .
OnAmbientModeChanged
Ta metoda jest wywoływana, gdy urządzenie Wear wchodzi w tryb otoczenia lub wychodzi z niego. W implementacji MyWatchFaceEngine
tarcza zegarka wyłącza aliasy, gdy jest w trybie otoczenia.
Aby uzyskać więcej informacji na temat tej metody, zobacz dokumentację interfejsu API onAmbientModeChanged dla systemu Android.
OnVisibilityChanged
Ta metoda jest wywoływana za każdym razem, gdy zegarek stanie się widoczny lub ukryty. W MyWatchFaceEngine
systemie ta metoda rejestruje/wyrejestrowuje odbiornik strefy czasowej (opisany poniżej) zgodnie ze stanem widoczności.
Aby uzyskać więcej informacji na temat tej metody, zobacz dokumentację interfejsu API onVisibilityChanged dla systemu Android.
Funkcja strefy czasowej
Nowa MyWatchFaceService.cs zawiera również funkcje aktualizacji bieżącej godziny za każdym razem, gdy strefa czasowa ulegnie zmianie (na przykład podczas podróży między strefami czasowymi). Pod koniec MyWatchFaceService.cs zdefiniowano zmianę BroadcastReceiver
strefy czasowej, która obsługuje obiekty intencji zmienionej strefą czasową:
public class TimeZoneReceiver: BroadcastReceiver
{
public Action<Intent> Receive { get; set; }
public override void OnReceive (Context context, Intent intent)
{
if (Receive != null)
Receive (intent);
}
}
Metody RegisterTimezoneReceiver
i UnregisterTimezoneReceiver
są wywoływane przez metodę OnVisibilityChanged
.
UnregisterTimezoneReceiver
jest wywoływany, gdy stan widoczności twarzy zegarka zostanie zmieniony na ukryty. Gdy twarz zegarka jest ponownie widoczna, RegisterTimezoneReceiver
jest wywoływana (zobacz metodę OnVisibilityChanged
).
Metoda aparatu RegisterTimezoneReceiver
deklaruje program obsługi dla tego zdarzenia odbiorcy Receive
strefy czasowej; ta procedura obsługi aktualizuje time
obiekt o nowy czas za każdym razem, gdy strefa czasowa jest przekraczana:
timeZoneReceiver = new TimeZoneReceiver ();
timeZoneReceiver.Receive = (intent) => {
time.Clear (intent.GetStringExtra ("time-zone"));
time.SetToNow ();
};
Filtr intencji jest tworzony i rejestrowany dla odbiornika strefy czasowej:
IntentFilter filter = new IntentFilter(Intent.ActionTimezoneChanged);
Application.Context.RegisterReceiver (timeZoneReceiver, filter);
Metoda UnregisterTimezoneReceiver
wyrejestrowuje odbiornik strefy czasowej:
Application.Context.UnregisterReceiver (timeZoneReceiver);
Uruchamianie ulepszonej twarzy zegarka
Ponownie skompiluj i wdróż aplikację na urządzeniu Wear. Wybierz twarz zegarka z selektora twarzy zegarka tak jak poprzednio. Podgląd w selektorze zegarka jest wyświetlany po lewej stronie, a nowa twarz zegarka jest wyświetlana po prawej stronie:
Na tym zrzucie ekranu druga ręka jest przenoszona raz na sekundę. Po uruchomieniu tego kodu na urządzeniu Wear druga ręka zniknie, gdy zegarek wejdzie w tryb otoczenia.
Podsumowanie
W tym przewodniku zaimplementowano i przetestowano niestandardowy watchface android Wear 1.0. Wprowadzono CanvasWatchFaceService
klasy i CanvasWatchFaceService.Engine
, a podstawowe metody klasy aparatu zostały zaimplementowane w celu utworzenia prostej cyfrowej twarzy zegarka. Ta implementacja została zaktualizowana o więcej funkcji, aby utworzyć analogową twarz zegarka, a dodatkowe metody zostały zaimplementowane w celu obsługi zmian widoczności, trybu otoczenia i różnic we właściwościach urządzenia. Na koniec zaimplementowano odbiornik emisji strefy czasowej, aby zegarek automatycznie aktualizował czas, kiedy strefa czasowa jest przekraczana.