Implementare una lente d'ingrandimento

Prova la modalità Scrivi

Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come utilizzare il testo in Compose.

Modifier.magnifier() →

Disponibile su Android 9 (livello API 28) e versioni successive, il widget Lente d'ingrandimento è una lente d'ingrandimento virtuale che mostra una copia ingrandita di un elemento View tramite un riquadro di overlay che rappresenta l'obiettivo. Questa funzionalità migliora l'esperienza utente di inserimento e selezione del testo. Quando applichi la lente d'ingrandimento al testo, un utente può posizionare con precisione il cursore o i punti di manipolazione di selezione visualizzando il testo ingrandito in un riquadro che segue il dito.

La Figura 1 mostra come la lente d'ingrandimento facilita la selezione del testo. Le API Lente di ingrandimento non sono legate al testo e puoi usare questo widget in vari casi d'uso, come la lettura di testo di piccole dimensioni o l'ingrandimento di nomi di luoghi difficili da visualizzare sulle mappe.

La lente d'ingrandimento è già integrata con widget di piattaforme come TextView, EditText e WebView. Offre una manipolazione del testo coerente tra le app. Il widget viene fornito con una semplice API e può essere utilizzato per ingrandire qualsiasi View a seconda del contesto dell'app.

Utilizzo dell'API

Puoi utilizzare la lente d'ingrandimento in modo programmatico in una visualizzazione arbitraria come segue:

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

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

Supponendo che la gerarchia di visualizzazione abbia il primo layout, la lente d'ingrandimento viene mostrata sullo schermo e contiene una regione centrata sulle coordinate specificate all'interno della vista. Il riquadro viene visualizzato sopra il punto centrale dei contenuti da copiare. La lente d'ingrandimento persiste a tempo indeterminato finché l'utente non la ignora.

Il seguente snippet di codice mostra come cambiare lo sfondo della visualizzazione ingrandita:

view.setBackgroundColor(...)

view.setBackgroundColor(...);

Supponendo che il colore di sfondo sia visibile all'interno della lente d'ingrandimento, i contenuti della lente sono inattivi, perché viene ancora mostrata un'area della visualizzazione con il vecchio sfondo. Per aggiornare i contenuti, utilizza il metodo update() come segue:

view.post { magnifier.update() }

view.post(magnifier::update);

Al termine, chiudi la lente d'ingrandimento chiamando il metodo dismiss():

magnifier.dismiss()

magnifier.dismiss();

Ingrandisci al momento dell'interazione dell'utente

Un caso d'uso comune per la lente d'ingrandimento è consentire all'utente di ingrandire una regione di visualizzazione toccandola, come mostrato nella figura 2.

Puoi farlo aggiornando la lente d'ingrandimento in base agli eventi tocco ricevuti dalla visualizzazione, come segue:

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
}

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;
    }
});

Considerazioni aggiuntive per l'ingrandimento del testo

Per i widget di testo della piattaforma, è importante comprendere i comportamenti specifici della lente d'ingrandimento e attivarla in modo coerente per la visualizzazione del testo personalizzata su tutta la piattaforma Android. Tieni in considerazione:

• La lente d'ingrandimento viene attivata immediatamente quando l'utente prende un punto di manipolazione di inserimento o selezione.
• La lente d'ingrandimento segue sempre perfettamente il dito dell'utente in orizzontale, mentre in verticale è fissata al centro della riga di testo corrente.
• In orizzontale, la lente d'ingrandimento si sposta solo tra il limite sinistro e quello destro della linea corrente. Inoltre, quando il tocco dell'utente esce da questi limiti e la distanza orizzontale tra il tocco e il limite più vicino supera la metà della larghezza originale dei contenuti della lente d'ingrandimento, la lente d'ingrandimento viene chiusa perché il cursore non è più visibile all'interno della lente d'ingrandimento.
• La lente d'ingrandimento non viene mai attivata quando il carattere del testo è troppo grande. Il testo è considerato troppo grande quando la differenza tra la discesa e l'ascesa del carattere è maggiore dell'altezza dei contenuti che rientrano nella lente d'ingrandimento. L'attivazione della lente d'ingrandimento in questo caso non aggiunge valore.