Schatten und Zuschnittsansichten erstellen

Schreiben Sie jetzt

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen

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

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

Die Höhe einer Ansicht, dargestellt durch die Eigenschaft Z, bestimmt die Höhe visuelle Darstellung des Schattens. Ansichten mit höheren Z-Werten werden größer, Schatten werden weicher und sie verdecken Ansichten mit niedrigeren Z-Werten. Die Z-Wert einer Ansicht keinen Einfluss auf die Größe der Ansicht hat.

</ph> <ph type="x-smartling-placeholder">

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

Die Höhe ist auch nützlich, um Animationen zu erstellen, bei denen sich Widgets vorübergehend öffnen. über der Ansichtsebene.

Weitere Informationen finden Sie unter Höhe 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.

</ph> <ph type="x-smartling-placeholder">

Um die Standardhöhe einer Ansicht (Ruhe) festzulegen, verwenden Sie die android:elevation-Attribut im XML-Layout. So legen Sie die Höhe fest: im Code einer Aktivität einfügen, verwenden Sie View.setElevation() .

Um die Übersetzung einer Ansicht festzulegen, verwenden Sie die Methode View.setTranslationZ() .

Die ViewPropertyAnimator.z() und ViewPropertyAnimator.translationZ() können Sie die Höhe von Ansichten animieren. Weitere Informationen finden Sie in der API-Referenz für ViewPropertyAnimator und die Property Animations-Entwicklerleitfaden.

Sie können auch einen StateListAnimator um diese Animationen deklarativ anzugeben. Dies ist besonders nützlich für Situationen, in denen Zustandsänderungen Animationen auslösen, z. B. wenn die Nutzenden auf eine Schaltfläche tippen. Weitere Informationen finden Sie unter Ansicht animieren StateListAnimator aktualisiert.

Schatten und Umrisse der Ansicht anpassen

Die Grenzen des Hintergrund-Drawables einer Ansicht bestimmen die Standardform der Schatten. Umrisse stellen die äußere Form eines Grafikobjekts dar. den Wellenbereich für das Berührungsfeedback definieren.

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 definiert den Umriss der Ansicht. Mit einer benutzerdefinierten Gliederung wird die Standardstruktur überschrieben Form des Schattens einer Ansicht.

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

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

Sie können ovale und rechteckige Umrisse mit abgerundeten Ecken erstellen, indem Sie die in der Outline . Der Standardanbieter für die Gliederung für Ansichten erhält die Gliederung aus dem im Hintergrund angezeigt. Um zu verhindern, dass eine Ansicht einen Schatten wirft, legen Sie deren Outline-Anbieter auf null.

Clipaufrufe

Mit der Funktion „Beschneide-Ansicht“ können Sie die Form einer Ansicht ändern. Sie können Clipaufrufe für Einheitlichkeit mit anderen Designelementen oder die Änderung der Form einer Ansicht auf Nutzereingaben reagieren. Mit den Schaltflächen View.setClipToOutline() . Nur Umrisse in Form von Rechtecken, Kreisen und runden Rechtecken werden unterstützt. von Anzeigen mit Outline.canClip() .

Um eine Ansicht auf die Form eines Drawable zu kürzen, legen Sie das Drawable als wie im vorherigen Beispiel gezeigt, und rufen Sie die Methode View.setClipToOutline().

Das Erstellen von Ausschnitten ist ein kostspieliger Vorgang. Animieren Sie die verwendete Form daher nicht. um eine Ansicht zuzuschneiden. Um diesen Effekt zu erzielen, verwenden Sie Anzeigen Animation