androidx.cardview.widget.CardView 的涟漪效应

Question

我想在点击卡片视图时添加涟漪效果，奇怪的是它没有出现？

这里可能有什么问题？

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="6dp"
    card_view:contentPadding="5dp"
    card_view:cardElevation="4dp"
    card_view:cardMaxElevation="6dp"
    app:ignore="NamespaceTypo"> 


</androidx.cardview.widget.CardView>

// 我有一个线性布局，在 cardview 中有三个 textview。

回收站视图：

<LinearLayout
        android:id="@+id/cardViewLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:visibility="gone">

        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/cardList"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    </LinearLayout>

谢谢！

Answer 1

不要在 CardView 中使用任何 background/foreground。如果您当时使用任何背景颜色，则只需添加 app:cardBackgroundColor="@color/cardBackgroundColor。从 CardView 中删除任何 padding。在项目之间使用 margin 表示 space。

现在，对于 CardView 中的涟漪效应，只需在 CardView 中立即添加一个 child 布局。 设置 android:background="?attr/selectableItemBackground" 在 child 布局中。如果需要，在 child 中添加任何必要的 padding/margin。

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    card_view:cardCornerRadius="6dp"
    card_view:cardElevation="4dp"
    card_view:cardMaxElevation="6dp"
    app:ignore="NamespaceTypo"> 

        <!-- Child Layout -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="?attr/selectableItemBackground"
            android:orientation="vertical">

            <!-- Your content here -->
        </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Answer 2

请使用 com.google.android.material.card.MaterialCardView 以支持 androidx.cardview.widget.CardView，这将使该功能开箱即用。

背景：https://developer.android.com/jetpack/androidx/releases/cardview is the new base superseding https://developer.android.com/topic/libraries/support-library/packages#v7-cardview and Material Components https://developer.android.com/reference#other-libraries are build on top of androidx.cardview using foreground and rippleColor as defined per https://material.io/components/cards/android#card 解剖结构...所以请检查您是否自定义了 ?attr/colorSurface、?attr/colorOnSurface 或 app:cardForegroundColor 以设置相互匹配的值以获得可见变化

但是：听起来好像有新的问题，比如 https://github.com/material-components/material-components-android/issues/1095 ‍♂️ 而且代码文档似乎有点奇怪 https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/card/MaterialCardView.java#L303

Answer 3

现有的CardView没有波纹效果，使用MaterialCardView有波纹效果。

这里是 MaterialCardView 的示例代码

<com.google.android.material.card.MaterialCardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="100dp"
        android:layout_height="115dp"
        app:cardCornerRadius="6dp"
        app:cardElevation="6dp"
        android:id="@+id/myCard"
        android:clickable="true"
        android:focusable="true">

<!-- Your child layout -->

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

androidx.cardview.widget.CardView 的涟漪效应

Ripple Effect on androidx.cardview.widget.CardView

android

android-cardview