Optymalizowanie aplikacji pod kątem ChromeOS

Aplikacje na Androida odgrywają ważną rolę w zmienianiu tego, jak wygląda nowoczesne komputery na dużych ekranach. Samo uruchomienie aplikacji mobilnej na Chromebooku i zapewniają użytkownikom najlepsze wrażenia.

Na tej stronie opisujemy kilka sposobów dostosowywania usług laptopy i urządzenia konwertowalne. Zapoznaj się z naszą szczegółową listę testów, by dowiedzieć się więcej o testowaniu aplikacji pod kątem na tych urządzeniach.

Wykorzystaj obsługę swobodnego wyświetlania w wielu oknach

Implementacja aplikacji na Androida w ChromeOS obejmuje podstawową obsługę wielu okien . Zamiast zawsze zajmować pełny ekran, Android renderuje aplikacji w ChromeOS w nieregularne okna, 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 swobodne okna będą płynnie zmieniać rozmiar i wyświetlać się zapoznaj się ze wskazówkami 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 wskazówkami metody:

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 oknem i przycisk Wstecz. Aby zrobić wygląd aplikacji dopracowany i dostosowany do systemu ChromeOS, określ colorPrimary oraz, jeśli to możliwe, colorPrimaryDark w motywie aplikacji.

colorPrimaryDark służy do kolorowania górnego paska. Jeśli tylko Zdefiniowano colorPrimary, ChromeOS używa 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. Niektóre mają ekranu dotykowego. Niektóre urządzenia można konwertować z laptopa na tablet.

W aplikacjach na ChromeOS możesz wprowadzać dane za pomocą myszy, trackpada i klawiatury. dzięki czemu można z niej korzystać bez ekranu dotykowego. Wiele aplikacji obsługuje już mysz bez dodatkowych działań z poziomu trackpada. Lepiej jednak dostosować prawidłowe zachowanie myszy oraz obsługa i rozróżnienie między za pomocą myszy i dotyku.

Upewnij się, że:

  • Wszystkie elementy docelowe można kliknąć za pomocą myszy.
  • Wszystkie dotykowe platformy przewijane przewijają się po zdarzeniach kółkiem myszy, tak jak w rys. 2.
  • Stany po najechaniu są wdrażane ze szczególną ostrożnością, aby ulepszać odkrywanie interfejsu bez przytłoczenia użytkownika, jak pokazano na ilustracji 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. Dla: przykład, dotknij & naciśnięcie elementu może wywołać interfejs wielokrotnego wyboru, kliknięcie tego samego elementu prawym przyciskiem myszy może zamiast tego wywołać menu opcji.

Kursy niestandardowe

Dostosuj kursora myszy w celu wskazania, który element interfejsu użytkownika i jak mogą wchodzić w interakcje. Możesz skonfigurować PointerIcon tak, aby używał 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 otwartej i zamkniętej treści, którą można przesuwać lub przeciągać gestu kliknięcia i przeciągnięcia
  • Wskaźniki postępu przetwarzania

Klasa PointerIcon zawiera stałe, które pozwalają których można użyć do zaimplementowania niestandardowych kursorów.

Skróty klawiszowe i nawigacja

Każdy Chromebook ma klawiaturę fizyczną, dlatego naciskaj klawisze skrótów, aby i zwiększyć produktywność użytkowników. Jeśli na przykład aplikacja obsługuje Aby otworzyć okno drukowania, naciśnij Control + P.

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 i zgodne z ułatwieniami dostępu jak 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 funkcje ukryte w ramach interakcji dotykowych, takich jak dotyk działania związane z zatrzymywaniem, przesunięciach palcem i innych gestów wielodotykowych. Przykładowym rozwiązaniem jest podanie które pojawiają się na powierzchni po najechaniu na nią kursorem.

Więcej informacji o obsłudze klawiatury, trackpada i myszy znajdziesz na stronie Zgodność wejścia na dużych ekranach.

Zwiększanie możliwości wprowadzania danych przez użytkowników

