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 nachvollziehen und sich auf die aktuelle Aufgabe konzentrieren.

Die Höhe einer Ansicht, dargestellt durch die Z-Eigenschaft, bestimmt das visuelle Erscheinungsbild des Schattens. Ansichten mit höheren Z-Werten werfen größere, weichere Schatten aus und verdecken Ansichten mit niedrigeren Z-Werten. Der Z-Wert einer Ansicht hat jedoch keinen Einfluss auf die Größe der Ansicht.

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

Elevation ist auch nützlich, um Animationen zu erstellen, bei denen sich Widgets bei Aktionen vorübergehend über der Ansichtsebene heben.

Weitere Informationen finden Sie unter Elevation in Material Design.

Höhenangaben zu Ansichten zuweisen

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

• Höhe: die statische Komponente
• Translation: die dynamische Komponente, die für Animationen verwendet wird

Z = elevation + translationZ

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

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

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

Mit den Methoden ViewPropertyAnimator.z() und ViewPropertyAnimator.translationZ() können Sie die Höhe von Ansichten animieren. Weitere Informationen finden Sie in der API-Referenz zu ViewPropertyAnimator und im Entwicklerleitfaden zu Property-Animation.

Sie können diese Animationen auch mit einem StateListAnimator deklarativ angeben. Das ist besonders nützlich, wenn Statusänderungen Animationen auslösen, z. B. wenn Nutzende auf eine Schaltfläche tippen. Weitere Informationen finden Sie unter Änderungen des Ansichtsstatus mit StateListAnimator animieren.

Schatten und Umrisse der Ansicht anpassen

Die Grenzen des gezeichneten Hintergrunds einer Ansicht bestimmen die Standardform des Schattens. Umrisse stellen die äußere Form eines Grafikobjekts dar und definieren den Wellenbereich 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 der Hintergrund-Drawable den Umriss der Ansicht definiert. Wenn Sie einen benutzerdefinierten Umriss angeben, wird die Standardform des Schattens einer Ansicht überschrieben.

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

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

Mit den Methoden in der Klasse Outline können Sie ovale und rechteckige Umrisse mit abgerundeten Ecken erstellen. Der Standardanbieter für die Gliederung für Ansichten erhält den Umriss aus dem Hintergrund der Ansicht. Wenn Sie verhindern möchten, dass eine Ansicht einen Schatten wirft, setzen Sie den Gliederungsanbieter auf null.

Clipaufrufe

Mit der Funktion „Beschneide-Ansicht“ können Sie die Form einer Ansicht ändern. Sie können Ansichten beschneiden, um sie mit anderen Designelementen zu vereinheitlichen, 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 beschneiden. Nur Umrisse, die Rechtecke, Kreise und runde Rechtecke sind, unterstützen das Zuschneiden gemäß der Methode Outline.canClip().

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

Das Beschneiden von Ansichten ist ein aufwendiger Vorgang. Animieren Sie daher nicht die Form, die Sie zum Beschneiden einer Ansicht verwenden. Verwenden Sie dazu die Einblenden-Animation.