Implémenter une loupe

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser du texte dans Compose.

Disponible sous Android 9 (niveau d'API 28) ou version ultérieure, le widget Loupe est une loupe virtuelle qui affiche une copie agrandie d'un View via un volet de superposition qui représente l'objectif. Cette fonctionnalité améliore l'expérience utilisateur de sélection et d'insertion de texte. Lors de l'application de la loupe au texte, l'utilisateur peut positionner précisément le curseur ou les poignées de sélection en affichant le texte agrandi dans un volet qui suit son doigt.

La figure 1 montre comment la loupe facilite la sélection du texte. Les API d'agrandissement ne sont pas liées au texte. Vous pouvez utiliser ce widget dans de nombreux cas d'utilisation, comme la lecture de petits caractères ou l'agrandissement de noms de lieux difficiles à voir sur une carte.

Image montrant comment la loupe s'affiche lorsque l'utilisateur a sélectionné la poignée de sélection appropriée
Image 1. Agrandissement du texte. Lorsque l'utilisateur fait glisser la poignée de sélection appropriée, la loupe s'affiche pour aider à la positionner correctement.

La loupe est déjà intégrée aux widgets de plate-forme tels que TextView, EditText et WebView. Il permet de manipuler le texte de manière cohérente dans toutes les applications. Le widget est fourni avec une API simple et peut être utilisé pour agrandir n'importe quelle View en fonction du contexte de votre application.

Utilisation de l'API

Vous pouvez utiliser la loupe par programmation sur une vue arbitraire, comme suit:

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

En supposant que la hiérarchie des vues ait la première mise en page, la loupe s'affiche à l'écran et contient une région centrée sur les coordonnées données dans la vue. Le volet apparaît au-dessus du point central du contenu en cours de copie. La loupe persiste indéfiniment jusqu'à ce que l'utilisateur la ferme.

L'extrait de code suivant montre comment modifier l'arrière-plan de la vue agrandie:

Kotlin

view.setBackgroundColor(...)

Java

view.setBackgroundColor(...);

En supposant que la couleur d'arrière-plan est visible dans la loupe, le contenu de la loupe est obsolète, car une zone de la vue avec l'ancien arrière-plan s'affiche toujours. Pour actualiser le contenu, utilisez la méthode update(), comme suit:

Kotlin

view.post { magnifier.update() }

Java

view.post(magnifier::update);

Lorsque vous avez terminé, fermez la loupe en appelant la méthode dismiss():

Kotlin

magnifier.dismiss()

Java

magnifier.dismiss();

Agrandir les interactions des utilisateurs

Un cas d'utilisation courant de la loupe consiste à permettre à l'utilisateur d'agrandir une région d'affichage en la touchant, comme illustré dans la figure 2.

Figure 2. La loupe suit les mouvements de l'utilisateur. Elle est appliquée à une ViewGroup contenant une "ImageView" à gauche et un TextView à droite.

Pour ce faire, mettez à jour la loupe en fonction des événements tactiles reçus par la vue, comme suit:

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

Éléments supplémentaires à prendre en compte pour agrandir le texte

Pour les widgets de texte de la plate-forme, il est important de comprendre les comportements spécifiques de la loupe et de l'activer de manière cohérente pour votre vue de texte personnalisée sur la plate-forme Android. Réfléchissez aux points suivants :

  • La loupe se déclenche immédiatement lorsque l'utilisateur saisit une poignée d'insertion ou de sélection.
  • La loupe suit toujours correctement le doigt de l'utilisateur horizontalement, tandis que verticalement, elle est fixe au centre de la ligne de texte actuelle.
  • En cas de déplacement horizontal, la loupe ne se déplace qu'entre les limites gauche et droite de la ligne actuelle. De plus, lorsque la pression de l'utilisateur quitte ces limites et que la distance horizontale entre l'écran tactile et la limite la plus proche dépasse la moitié de la largeur d'origine du contenu de la loupe, celle-ci est ignorée, car le curseur n'est plus visible à l'intérieur de la loupe.
  • La loupe ne se déclenche jamais lorsque la police du texte est trop grande. Le texte est considéré comme trop grand lorsque la différence entre la descente et l'ascension de la police est supérieure à la hauteur du contenu qui tient dans la loupe. Dans ce cas, déclencher la loupe n'ajoute aucune valeur.