Ta strona została przetłumaczona przez Cloud Translation API.

Optymalizowanie aplikacji pod kątem ChromeOS

Aplikacje na Androida odgrywają ważną rolę w przekształceniu wyglądu 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 na dostosowanie działania do laptopów i formatów konwertowalnych. Zapoznaj się ze szczegółową listą testów, aby dowiedzieć się więcej o testowaniu aplikacji pod kątem zgodności na tych urządzeniach.

Korzystanie z obsługi eksploracji wielu okien

Implementacja aplikacji na Androida w ChromeOS obejmuje podstawową obsługę trybu wielu okien. Zamiast zawsze zajmować cały ekran, Android renderuje aplikacje ChromeOS w kontenerach okiennych, które są lepiej dostosowane do takich urządzeń.

Użytkownicy mogą zmieniać rozmiar okna zawierającego aplikację na Androida, jak pokazano na ilustracji 1. Aby mieć pewność, że okna o swobodnej atmosferze będą płynnie zmieniać rozmiar i wyświetlać całą zawartość użytkownikowi, przeczytaj wskazówki w artykule o zarządzaniu oknami.

Rysunek 1. Okno aplikacji z możliwością zmiany rozmiaru.

Możesz poprawić komfort korzystania z aplikacji na ChromeOS, stosując się do tych sprawdzonych metod:

Prawidłowo postępuj z cyklem życia aktywności w trybie wielu okien i pamiętaj o aktualizowaniu interfejsu nawet wtedy, gdy aplikacja nie jest najbardziej aktywnym oknem.
Upewnij się, że aplikacja odpowiednio dostosowuje układ, gdy zmienia rozmiar okna.
Dostosuj początkowe wymiary okna aplikacji, określając rozmiar jej uruchomienia.
Pamiętaj, że orientacja głównej aktywności aplikacji wpływa na wszystkie jej okna.

Dostosuj kolor górnego paska

ChromeOS używa motywu aplikacji do pokolorowania górnego paska wyświetlanego u góry aplikacji, który jest widoczny, gdy użytkownik przytrzyma elementy sterujące okna i przycisk Wstecz. Aby aplikacja wyglądała dobrze i dostosowała ją do systemu ChromeOS, zdefiniuj wartości colorPrimary oraz, jeśli to możliwe, w motywie aplikacji colorPrimaryDark.

colorPrimaryDark służy do kolorowania górnego paska. Jeśli zdefiniowany jest tylko typ colorPrimary, ChromeOS użyje jego ciemniejszej wersji na górnym pasku. Więcej informacji znajdziesz w sekcji Style i motywy.

Obsługa klawiatury, trackpada i myszy

Wszystkie Chromebooki mają fizyczną klawiaturę i trackpada, a niektóre także ekran dotykowy. Niektóre urządzenia można przekształcić z laptopa w tablet.

Aplikacje na ChromeOS powinny obsługiwać wprowadzanie tekstu za pomocą myszy, trackpada i klawiatury, aby można było z nich korzystać bez ekranu dotykowego. Wiele aplikacji już obsługuje myszy i trackpada. Najlepiej jednak jest dostosować działanie aplikacji do myszy oraz obsługiwać i odróżniać wprowadzanie danych za pomocą myszy i dotyku.

Upewnij się, że:

Wszystkie cele można kliknąć za pomocą myszy.
Wszystkie obszary, które można przewijać dotykowo, przewijają się po zdarzeniach kółka myszy, jak pokazano na ilustracji 2.
Stany najechania kursorem są implementowane z rozwagą, aby poprawić wykrywalność interfejsu bez przytłoczenia użytkownika, jak widać na ilustracji 3.

Rysunek 2. Przewijanie za pomocą kółka myszy.

Rysunek 3. Stany przycisku po najechaniu kursorem.

W razie potrzeby wprowadź rozróżnienie między sterowaniem za pomocą myszy i dotyku. Na przykład dotknięcie i przytrzymanie elementu może aktywować interfejs umożliwiający wybieranie wielu elementów, a kliknięcie prawym przyciskiem myszy – menu opcji.

Kursy niestandardowe

Możesz dostosować kursory myszy w swojej aplikacji, aby wskazywać element interfejsu, z którym użytkownik może wchodzić w interakcje, i w jaki sposób. Możesz ustawić PointerIcon, który będzie używany, gdy użytkownicy będą korzystać z widoku, wywołując metodę setPointerIcon().

W aplikacjach pokaż wszystkie te elementy:

Wskaźniki I-beam dla tekstu
Zmień rozmiar uchwytów przy krawędziach warstw, których rozmiar można zmienić
Wskaźniki otwierania i zamykania treści, które można przesuwać lub przeciągać za pomocą gestu „kliknij i przeciągnij”
Wskaźniki postępu przetwarzania

Klasa PointerIcon zawiera stałe, których możesz używać do implementowania kursorów niestandardowych.

Każdy Chromebook ma fizyczną klawiaturę, więc wystarczy nacisnąć klawisze skrótów, aby użytkownicy mogli pracować bardziej wydajnie. Jeśli na przykład aplikacja obsługuje drukowanie, możesz użyć skrótu Control+P, aby otworzyć okno drukowania.

W ten sam sposób 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 i zgodne z ułatwieniami stanu skupienia, tak jak na tych ilustracji:

Rysunek 4. Klawisze Tab.

Rysunek 5. Zastąpienie gestu przesuwania elementem sterującym wyświetlanym po najechaniu kursorem.

