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.

Modifier.magnifier() →

Disponible sur Android 9 (niveau d'API 28) et versions ultérieures, le widget de loupe est une loupe virtuelle qui affiche une copie agrandie d'une View via un volet de superposition représentant l'objectif. Cette fonctionnalité améliore l'expérience utilisateur en matière d'insertion et de sélection de texte. Lorsqu'un utilisateur applique la loupe à du texte, il peut positionner précisément le curseur ou les poignées de sélection en visualisant le texte agrandi dans un volet qui suit son doigt.

La figure 1 montre comment la loupe facilite la sélection de texte. Les API de loupe ne sont pas liées au texte. Vous pouvez utiliser ce widget dans différents cas d'utilisation, par exemple pour lire du texte de petite taille ou agrandir des noms de lieux difficiles à voir sur des cartes.

La loupe est déjà intégrée aux widgets de plate-forme tels que TextView, EditText et WebView. Elle 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 :

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

En supposant que la hiérarchie de vues comporte 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 copié. 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 :

view.setBackgroundColor(...)

view.setBackgroundColor(...);

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

view.post { magnifier.update() }

view.post(magnifier::update);

Une fois terminé, fermez la loupe en appelant la dismiss() méthode :

magnifier.dismiss()

magnifier.dismiss();

Agrandissement lors de l'interaction de l'utilisateur

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

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

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

Autres éléments à prendre en compte lors de l'agrandissement de texte

Pour les widgets de texte de la plate-forme, il est important de comprendre les comportements spécifiques de la Loupe et d'activer la Loupe de manière cohérente pour votre affichage de texte personnalisé sur la plate-forme Android. Tenez compte des points suivants :

• La loupe est déclenchée immédiatement lorsque l'utilisateur saisit une poignée d'insertion ou de sélection.
• La loupe suit toujours le doigt de l'utilisateur de manière fluide horizontalement, tandis que verticalement, elle est fixée au centre de la ligne de texte actuelle.
• Lorsqu'elle se déplace horizontalement, la loupe ne se déplace qu'entre les limites gauche et droite de la ligne actuelle. De plus, lorsque le doigt de l'utilisateur quitte ces limites et que la distance horizontale entre le doigt et la limite la plus proche est supérieure à la moitié de la largeur d'origine du contenu de la loupe, la loupe est fermée, car le curseur n'est plus visible à l'intérieur.
• La loupe n'est jamais déclenchée lorsque la taille de 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. Le déclenchement de la loupe dans ce cas n'apporte aucune valeur ajoutée.