Schatten und Zuschnittsansichten erstellen

Material Design führt Elevation für UI-Elemente ein. Mithilfe von Elevation können Nutzer die relative Bedeutung der einzelnen Elemente verstehen und ihre Aufmerksamkeit auf die aktuelle Aufgabe richten.

Die Höhe einer Ansicht, dargestellt durch die Eigenschaft Z, bestimmt die visuelle Darstellung des Schattens. Ansichten mit höheren Z-Werten werfen größere, weichere Schatten und schließen Ansichten mit niedrigeren Z-Werten. Der Z-Wert einer Ansicht wirkt sich jedoch nicht auf die Größe der Ansicht aus.

Schatten werden vom übergeordneten Element der erhöhten Ansicht gezeichnet. Sie unterliegen der standardmäßigen Begrenzung der Ansicht und werden standardmäßig von der übergeordneten Ressource abgeschnitten.

Die Erhöhung ist auch nützlich, um Animationen zu erstellen, bei denen sich Widgets beim Ausführen von Aktionen vorübergehend über die Ansichtsebene heben.

Weitere Informationen finden Sie unter Elevation in Material Design.

Ihren Ansichten Höhenangaben zuweisen

Der Wert Z für eine Ansicht besteht aus zwei Komponenten:

• Höhe: die statische Komponente
• Übersetzung: die für Animationen verwendete dynamische Komponente

Z = elevation + translationZ

Die Z-Werte werden in dp (dichteunabhängige Pixel) gemessen.

Um die Standardhöhe (Ruhe) einer Ansicht festzulegen, verwenden Sie im XML-Layout das Attribut android:elevation. Um die Höhe einer Ansicht im Code einer Aktivität festzulegen, verwenden Sie die Methode View.setElevation().

Mit der Methode View.setTranslationZ() legen Sie die Übersetzung einer Ansicht fest.

Mit den Methoden ViewPropertyAnimator.z() und ViewPropertyAnimator.translationZ() lässt sich die Höhe von Ansichten animieren. Weitere Informationen finden Sie in der API-Referenz zu ViewPropertyAnimator und im Entwicklerleitfaden für Property-Animationen.

Sie können diese Animationen auch mit StateListAnimator deklarativ angeben. Dies ist besonders nützlich, wenn Statusänderungen Animationen auslösen, z. B. wenn der Nutzer auf eine Schaltfläche tippt. Weitere Informationen finden Sie unter Statusänderungen von Ansichten mit StateListAnimator animieren.

Schatten und Konturen der Ansicht anpassen

Die Begrenzungen des Drawable-Hintergrunds einer Ansicht bestimmen die Standardform des Schattens. Umrisse stellen die äußere Form eines Grafikobjekts dar und definieren die Wellenform für das Feedback durch Berührung.

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 Drawable für den Hintergrund den Umriss der Ansicht definiert. Durch die Angabe eines benutzerdefinierten Umrisses wird die Standardform des Schattens einer Ansicht überschrieben.

So definieren Sie eine benutzerdefinierte Gliederung für eine Ansicht in Ihrem Code:

1. Erweitern Sie die Klasse ViewOutlineProvider.
2. Überschreiben Sie die Methode getOutline().
3. Weisen Sie Ihrer Ansicht den neuen Anbieter für Umrisse mit der Methode View.setOutlineProvider() zu.

Mithilfe der Methoden in der Klasse Outline können Sie ovale und rechteckige Umrisse mit abgerundeten Ecken erstellen. Der Standardanbieter für Umrisse ruft die Umrisse aus dem Hintergrund der Ansicht ab. Um zu verhindern, dass eine Ansicht einen Schatten wirft, setzen Sie ihren Umrissanbieter auf null.

Clipaufrufe

Durch das Beschneiden von Ansichten können Sie die Form einer Ansicht ändern. Sie können Ansichten reduzieren, um sie mit anderen Designelementen zu konsistenten oder um die Form einer Ansicht als Reaktion auf Nutzereingaben zu ändern. Mit der Methode View.setClipToOutline() können Sie eine Ansicht auf ihren Umriss zuschneiden. Nur Umrisse, die Rechtecke, Kreise und runde Rechtecke sind, unterstützen das Beschneiden gemäß der Methode Outline.canClip().

Wenn du die Form eines Drawables zu einer Ansicht beschneiden möchtest, lege das Drawable als Hintergrund der Ansicht fest (wie im vorherigen Beispiel gezeigt), und rufe die Methode View.setClipToOutline() auf.

Das Zuschneiden von Ansichten ist ein kostspieliger Vorgang. Animieren Sie daher nicht die Form, die Sie zum Beschneiden einer Ansicht verwenden. Verwenden Sie die Darstellungsanimation, um diesen Effekt zu erzielen.