Textlupe implementieren

Compose ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zur Verwendung von Text in Compose

Modifier.magnifier() →

Das Lupen-Widget ist ab Android 9 (API-Level 28) verfügbar und eine virtuelle Lupe, die eine vergrößerte Kopie einer View über ein Overlay-Fenster anzeigt, das die Linse darstellt. Die Funktion verbessert die Nutzerfreundlichkeit beim Einfügen und Auswählen von Text. Wenn ein Nutzer die Lupe auf Text anwendet, kann er den Cursor oder die Auswahlpunkte präzise positionieren, indem er den vergrößerten Text in einem Fenster sieht, das seinem Finger folgt.

Abbildung 1 zeigt, wie die Lupe die Textauswahl erleichtert. Die Lupen-APIs sind nicht an Text gebunden. Sie können dieses Widget in einer Vielzahl von Anwendungsfällen verwenden, z. B. zum Lesen von kleinem Text oder zum Vergrößern schwer erkennbarer Ortsnamen auf Karten.

Die Lupe ist bereits in Plattform-Widgets wie TextView, EditText und WebView integriert. Sie sorgt für eine einheitliche Textbearbeitung in allen Apps. Das Widget bietet eine einfache API und kann verwendet werden, um jede View je nach Kontext Ihrer App zu vergrößern.

API-Nutzung

Sie können die Lupe programmatisch auf eine beliebige Ansicht anwenden:

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

Wenn die Ansichtshierarchie das erste Layout hat, wird die Lupe auf dem Bildschirm angezeigt und enthält einen Bereich, der auf den angegebenen Koordinaten in der Ansicht zentriert ist. Das Fenster wird über dem Mittelpunkt des kopierten Inhalts angezeigt. Die Lupe bleibt so lange sichtbar, bis der Nutzer sie schließt.

Das folgende Code-Snippet zeigt, wie Sie den Hintergrund der vergrößerten Ansicht ändern:

view.setBackgroundColor(...)

view.setBackgroundColor(...);

Wenn die Hintergrundfarbe in der Lupe sichtbar ist, ist der Inhalt der Lupe veraltet, da ein Bereich der Ansicht mit dem alten Hintergrund weiterhin angezeigt wird. Verwenden Sie die update() Methode, um den Inhalt zu aktualisieren:

view.post { magnifier.update() }

view.post(magnifier::update);

Rufen Sie die dismiss() Methode auf, um die Lupe zu schließen:

magnifier.dismiss()

magnifier.dismiss();

Vergrößern bei Nutzerinteraktion

Ein häufiger Anwendungsfall für die Lupe besteht darin, dem Nutzer zu ermöglichen, einen Ansichtsbereich durch Berühren zu vergrößern, wie in Abbildung 2 dargestellt.

Aktualisieren Sie die Lupe entsprechend den Berührungsereignissen, die von der Ansicht empfangen werden:

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

Zusätzliche Überlegungen beim Vergrößern von Text

Bei den Text-Widgets der Plattform ist es wichtig, bestimmte Lupenverhaltensweisen zu verstehen und die Lupe für Ihre benutzerdefinierte Textansicht auf der gesamten Android-Plattform einheitlich zu aktivieren. Hier einige Tipps:

• Die Lupe wird sofort ausgelöst, wenn der Nutzer einen Einfüge- oder Auswahlpunkt ergreift.
• Die Lupe folgt dem Finger des Nutzers immer horizontal, während sie vertikal auf die Mitte der aktuellen Textzeile fixiert ist.
• Bei der horizontalen Bewegung bewegt sich die Lupe nur zwischen den linken und rechten Grenzen der aktuellen Zeile. Wenn die Berührung des Nutzers diese Grenzen verlässt und der horizontale Abstand zwischen der Berührung und der nächstgelegenen Grenze größer als die Hälfte der ursprünglichen Breite des Lupeninhalts ist, wird die Lupe geschlossen, da der Cursor nicht mehr in der Lupe sichtbar ist.
• Die Lupe wird niemals ausgelöst, wenn die Textschrift zu groß ist. Text gilt als zu groß, wenn der Unterschied zwischen dem Abstieg und dem Aufstieg der Schrift größer als die Höhe des Inhalts ist, der in die Lupe passt. Das Auslösen der Lupe in diesem Fall bringt keinen Mehrwert.