Schatten und Zuschnittsansichten erstellen

Jetpack Compose ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Designs in Compose

Modifier.shadow() →

Mit Material Design wird die Erhebung für UI-Elemente eingeführt. Die Erhebung hilft Nutzern, die relative Bedeutung der einzelnen Elemente zu verstehen und ihre Aufmerksamkeit auf die aktuelle Aufgabe zu lenken.

Hinweis:Auf dieser Seite werden Schatten beschrieben, die durch die Erhebung entstehen. Material3 führt einen Erhebungsansatz ein, der auf der Oberflächenfarbe basiert. Weitere Informationen zur Wartbarkeit und zur Verbesserung der Nutzererfahrung finden Sie unter Material Elevation. Sie können Ihr Projekt auch zu Jetpack Compose migrieren.

Die Erhebung einer Ansicht, dargestellt durch die Property Z, bestimmt das visuelle Erscheinungsbild ihres Schattens. Ansichten mit höheren Z-Werten werfen größere, weichere Schatten und verdecken Ansichten mit niedrigeren Z-Werten. Der Z-Wert einer Ansicht hat jedoch keinen Einfluss auf ihre Größe.

Abbildung 1. Erhebung auf der Z-Achse und der resultierende Schatten.

Schatten werden vom übergeordneten Element der erhöhten Ansicht gezeichnet. Sie unterliegen dem Standard-Clipping von Ansichten und werden standardmäßig vom übergeordneten Element abgeschnitten.

Die Erhebung ist auch nützlich, um Animationen zu erstellen, bei denen Widgets bei Aktionen vorübergehend über die Ansichtsebene angehoben werden.

Weitere Informationen finden Sie unter Erhebung in Material Design.

Ansichten Erhebung zuweisen

Der Z-Wert für eine Ansicht hat zwei Komponenten:

• Erhebung: die statische Komponente
• Translation: die dynamische Komponente, die für Animationen verwendet wird

Z = elevation + translationZ

Die Z-Werte werden in dp (dichteunabhängigen Pixeln) gemessen.

Abbildung 2. Verschiedene Schatten für unterschiedliche Erhebungen in dp.

Verwenden Sie das Attribut android:elevation im XML-Layout, um die Standarderhebung (Ruheposition) einer Ansicht festzulegen. Verwenden Sie die Methode View.setElevation(), um die Erhebung einer Ansicht im Code einer Aktivität festzulegen.

Verwenden Sie die Methode View.setTranslationZ(), um die Translation einer Ansicht festzulegen.

Mit den Methoden ViewPropertyAnimator.z() und ViewPropertyAnimator.translationZ() können Sie die Erhebung von Ansichten animieren. Weitere Informationen finden Sie in der API-Referenz für ViewPropertyAnimator und im Entwicklerleitfaden für Property-Animationen.

Sie können auch einen StateListAnimator verwenden, um diese Animationen deklarativ anzugeben. Das ist besonders nützlich, wenn Zustandsänderungen Animationen auslösen, z. B. wenn der Nutzer auf eine Schaltfläche tippt. Weitere Informationen finden Sie unter Animationen für Zustandsänderungen von Ansichten mit StateListAnimator.

Schatten und Umrisse von Ansichten anpassen

Die Grenzen des Hintergrund-Drawables einer Ansicht bestimmen die Standardform ihres Schattens. Umrisse stellen die äußere Form eines Grafikobjekts dar und definieren den Ripple-Bereich für das Touch-Feedback.

Betrachten Sie die folgende Ansicht, die mit einem Hintergrund-Drawable definiert ist:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Das Hintergrund-Drawable ist als Rechteck mit abgerundeten Ecken definiert:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

Die Ansicht wirft einen Schatten mit abgerundeten Ecken, da das Hintergrund-Drawable den Umriss der Ansicht definiert. Wenn Sie einen benutzerdefinierten Umriss angeben, wird die Standardform des Schattens einer Ansicht überschrieben.

So definieren Sie einen benutzerdefinierten Umriss für eine Ansicht in Ihrem Code:

1. Erweitern Sie die ViewOutlineProvider Klasse.
2. Überschreiben Sie die getOutline() Methode.
3. Weisen Sie der Ansicht mit der View.setOutlineProvider() Methode den neuen Umriss-Provider zu.

Mit den Methoden in der Klasse Outline können Sie ovale und rechteckige Umrisse mit abgerundeten Ecken erstellen. Der Standard-Umriss-Provider für Ansichten ruft den Umriss aus dem Hintergrund der Ansicht ab. Wenn eine Ansicht keinen Schatten werfen soll, setzen Sie ihren Umriss-Provider auf null.

Ansichten abschneiden

Durch das Abschneiden von Ansichten können Sie die Form einer Ansicht ändern. Sie können Ansichten abschneiden, um sie an andere Designelemente anzupassen oder die Form einer Ansicht als Reaktion auf Nutzereingaben zu ändern. Mit der Methode View.setClipToOutline() können Sie eine Ansicht auf ihren Umrissbereich beschränken. Das Abschneiden wird nur für Umrisse unterstützt, die Rechtecke, Kreise und abgerundete Rechtecke sind, wie durch die Methode Outline.canClip() bestimmt.

Wenn Sie eine Ansicht auf die Form eines Drawables beschränken möchten, legen Sie das Drawable als Hintergrund der Ansicht fest, wie im vorherigen Beispiel gezeigt, und rufen Sie die Methode View.setClipToOutline() auf.

Das Abschneiden von Ansichten ist ein aufwendiger Vorgang. Animieren Sie daher nicht die Form, die Sie zum Abschneiden einer Ansicht verwenden. Verwenden Sie stattdessen die Reveal Animation.