Pamiętaj, aby wdrożyć alternatywne wersje klawiatury lub myszy w przypadku podstawowych funkcji, które są ukryte podczas interakcji z dotykiem, takich jak naciśnięcie i przytrzymanie, przesuwanie palcem lub inne gesty wielodotykowe. Przykładem może być dodanie przycisków, które pojawiają się na powierzchni po najechaniu na nią kursorem.

Więcej informacji o obsłudze klawiatury, trackpada i myszy znajdziesz w artykule o zgodności danych wejściowych na dużych ekranach.

Dalsze usprawnianie działań użytkowników

Aby Twoja aplikacja mogła korzystać z funkcji aplikacji na komputery, weź pod uwagę te dane wejściowe zwiększające produktywność.

Menu kontekstowe

Menu kontekstowe Androida, które przyspiesza korzystanie z różnych funkcji aplikacji, można uruchomić kliknięciem myszy lub dodatkowego 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 metodą „przeciągnij i upuść”, tak jak na ilustracji poniżej, może zapewnić wydajną i intuicyjną obsługę aplikacji. Więcej informacji znajdziesz w sekcji Przeciąganie i upuszczanie.

Rysunek 7. Przeciągnij i upuść interfejs drzewa plików.

Obsługa rysika

Obsługa rysika jest niezbędna w aplikacjach do rysowania i robienia notatek. Zwiększ możliwości Chromebooków i tabletów wyposażonych w rysik, implementując interakcje dostosowane do sposobu wprowadzania danych rysikiem.

Podczas projektowania interakcji z rysikiem weź pod uwagę możliwości różnych elementów sprzętowych. Omówienie interfejsów API stylu znajdziesz w artykule Zgodność urządzeń wejściowych na dużych ekranach.

Używaj układów elastycznych

Wykorzystaj miejsce dostępne na ekranie aplikacji niezależnie od jej stanu wizualnego (pełnoekranowy, pionowy, poziomy czy okno). Oto kilka przykładów prawidłowego wykorzystania miejsca:

Architektura aplikacji displayowej
Ogranicz długość tekstu i rozmiar obrazu do maksymalnej szerokości.
Lepiej wykorzystaj miejsce na pasku narzędzi aplikacji.
Popraw rozmieszczenie elementów interfejsu, dostosowując aplikację do użycia myszy zamiast kciuka.
Optymalizuj rozmiar filmów i obrazów, określ 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 zmień rozmiar i interfejs interfejsu za pomocą systemu kolumn. W miarę możliwości nie otwieraj nowych okien.
Usuń lub zmniejsz znaczenie komponentów przewijania w poziomie.
Unikaj pełnego ekranu modalnego interfejsu użytkownika. W przypadku wszystkich niekrytycznych działań używaj wbudowanego interfejsu użytkownika, takich jak wskaźniki postępu i alerty.
Korzystaj z udoskonalonych komponentów UI, takich jak selektory daty i godziny, pola tekstowe i menu dostosowane do myszy, klawiatury i większych ekranów.
Jeśli chcesz zmienić małą lub średnią funkcję edycji, zamiast nowej aktywności używaj zmian w tekście, dodatkowych kolumn lub interfejsu modalnego.
Usuń lub zmodyfikuj pływające przyciski poleceń (FAB), aby ułatwić nawigację za pomocą klawiatury. Domyślnie pozycje FAB są wyświetlane na końcu poprzecznego tabulatora. Zamiast tego postaw je jako pierwsze, ponieważ jest to działanie główne, lub zastąp je innym akredytacją wyższego poziomu.

Rysunek 8. Przykłady układu elastycznego na ekranie telefonu i komputera.

Przycisk Wstecz na poziomie systemowym to wzorzec przeniesiony z podstawowych wersji Androida – nie pasuje do kontekstu na komputerze.

Twoja aplikacja staje się coraz bardziej dostosowywana do środowiska laptopów, dlatego rozważ przejście na wzorzec nawigacyjny, który eliminuje nacisk na przycisk Wstecz. Pozwól aplikacji obsługiwać własny stos historii, dodając jako część interfejsu na dużym ekranie przyciski Wstecz, menu nawigacyjne lub inne opcje wyjścia, np. przyciski zamykania lub anulowania.

Możesz określić, czy aplikacja ma wyświetlać w oknie przycisk Wstecz, ustawiając odpowiednią opcję w tagu <activity>. Ustawienie true ukrywa przycisk Wstecz:

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

Rozwiązywanie problemów z obrazami z podglądu z aparatu

Problemy z aparatem mogą wystąpić, gdy aplikacja może działać tylko w orientacji pionowej, a użytkownik – na ekranie poziomym. W takim przypadku 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. Pomaga to uniknąć problemów, gdy kamera jest używana w niewłaściwej orientacji. Aby włączyć tryb zgodności, musisz spełnić te kryteria:

Kieruj na co najmniej Androida 7.0 (poziom API 24). Minimalny poziom pakietu SDK może być niższy.
Włącz możliwość zmiany rozmiaru aplikacji.

Zarządzanie ustawieniami urządzenia

Weź pod uwagę te ustawienia urządzenia w przypadku aplikacji działających w ChromeOS.

Zmień głośność

Urządzenia z ChromeOS to urządzenia ze stałą głośnością: aplikacje, które odtwarzają dźwięk, mają własną regulację głośności. Postępuj zgodnie z wytycznymi dotyczącymi pracy z urządzeniami o stałej głośności.