Die Android-Steuerung implementiert den Welleneffekt

Zwei Möglichkeiten, einen Welleneffekt zu erzielen

1. Durch Festlegen des Steuerthemas und der Hintergrundeigenschaften (Vordergrund).

1. Stil definieren

   <style name="Ripple">
        <item name="android:colorControlHighlight">#D8D8D8</item> <!-- 指定点击时波纹的颜色-->
        <item name="android:radius">10dp</item> <!-- 这个选项根据需要设置，指定点击时波纹的半径大小-->
    </style>

2. Stellen Sie den Welleneffekt ein.
Eigenschaften des umrandeten Welleneffekts:

?android:attr/selectableItemBackground

Randlose Welleneffekteigenschaften

?android:attr/selectableItemBackgroundBorderless

Im Allgemeinen können Sie es auf dem Attribut „android:background“ des Steuerelements festlegen. Wenn das Steuerelement das Attribut „android:background“ zum Festlegen der Hintergrundfarbe oder des Hintergrundbilds verwendet hat, Sie beim Klicken jedoch einen Welleneffekt erzielen möchten, können Sie eine Einstellung in Betracht ziehen es auf dem Attribut android:foreground. Stellen Sie den Welleneffekt ein, sodass beim Klicken auch Wellen erzeugt werden können, und hat keinen Einfluss auf die Einstellung des Steuerhintergrunds. Wenn kein Rand vorhanden ist, sind die Anzeigeeffekte für Vordergrund und Hintergrund unterschiedlich. Der Welligkeitseffekt im Vordergrund überschreitet nicht die Größe des Steuerelements, während der Hintergrund die Größe des Steuerelements, jedoch nicht die Größe des übergeordneten Steuerelements überschreitet.

3. Stellen Sie die Steuerung ein

 android:theme="@style/Ripple"
 android:background="?android:attr/selectableItemBackgroundBorderless"

Wenn das Steuerelement standardmäßig nicht anklickbar ist, mit Ausnahme von Button- und ImageButton-Steuerelementen wie TextView, ImageView usw., müssen Sie android:clickable="true" festlegen.

Zum Beispiel:

     <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:focusable="true"
                 android:theme="@style/Ripple"
                android:background="?android:attr/selectableItemBackgroundBorderless"
                android:text="Ripple" />

Durch die Kombination der Wellenstil- und Randwelleneffektattribute werden unterschiedliche Effekte erzielt, wie folgt:

     <style name="RippleNoSize">
        <item name="android:colorControlHighlight">@color/teal_200</item><!-- 指定点击时波纹的颜色-->
    </style>

    <style name="RippleSize">
        <item name="android:colorControlHighlight">@color/teal_200</item><!-- 指定点击时波纹的颜色-->
        <item name="android:radius">10dp</item> <!-- 指定点击时波纹的大小-->
    </style>

Der Wert @color/teal_200 ist eine benutzerdefinierte Farbe

2. Laden Sie die zeichnbare Datei von Ripple über den Hintergrund

1. Definieren Sie Ripple-Ressourcendateien im Zeichenverzeichnis von res, zum Beispiel: ripple_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#0ADCDD"><!--波纹的颜色 -->
</ripple>

Wenn das Element nicht festgelegt ist, entsteht ein randloser Welleneffekt.

2. Verweisen Sie auf die Ripple-Ressourcendatei im Hintergrund des Steuerelements

  android:background="@drawable/ripple_bg"

Zum Beispiel:

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_bg"
        android:gravity="center"
        android:clickable="true"
        android:padding="15dp"
        android:text="rippleStyle无边界无大小" />

Wenn das Steuerelement standardmäßig nicht anklickbar ist, mit Ausnahme von Button- und ImageButton-Steuerelementen wie TextView, ImageView usw., müssen Sie android:clickable="true" festlegen.

In der Ripple-Ressourcendatei können Sie die Elementoption verwenden, um den Randeffekt zu erzielen oder nicht.

umrandete Welle

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#0ADCDD">
    <item android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

Andere Stile können über das Element festgelegt werden, siehe Verwendung von Android L Ripple

Referenz

1. Android-Steuerungsklick, Welleneffekt (ausführliche Erklärung von Ripple)

2. Verwendung von Android L Ripple