Aplikacje na Androida mają do odegrania ważną rolę w zmianie sposobu wyświetlania nowoczesnych komputerów na dużych ekranach. Jednak samo uruchomienie aplikacji mobilnej na Chromebooku nie zapewnia użytkownikom najlepszych wrażeń.
Na tej stronie opisujemy kilka sposobów dostosowania interfejsu do laptopów i formatów konwertowalnych. Zapoznaj się z pełną listą testów, aby dowiedzieć się więcej o testowaniu zgodności aplikacji na tych urządzeniach.
Wykorzystaj obsługę swobodnego wyświetlania w wielu oknach
Implementacja aplikacji na Androida w ChromeOS obejmuje podstawową obsługę trybu wielu okien. Zamiast zawsze wyświetlać pełny ekran, Android renderuje aplikacje z ChromeOS w nieregularnych oknach, co jest bardziej odpowiednie w przypadku takich urządzeń.
Użytkownicy mogą zmieniać rozmiar okna zawierającego aplikację na Androida, jak pokazano na ilustracji 1. Aby mieć pewność, że okna swobodne będą płynnie zmieniać rozmiar i wyświetlać całą zawartość użytkownikowi, przeczytaj wskazówki w artykule Zarządzanie oknami.
Rysunek 1. Okno aplikacji z możliwością zmiany rozmiaru
Aby zwiększyć wygodę użytkowników, gdy Twoja aplikacja działa w ChromeOS, postępuj zgodnie z tymi sprawdzonymi metodami:
- Obsługuj prawidłowo cykl życia działania w trybie wielu okien i pamiętaj, aby nadal aktualizować interfejs, nawet wtedy, gdy Twoja aplikacja nie jest najbardziej aktywnym oknem.
- Upewnij się, że aplikacja odpowiednio dostosowuje układ za każdym razem, gdy użytkownik zmienia rozmiar okna.
- Dostosuj początkowe wymiary okna aplikacji, określając rozmiar po uruchomieniu.
- Pamiętaj, że orientacja działania głównego katalogu aplikacji wpływa na wszystkie jej okna.
Dostosuj kolor górnego paska
ChromeOS używa motywu aplikacji, aby kolorować górny pasek wyświetlany u góry aplikacji, który wyświetla się, gdy użytkownik przytrzymuje elementy sterujące okna i przycisk Wstecz. Aby aplikacja wyglądała na dopracowaną i dostosowaną do potrzeb ChromeOS, zdefiniuj wartości colorPrimary, a w miarę możliwości określ wartości colorPrimaryDark w motywie aplikacji.
colorPrimaryDark służy do kolorowania górnego paska. Jeśli definiowana jest tylko wartość colorPrimary, ChromeOS używa jej ciemniejszej wersji na górnym pasku. Więcej informacji znajdziesz w artykule Style i motywy.
Obsługa klawiatury, trackpada i myszy
Wszystkie Chromebooki mają klawiaturę fizyczną i trackpada, a niektóre także ekran dotykowy. Niektóre urządzenia można konwertować z laptopa na tablet.
Aplikacje na ChromeOS obsługują wprowadzanie danych za pomocą myszy, trackpada i klawiatury, dzięki czemu można z nich korzystać bez ekranu dotykowego. Wiele aplikacji obsługuje już mysz i trackpada, więc nie musisz wykonywać żadnych dodatkowych czynności. Warto jednak dostosować działanie aplikacji do myszy i rozróżnić dane wejściowe za pomocą myszy i dotyku.
Upewnij się, że:
- Wszystkie elementy docelowe można kliknąć za pomocą myszy.
- Wszystkie dotykowe powierzchnie, które można przewijać, przewijają się po zdarzeniach kółkiem myszy, jak pokazano na ilustracji 2.
- Stany po najechaniu są wdrażane ze szczególną ostrożnością, aby usprawnić wykrywanie UI bez przytłoczenia użytkownika, jak pokazano na rysunku 3.
Rysunek 2. Przewijanie za pomocą kółka myszy.
Rysunek 3. Stany po najechaniu kursorem.
W razie potrzeby możesz rozróżnić dane wejściowe za pomocą myszy i dotyku. Na przykład kliknięcie i przytrzymanie elementu może wywołać interfejs wielokrotnego wyboru, a kliknięcie prawym przyciskiem myszy tego elementu może wywołać menu opcji.
Kursy niestandardowe
Dostosuj kursory myszy w swoich aplikacjach, by wskazać, z którym elementem interfejsu użytkownika i w jaki sposób może on wchodzić w interakcje. Możesz skonfigurować PointerIcon tak, aby był używany, gdy użytkownicy wchodzą w interakcję z widokiem, wywołując metodę setPointerIcon().
W aplikacjach musisz pokazać wszystkie te elementy:
- Wskaźniki I-beam tekstu
- Zmieniaj rozmiar uchwytów przy krawędziach warstw z możliwością zmiany rozmiaru
- Wskaźniki otwierających i zamkniętych dłoni dla treści, które można przesuwać i przeciągać gestem „kliknij i przeciągnij”
- Wskaźniki postępu przetwarzania
Klasa PointerIcon zawiera stałe, których możesz używać do implementowania niestandardowych kursorów.
Skróty klawiszowe i nawigacja
Każdy Chromebook ma klawiaturę fizyczną, więc zapewniaj klawisze skrótów, aby użytkownicy mogli pracować wydajniej. Jeśli na przykład aplikacja obsługuje drukowanie, możesz nacisnąć Ctrl + P, aby otworzyć okno drukowania.
Podobnie obsługujesz wszystkie ważne elementy interfejsu, korzystając z nawigacji po kartach. Jest to szczególnie ważne w przypadku ułatwień dostępu. Aby spełnić standardy dotyczące ułatwień dostępu, wszystkie platformy UI muszą mieć oczywiste, zgodne z ułatwieniami dostępu stany skupienia, jak pokazano na tych ilustracjach:
Rysunek 4. Tabulowanie poprzeczne.
Rysunek 5. Zastąpienie gestu przesuwania elementem sterującym wyświetlanym po najechaniu kursorem.
Pamiętaj, aby wdrożyć alternatywy dla klawiatury lub myszy w przypadku głównych funkcji ukrytych w działaniach wymagających dotknięcia, np. naciśnięcia i przytrzymania, przesuwania lub innych gestów wielodotykowych. Przykładowym rozwiązaniem jest udostępnienie przycisków, które pojawiają się na powierzchni po najechaniu kursorem.
Więcej informacji o obsłudze klawiatury, trackpada i myszy znajdziesz w artykule o zgodności urządzeń wejściowych na dużych ekranach.
Zwiększanie możliwości wprowadzania danych przez użytkowników
Aby Twoja aplikacja miała funkcje typowe dla komputerów, weź pod uwagę poniższe dane wejściowe skoncentrowane na produktywności.
Menu kontekstowe
Menu kontekstowe Androida, które są kolejnym akceleratorem kierującym użytkowników do funkcji aplikacji, mogą się uruchamiać po kliknięciu myszy lub drugim przycisku na trackpadzie albo przez naciśnięcie i przytrzymanie ekranu dotykowego:
Rysunek 6. Menu kontekstowe wyświetlane po kliknięciu prawym przyciskiem myszy
Przeciągnij i upuść
Tworzenie interakcji z przeciąganiem i upuszczaniem, jak ta na ilustracji poniżej, może wprowadzić w Twojej aplikacji efektywne, intuicyjne funkcje zwiększające produktywność. Więcej informacji znajdziesz w sekcji Przeciąganie i upuszczanie.
Rysunek 7. Przeciągnij i upuść interfejs w postaci drzewa plików.
Obsługa rysika
Obsługa rysika jest niezbędna w aplikacjach do rysowania i robienia notatek. Ulepszaj obsługę Chromebooków i tabletów wyposażonych w rysik przez wdrożenie interakcji dostosowanych do obsługi rysika.
Planując obsługę rysika, weź pod uwagę potencjalne różnice w jego działaniu. Omówienie interfejsów API stylów znajdziesz w artykule Zgodność danych wejściowych na dużych ekranach.
Konfigurowanie układów elastycznych
Wykorzystaj potencjał ekranu aplikacji niezależnie od jej stanu wizualnego (pełny ekran, pionowa, pozioma lub w oknie). Oto kilka przykładów prawidłowego wykorzystania miejsca:
- Wyświetl architekturę aplikacji.
- Ogranicz długość tekstu i rozmiar obrazu do maksymalnej szerokości.
- Lepiej wykorzystaj miejsce nieruchomości na pasku narzędzi aplikacji.
- Popraw rozmieszczenie afordancji interfejsu, dostosowując aplikację do używania myszy, a nie kciuka.
- Zoptymalizuj rozmiar filmów i obrazów, ustal maksymalną szerokość i wysokość wszystkich multimediów oraz zmaksymalizuj czytelność i czytelność.
- Zaimplementuj elastyczny system kolumn. Więcej informacji znajdziesz w artykule Siatka układu elastycznego.
- W razie potrzeby zmieniaj rozmiar i zmodyfikuj interfejs za pomocą systemu kolumn. W miarę możliwości nie otwieraj nowych okien.
- Usuń komponenty przewijania w poziomie lub zmniejsz ich znaczenie.
- Unikaj pełnoekranowego interfejsu modalnego. Do wykonywania wszystkich niekrytycznych działań używaj wbudowanego interfejsu, takiego jak wskaźniki postępu i alerty.
- Korzystaj z ulepszonych komponentów interfejsu, takich jak selektory daty i godziny, pola tekstowe oraz menu, które są zaprojektowane pod kątem myszy, klawiatury i większych ekranów.
- W przypadku małych i średnich funkcji edycji zamiast nowej aktywności używaj edycji wbudowanych, dodatkowych kolumn lub interfejsu modalnego.
- Usuń lub zmień pływające przyciski poleceń, aby usprawnić nawigację za pomocą klawiatury. Domyślnie przyciski PPP są ostatnie w poprzecznej kolejności tabulacji. Ustaw ją jako pierwsze, ponieważ jest to działanie główne, lub zastąp je afordancją wyższego poziomu.
Rysunek 8. Przykłady układu elastycznego na telefonie i komputerze.
Zmień wzorce nawigacji
Przycisk Wstecz na poziomie systemu to wzór wywodzący się z wersji na Androida, który nie pasuje do komputerów.
W miarę jak Twoja aplikacja jest coraz bardziej dostosowywana do środowiska laptopa, rozważ przejście na wzorzec nawigacji, który nie skupia się na przycisku Wstecz. Pozwól aplikacji obsługiwać własny stos historii, dodając w dużym interfejsie przyciski Wstecz, menu nawigacyjne lub inne opcje wyjścia, takie jak przyciski zamykania lub anulowania.
Możesz określić, czy aplikacja ma wyświetlać w oknie przycisk Wstecz, ustawiając preferencje w tagu <activity>. Ustawienie true ukrywa przycisk Wstecz:
<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />
Rozwiązywanie problemów ze zdjęciami podglądu z aparatu
Problemy z aparatem mogą wystąpić, gdy aplikacja działa tylko w orientacji pionowej, a użytkownik uruchamia ją na ekranie poziomym. W takiej sytuacji podgląd lub zarejestrowany wynik mogą być nieprawidłowo obrócone.
Tryb zgodności zmienia sposób, w jaki system obsługuje zdarzenia, takie jak zmiana orientacji, w ChromeOS. Zapobiega to problemom, gdy kamera jest używana w niewłaściwej orientacji. Aby włączyć tryb zgodności, musisz spełniać te kryteria:
- Docelowa wersja Androida musi wynosić co najmniej 7.0 (poziom interfejsu API 24). Minimalny poziom pakietu SDK może być niższy.
- Włącz możliwość zmiany rozmiaru aplikacji.
Obsługa ustawień urządzenia
Rozważ poniższe ustawienia urządzeń w przypadku aplikacji działających w ChromeOS.
Zmień głośność
Urządzenia z ChromeOS to urządzenia o stałej głośności: aplikacje, które odtwarzają dźwięk, mają własne elementy sterujące głośnością. Postępuj zgodnie z wytycznymi dotyczącymi korzystania z urządzeń o stałej głośności.
Zmienianie jasności ekranu
Nie można dostosować jasności urządzenia w ChromeOS. Wywołania system settings i WindowManager.LayoutParams są ignorowane.
Dodatkowe materiały szkoleniowe
Aby dowiedzieć się więcej o optymalizowaniu aplikacji na Androida pod kątem Chromebooków, zapoznaj się z tymi materiałami:
- Przeczytaj posta na temat wdrażania aplikacji na Androida na Chromebooki na blogu dla deweloperów aplikacji na Androida.
- Obejrzyj sesję Google I/O 2017 dotyczącą aplikacji na Androida na Chromebooki i urządzenia z dużym ekranem.