Android-L CardView 视觉触控反馈

Question

谁能向我解释一下如何在 CardView 中实现在 Google I/O 2014 上展示的一些视觉触摸反馈。

这是我在 XML 中使用 CardView 的方式，我可能缺少一些小东西，所以我只是想知道是否有人可以帮助我？

<!-- A CardView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/CardView_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp" 
    card_view:cardCornerRadius="4dp"
    android:elevation="2dp">

    <LinearLayout
        android:id="@+id/LinearLayout_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:onClick="RunSomeMethod"">

    <!-- Main CardView Content In Here-->

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

Answer 1

API 11+：

将android:foreground="?android:attr/selectableItemBackground" 添加到您的CardView 元素中。

API 9+：

将android:foreground="?selectableItemBackground" 添加到您的CardView 元素中。

---

编辑：源自中心而非触摸点的波纹是known bug, and has been fixed。

Answer 2

要在 pre-Lollipop 和 post-Lollipop 上正确绘制选择，您可以使用以下方法 （想法是使用 inset 可绘制的具有 圆角 角的选择器，用于预棒棒糖 - 下面的示例使用自定义颜色，您可以将它们更改为默认颜色）：

android:foreground="@drawable/card_foreground"

棒棒糖后

drawable-v21/card_foreground.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#20000000"
        android:drawable="@drawable/card_foreground_selector" />

drawable-v21/card_foreground_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#18000000"/>
        </shape>
    </item>
    <item android:state_focused="true" android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
        </shape>
    </item>
</selector>

前棒棒糖

drawable/card_foreground.xml （您需要根据卡片的高度调整插入值）

<inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/card_foreground_selector"
    android:insetLeft="2dp"
    android:insetRight="2dp"
    android:insetTop="4dp"
    android:insetBottom="4dp"/>

drawable/card_foreground_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#18000000"/>
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
    <item android:state_focused="true" android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
</selector>

Answer 3

这对我有帮助

背景：

CardView 忽略 android:background 支持只能是颜色的 app:cardBackground。边框和阴影实际上是背景的一部分，因此您无法自行设置。

解决方案：

使CardView 内的布局而不是卡片本身可点击。您已经编写了此布局所需的两个属性：

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

Answer 4

这是我的解决方案。它对棒棒糖+ 使用波纹，对棒棒糖之前的设备使用静态前景。

<android.support.v7.widget.CardView
    ...
    android:foreground="?android:attr/selectableItemBackground">

Answer 5

请使用com.google.android.material.card.MaterialCardView 代替androidx.cardview.widget.CardView，这将提供开箱即用的功能。

背景：https://developer.android.com/jetpack/androidx/releases/cardview 是取代https://developer.android.com/topic/libraries/support-library/packages#v7-cardview 的新基础，材料组件https://developer.android.com/reference#other-libraries 构建在androidx.cardview 之上，使用https://material.io/components/cards/android#card anatomy 定义的前景和rippleColor ...所以请检查您是否自定义您的 ?attr/colorSurface、?attr/colorOnSurface 或 app:cardForegroundColor 设置彼此匹配的值以进行可见的更改

所以，这主要是清理“hacky 解决方案”https://stackoverflow.com/a/30192562/529977 触及基础的地方

但是：听起来像 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??