Aby korzystać z funkcji wersji komputerowej w aplikacji, weź pod uwagę te kwestie: produktywnościowe.

Menu kontekstowe

menu kontekstowych Androida, które są kolejnym akceleratorem kierującym użytkowników do funkcji aplikacji, mogą być uruchamiane po kliknięciu myszy lub drugiego przycisku lub po kliknięciu przycisku & przytrzymaj na ekranie dotykowym:

Rysunek 6. Menu kontekstowe wyświetlane po kliknięciu prawym przyciskiem myszy

Przeciągnij i upuść

Budujemy interakcje metodą „przeciągnij i upuść”, np. na ilustracji poniżej. mogą zapewnić wydajną, intuicyjną produktywność do swojej aplikacji. 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. Ulepszone obsługi Chromebooków i tabletów wyposażonych w rysik dzięki wdrożeniu funkcji interakcji dostosowane do wprowadzania rysikiem.

Weź pod uwagę potencjalne różnice podczas projektowania interakcji z rysikiem. Omówienie API rysika – patrz Zgodność wejścia na dużych ekranach.

Konfigurowanie układów elastycznych

Prawidłowo wykorzystaj miejsce na ekranie, które jest dostępne dla aplikacji, niezależnie od stan wizualny (pełnoekranowy, pionowy, poziomy lub okna). Oto kilka przykładów Oto niektóre z nich:

  • 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 korzystania z myszy korzystanie z kciuka.
  • Zoptymalizuj rozmiar filmów i obrazów, ustaw maksymalną szerokość i wysokość dla wszystkich multimediów, aby zmaksymalizować czytelność i czytelność.
  • Zaimplementuj elastyczny system kolumn. Więcej informacji znajdziesz w artykule Elastyczne układu siatki.
  • 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. używać wbudowanych interfejsu, takich jak wskaźniki postępu, w przypadku wszystkich niekrytycznych działań.
  • używać ulepszonych komponentów interfejsu, takich jak selektory godziny i daty, pola tekstowe oraz zaprojektowane pod kątem myszy, klawiatury i większych ekranów.
  • Używaj edycji bezpośrednich, dodatkowych kolumn lub interfejsu modalnego zamiast nowej aktywności dla małych i średnich funkcji edycji.
  • Usuwanie i modyfikowanie pływających przycisków poleceń (FAB) w celu usprawnienia klawiatury nawigacji. Domyślnie przycisk PPP jako ostatni w tablicy poprzecznej zamówienie. Zrób to jako pierwsze, ponieważ jest to działanie główne. zastąpić go afordancją wyższego poziomu.

Rysunek 8. Przykłady układu elastycznego na telefonie i komputerze.

Systemowy przycisk Wstecz to wzór stosowany wywodzących się z przenośnych urządzeń z Androidem, które nie pasowałyby na komputerze.

W miarę jak Twoja aplikacja jest coraz bardziej dostosowywana do środowiska laptopa, zastanów się: kierując się w stronę wzorca nawigacji, który cofa wyróżnienie przycisku Wstecz. Makro aplikacja obsługuje własny stos historii, zapewniając zwrot lub inne opcje wyjścia, np. przycisk zamykania bądź anulowania, do interfejsu na dużym ekranie.

Aby określić, czy aplikacja ma wyświetlać w oknie przycisk Wstecz, ustaw preferencje w obrębie sekcji <activity> . Ustawienie true ukrywania 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 ale użytkownik uruchamia ją na ekranie w orientacji poziomej. W tym przypadku podgląd lub przechwycony wynik może być nieprawidłowo obrócony.

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ściwy sposób w trybie 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 odtwarzające dźwięk mają własne elementy sterujące głośnością. Przestrzegaj wytycznych dotyczących Pracuję w przypadku 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 funkcji system settings i WindowManager.LayoutParams są ignorowane.

Dodatkowe materiały szkoleniowe

Aby dowiedzieć się więcej o optymalizacji aplikacji na Androida pod kątem Chromebooków, przeczytaj następujące zasoby: