Ikony wskaźnika myszy

Użytkownicy Androida korzystają z Twojej aplikacji na różnych urządzeniach, np. telefonach, tabletach, urządzeniach składanych i Chromebookach. Podczas interakcji z aplikacją, zwłaszcza na większych ekranach, użytkownicy mogą też używać urządzenia wskazującego, np. myszy z 3 przyciskami. Aplikacje na Androida obsługują stosowanie różnych stylów wskaźnika myszy, aby użytkownicy mieli wizualną wskazówkę, że mogą wejść w interakcję z obiektem.

Używaj domyślnych kursorów systemowych

Użytkownicy znają różne konwencje interakcji z różnymi typami obiektów na urządzeniach z dużym ekranem. Android udostępnia deweloperom niektóre z najpopularniejszych ikon kursora, które są znane użytkownikom. Możesz dodać te domyślne ikony kursora systemowego za pomocą kilku wierszy kodu. Przyjrzyjmy się temu fragmentowi kodu w Kotlinie: 

myView.setOnHoverListener { view, _ ->
      view.pointerIcon =
         PointerIcon.getSystemIcon(applicationContext, PointerIcon.TYPE_HAND)
      false // Listener did not consume the event.
}

W tym przykładzie myView to widok, który w określonych warunkach zostanie ustawiony jako ikona wskaźnika. Warunek przedstawiony tutaj to stan najechania, który występuje, gdy wskaźnik myszy znajduje się nad widokiem. W innych sytuacjach możesz potrzebować ikony oczekiwania podczas przetwarzania lub celownika w grze.

setOnHoverListener nasłuchuje, kiedy wskaźnik przechodzi w stan najechany, a następnie reaguje na to zdarzenie. W detektorze zdarzeń wywoływana jest funkcja view.pointerIcon, aby ustawić ikonę wskaźnika dla danego widoku. Do ustawienia ikony wskaźnika używana jest istniejąca ikona systemowa.

Android ma kilka wbudowanych ikon systemowych. Pełną listę znajdziesz u dołu tej strony. Użyto ikony TYPE_HAND, która przedstawia zamkniętą dłoń z wyciągniętym palcem wskazującym.

Używanie własnego kursora specjalnego

// Loading a bitmap to use as a pointer icon
    BitmapFactory.decodeResource(
        this.resources,
        R.drawable.dollar_sign
    ), CURSOR_WIDTH, CURSOR_HEIGHT, false
)

// Creating the pointer icon and sending clicks from the center of the mouse icon
PointerIcon.create(dollarBitmap, (CURSOR_WIDTH/2).toFloat(), (CURSOR_HEIGHT/2).toFloat())

Uwaga: lokalizacja hotspotu zależy od konkretnego przypadku użycia. Na przykład aplikacja do rysowania może ustawić obszar interaktywny na końcówkę pióra lub pędzla.

Przykłady

Dodanie ikon wskaźnika do aplikacji to świetny sposób na zapewnienie użytkownikom bardziej intuicyjnych wrażeń na różnych urządzeniach, z których korzystają. Dostępnych jest wiele świetnych domyślnych ikon systemowych. Jeśli nie spełniają one Twoich potrzeb, zawsze możesz wczytać lub utworzyć własne.

  • Przeciągnij i upuść – jeśli Twoja aplikacja obsługuje przeciąganie z innej aplikacji i upuszczanie w niej, możesz wdrożyć ikonę TYPE_NO_DROP. W ten sposób użytkownik będzie mógł wizualnie sprawdzić, czy aplikacja nie obsługuje typu MIME, który próbuje przeciągnąć do aplikacji.
  • Mapowanie – jeśli masz aplikację do mapowania i chcesz pokazać użytkownikom, że mogą przesuwać mapę, możesz wyświetlać ikonę TYPE_GRAB po najechaniu kursorem na mapę. Gdy użytkownik kliknie, możesz zmienić ikonę na dłoń, aby pokazać, że przesuwa mapę.
  • Edycja zdjęć – użytkownicy edytujący zdjęcia lubią mieć możliwość powiększania obrazu za pomocą lupy. Możesz zmienić kursor na lupę z ikoną TYPE_ZOOM_IN, gdy wybrany jest tryb powiększenia.
  • I wiele innych możliwości

Uwaga: aby zobaczyć różne zmiany wskaźnika w działaniu, zapoznaj się z tym przykładowym wskaźnikiem w GitHubie.

Niestandardowe ikony wskaźnika w aplikacji na Androida.

Dodatek

Materiały dodatkowe

Domyślne kursory systemowe

Oto domyślnie dostępne kursory w systemie Android.

Nazwa kursora Ikona
TYPE_ALIAS Kursor aliasu, czyli strzałka z małą zakrzywioną strzałką obok.
TYPE_ALL_SCROLL Kursor przewijania we wszystkich kierunkach, czyli okrąg z 4 strzałkami skierowanymi na zewnątrz.
TYPE_ARROW Standardowy kursor w postaci strzałki.
TYPE_CELL Kursor komórki
TYPE_CONTEXT_MENU Kursor menu kontekstowego, czyli strzałka z małą ikoną menu obok niej.
TYPE_COPY Kursor kopiowania, czyli strzałka z plusem obok.
TYPE_CROSSHAIR Kursor w kształcie krzyżyka, czyli znaku plus z kropką pośrodku.
TYPE_DEFAULT Domyślny kursor strzałki.
TYPE_GRAB Kursor chwytania w postaci otwartej dłoni.
TYPE_GRABBING Kursor chwytania, zamknięta dłoń.
TYPE_HAND Kursor w kształcie dłoni ze wskazującym palcem.
TYPE_HELP Kursor pomocy, czyli strzałka ze znakiem zapytania.
TYPE_HORIZONTAL_DOUBLE_ARROW Kursor w postaci poziomej dwustronnej strzałki do zmiany rozmiaru.
TYPE_NO_DROP Kursor „nie można upuścić” – okrąg z przekreślającą go linią.
TYPE_NULL Kursor nie będzie widoczny
TYPE_TEXT Kursor tekstowy w kształcie litery I.
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROW Kursor w postaci podwójnej strzałki po przekątnej od lewego górnego do prawego dolnego rogu, który służy do zmiany rozmiaru.
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROW Kursor w postaci dwukierunkowej strzałki po przekątnej od prawego górnego do lewego dolnego rogu, służący do zmiany rozmiaru.
TYPE_VERTICAL_DOUBLE_ARROW Pionowy kursor z podwójną strzałką do zmiany rozmiaru.
TYPE_VERTICAL_TEXT Pionowy kursor tekstowy w postaci poziomej kreski.
TYPE_WAIT Kursor oczekiwania, czyli klepsydra lub obracające się kółko.
TYPE_ZOOM_IN Kursor powiększania, czyli lupa ze znakiem plusa.
TYPE_ZOOM_OUT Kursor oddalania, czyli lupa ze znakiem minusa.