Stosowanie lupy

Wypróbuj Compose

Jetpack Compose to zalecany zestaw narzędzi do tworzenia interfejsu na Androidzie. Dowiedz się, jak używać tekstu w Compose.

Modifier.magnifier() →

Dostępny w Androidzie 9 (poziom API 28) i nowszych wersjach widżet lupy to wirtualne szkło powiększające, które wyświetla powiększoną kopię elementu View w panelu nakładki reprezentującym soczewkę. Ta funkcja poprawia wygodę użytkownika podczas wstawiania i zaznaczania tekstu. Gdy użytkownik używa lupy do powiększania tekstu, może precyzyjnie ustawić kursor lub uchwyty zaznaczenia, wyświetlając powiększony tekst w panelu, który podąża za jego palcem.

Rysunek 1 pokazuje, jak lupa ułatwia zaznaczanie tekstu. Interfejsy API lupy nie są powiązane z tekstem. Możesz używać tego widżetu w różnych przypadkach, np. do czytania małego tekstu lub powiększania trudnych do odczytania nazw miejsc na mapach.

Rysunek 1. Powiększanie tekstu. Gdy użytkownik przeciąga prawy uchwyt zaznaczenia , pojawia się lupa, która pomaga w dokładnym umieszczeniu.

Lupa jest już zintegrowana z widżetami platformy, takimi jak TextView, EditText i WebView. Zapewnia spójną manipulację tekstem w różnych aplikacjach. Widżet ma prosty interfejs API i może służyć do powiększania dowolnego elementu View w zależności od kontekstu aplikacji.

Korzystanie z interfejsu API

Możesz używać lupy programowo w dowolnym widoku w ten sposób:

Kotlin

val view: View = findViewById(R.id.view)
val magnifier = Magnifier.Builder(view).build()
magnifier.show(view.width / 2.0f, view.height / 2.0f)

Java

View view = findViewById(R.id.view);
Magnifier magnifier = new Magnifier.Builder(view).build();
magnifier.show(view.getWidth() / 2, view.getHeight() / 2);

Zakładając, że hierarchia widoków ma pierwszy układ, lupa wyświetla się na ekranie i zawiera region wyśrodkowany na podanych współrzędnych w widoku. Panel pojawia się nad punktem środkowym kopiowanej treści. Lupa pozostaje widoczna, dopóki użytkownik jej nie zamknie.

Uwaga: argumenty funkcji show() są względne względem lewego górnego rogu powiększanego widoku.

Poniższy fragment kodu pokazuje, jak zmienić tło powiększonego widoku:

Kotlin

view.setBackgroundColor(...)

Java

view.setBackgroundColor(...);

Zakładając, że kolor tła jest widoczny w lupie, jej zawartość jest nieaktualna, ponieważ nadal wyświetla się region widoku ze starym tłem. Aby odświeżyć zawartość, użyj metody update() w ten sposób:

Kotlin

view.post { magnifier.update() }

Java

view.post(magnifier::update);

Uwaga: opublikuj operację aktualizacji, aby mieć pewność, że w momencie jej wykonania widok z nowym kolorem tła jest już narysowany. Dzieje się tak, ponieważ zawartość lupy zawsze pozostaje o jedną klatkę za powiększonym widokiem.

Gdy skończysz, zamknij lupę, wywołując metodę dismiss():

Kotlin

magnifier.dismiss()

Java

magnifier.dismiss();

Powiększanie podczas interakcji użytkownika

Typowym przypadkiem użycia lupy jest umożliwienie użytkownikowi powiększenia regionu widoku przez dotknięcie go, jak pokazano na rysunku 2.

Rysunek 2. Lupa podąża za dotykiem użytkownika. Jest stosowana do elementu ViewGroup, który zawiera element `ImageView` po lewej stronie i element TextView po prawej.

Możesz to zrobić, aktualizując lupę zgodnie z zdarzeniami dotyku odbieranymi przez widok w ten sposób:

Kotlin

imageView.setOnTouchListener { v, event ->
  when (event.actionMasked) {
    MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE -> {
      val viewPosition = IntArray(2)
      v.getLocationOnScreen(viewPosition)
      magnifier.show(event.rawX - viewPosition[0], event.rawY - viewPosition[1])
    }
    MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> {
      magnifier.dismiss()
    }
  }
  true
}

Java

imageView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                // Fall through.
            case MotionEvent.ACTION_MOVE: {
                final int[] viewPosition = new int[2];
                v.getLocationOnScreen(viewPosition);
                magnifier.show(event.getRawX() - viewPosition[0],
                               event.getRawY() - viewPosition[1]);
                break;
            }
            case MotionEvent.ACTION_CANCEL:
                // Fall through.
            case MotionEvent.ACTION_UP: {
                magnifier.dismiss();
            }
        }
        return true;
    }
});

Uwaga: lupa nigdy nie wyświetla powiększonej treści, która nie należy do widoku, nawet jeśli widok jest zawarty w kontenerach z możliwością przewijania i częściowo zamaskowany. Gdy współrzędne przekazane do funkcji show() oznaczają kopiowanie treści spoza widoku, są one ograniczane do widocznego regionu widoku.

Dodatkowe kwestie dotyczące powiększania tekstu

W przypadku widżetów tekstowych platformy ważne jest, aby zrozumieć konkretne zachowania lupy i włączyć ją w niestandardowym widoku tekstu w sposób spójny na całej platformie Android. Weź pod uwagę następujące kwestie:

• Lupa jest uruchamiana natychmiast, gdy użytkownik chwyci uchwyt wstawiania lub zaznaczenia.
• Lupa zawsze płynnie podąża za palcem użytkownika w poziomie, a w pionie jest przytwierdzona do środka bieżącego wiersza tekstu.
• Podczas przesuwania w poziomie lupa porusza się tylko między lewą i prawą granicą bieżącego wiersza. Ponadto, gdy dotyk użytkownika opuści te granice, a odległość pozioma między dotykiem a najbliższą granicą jest większa niż połowa pierwotnej szerokości zawartości lupy, lupa jest zamykana, ponieważ kursor nie jest już widoczny w lupie.
• Lupa nigdy nie jest uruchamiana, gdy czcionka tekstu jest zbyt duża. Tekst jest uznawany za zbyt duży, gdy różnica między dolną a górną linią czcionki jest większa niż wysokość treści, która mieści się w lupie. Uruchamianie lupy w tym przypadku nie przynosi żadnych korzyści.