Android Lollipop CardView 上的波紋效果

Question

我試圖讓CardView時，通過設置在Android觸摸顯示連鎖反應：活動XML文件中backgound屬性描述 這里Android開發者頁面上，但它不工作。 根本沒有動畫，但是調用了 onClick 中的方法。 我還嘗試按照此處的建議創建一個ripple.xml 文件，但結果相同。

CardView 出現在活動的 XML 文件中：

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="155dp"
    android:layout_height="230dp"
    android:elevation="4dp"
    android:translationZ="5dp"
    android:clickable="true"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:onClick="showNotices"
    android:background="?android:attr/selectableItemBackground"
    android:id="@+id/notices_card"
    card_view:cardCornerRadius="2dp">

</android.support.v7.widget.CardView> 

我對 android 開發比較陌生，所以我可能犯了一些明顯的錯誤。

Answer 1

您應該將以下內容添加到CardView ：

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

Answer 2

將這兩行代碼添加到您的 xml 視圖中，以在您的 cardView 上產生漣漪效果。

android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"

Answer 3

我設法通過以下方式對 cardview 產生了連鎖反應：

<android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    android:clickable="true" 
    android:foreground="@drawable/custom_bg"/>

對於您可以在上面的代碼中看到的 custom_bg，您必須為棒棒糖（在 drawable-v21 包中）和棒棒糖預制（在可繪制包中）設備定義一個 xml 文件。 對於 drawable-v21 包中的 custom_bg，代碼是：

<ripple 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
<item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"/>
</ripple>

對於 drawable 包中的 custom_bg，代碼為：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true">
    <shape>
        <solid android:color="@color/colorHighlight"></solid>
    </shape>
</item>
<item>
    <shape>
        <solid android:color="@color/navigation_drawer_background"></solid>
    </shape>
</item>
</selector>

因此，在棒棒糖之前的設備上，您將獲得穩定的點擊效果，而在棒棒糖設備上，您將在 cardview 上產生漣漪效應。

Answer 4

您正在使用的 appcompat 支持庫中省略了漣漪效應。 如果您想查看漣漪效果，請使用 Android L 版本並在 Android L 設備上進行測試。 根據 AppCompat v7 站點：

“為什么在 Lollipop 之前沒有漣漪？讓 RippleDrawable 順利運行的很多因素是 Android 5.0 的新 RenderThread。為了優化以前版本的 Android 的性能，我們暫時不使用 RippleDrawable。”

在此處查看此鏈接以獲取更多信息

Answer 5

如果您正在使用的應用程序minSdkVersion是 9 級，您可以使用：

android:foreground="?selectableItemBackground"
android:clickable="true"

相反，從第 11 級開始，您可以使用：

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

從文檔：

clickable - 定義此視圖是否對單擊事件做出反應。 必須是布爾值，“true”或“false”。

前景- 定義可繪制內容以繪制內容。 這可以用作疊加層。 如果重力設置為填充，則前景可繪制對象參與內容的填充。

Answer 6

對我來說，將foreground添加到CardView不起作用（原因未知：/）

將相同的內容添加到它的子布局中就可以了。

代碼：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:focusable="true"
    android:clickable="true"
    card_view:cardCornerRadius="@dimen/card_corner_radius"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:id="@+id/card_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:foreground="?android:attr/selectableItemBackground"
        android:padding="@dimen/card_padding">

    </LinearLayout>
</android.support.v7.widget.CardView>

Answer 7

改用 Material Cardview，它擴展了 Cardview 並提供了多種新功能，包括默認的可點擊效果：

<com.google.android.material.card.MaterialCardView>

...

</com.google.android.material.card.MaterialCardView>

依賴（最多可用於 API 14 以支持舊設備）：

implementation 'com.google.android.material:material:1.0.0'

Answer 8

將這兩行代碼添加到按鈕、線性布局或 CardView 等任何視圖中就像一個魅力一樣只需放這兩行就可以看到魔術......

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

Answer 9

android Cardview控件的波紋事件：

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:layout_marginBottom="4dp"
    android:layout_marginTop="4dp" />

Answer 10

如果有像RelativeLayout 或LinearLayout 這樣的根布局包含CardView 中所有適配器項的組件，則必須在該根布局中設置背景屬性。 喜歡：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
card_view:cardCornerRadius="4dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/touch_bg"/>
</android.support.v7.widget.CardView>

Answer 11

對於那些在 RecyclerView 中顯示的以編程方式創建的 CardView（或在我的案例中擴展 CardView 的自定義視圖）上無法解決漣漪效應問題的解決方案的人，以下內容對我有用。 基本上，在 XML 布局文件中以聲明方式聲明其他答案中提到的 XML 屬性似乎不適用於以編程方式創建的 CardView 或從自定義布局創建的布局（即使根視圖是 CardView 或使用合並元素），所以它們必須像這樣以編程方式設置：

private class MadeUpCardViewHolder extends RecyclerView.ViewHolder {
    private MadeUpCardView cardView;

    public MadeUpCardViewHolder(View v){
        super(v);

        this.cardView = (MadeUpCardView)v;

        // Declaring in XML Layout doesn't seem to work in RecyclerViews
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            int[] attrs = new int[]{R.attr.selectableItemBackground};
            TypedArray typedArray = context.obtainStyledAttributes(attrs);
            int selectableItemBackground = typedArray.getResourceId(0, 0);
            typedArray.recycle();

            this.cardView.setForeground(context.getDrawable(selectableItemBackground));
            this.cardView.setClickable(true);
        }
    }
}

MadeupCardView extends CardView Kudos MadeupCardView extends CardView到TypedArray部分的這個答案。

Answer 12

將以下內容添加到您的 xml：

android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"

並添加到您的適配器（如果是您的情況）

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            val attrs = intArrayOf(R.attr.selectableItemBackground)
            val typedArray = holder.itemView.context.obtainStyledAttributes(attrs)
            val selectableItemBackground = typedArray.getResourceId(0, 0)
            typedArray.recycle()

            holder.itemView.isClickable = true
            holder.itemView.isFocusable = true
            holder.itemView.foreground = holder.itemView.context.getDrawable(selectableItemBackground)
        }
    }

Answer 13

我對 AppCompat 不滿意，所以我編寫了自己的 CardView 並反向移植了漣漪。 它在 Galaxy S 上與 Gingerbread 一起運行，所以這絕對是可能的。

有關更多詳細信息，請查看源代碼。

Answer 14

  android:foreground="?android:attr/selectableItemBackgroundBorderless"
   android:clickable="true"
   android:focusable="true"

僅適用於 api 21 並使用此不使用此列表行卡視圖