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.

<ph type="x-smartling-placeholder"></ph> Modifier.magnifier() →

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

La figure 1 montre comment la loupe facilite la sélection de texte. API Loupe ne sont pas liés au texte, et vous pouvez utiliser ce widget dans divers cas d'utilisation : comme la lecture de petits caractères ou l'agrandissement de noms de lieux difficiles à voir sur les cartes.

La loupe est déjà intégrée aux widgets de la 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:

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 des vues comporte la première mise en page, la loupe s'affiche sur la à l'écran et contient une zone centrée sur les coordonnées données dans la vue. Le volet apparaît au-dessus du point central du contenu à copier. La la loupe reste affichée 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 vue:

view.setBackgroundColor(...)

view.setBackgroundColor(...);

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

view.post { magnifier.update() }

view.post(magnifier::update);

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

magnifier.dismiss()

magnifier.dismiss();

Agrandir lors d'une interaction utilisateur

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

Pour ce faire, modifiez 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;
    }
});

Éléments supplémentaires à prendre en compte lors de l'agrandissement d'un texte

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

• La loupe se déclenche immédiatement lorsque l'utilisateur saisit une insertion ou une poignée de sélection.
• La loupe suit toujours le doigt de l'utilisateur horizontalement, tandis que verticalement, elle est fixée au centre de la ligne de texte actuelle.
• En cas de déplacement horizontal, la loupe se déplace uniquement entre les bords gauche et la limite droite de la ligne actuelle. De plus, lorsque l'utilisateur touche de ces limites ainsi que la distance horizontale entre l'écran tactile dépasse la moitié de la largeur d'origine du contenu de la loupe, la loupe est ignorée, car le curseur n'est plus visible à l'intérieur la loupe.
• La loupe n'est jamais déclenchée lorsque la police du texte est trop grande. La valeur Texte est est considéré comme trop grand lorsque la différence entre la descente de police et est supérieure à la hauteur du contenu adapté à la loupe. Dans ce cas, le déclenchement de la loupe n'ajoute aucune valeur.