Android-L CardView 视觉触摸反馈

Android-L CardView Visual Touch Feedback

提问by Smiler

could anybody explain to me how to implement some of the visual touch feedback that was demonstrated at Google I/O 2014 within a CardView.

任何人都可以向我解释如何在 CardView 中实现在 2014 年 Google I/O 上展示的一些视觉触摸反馈。

Here is how I am using the CardView in XML, there is probably something small that I am missing, so I just wondered if anyone could help me?.

这是我在 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>

回答by nhaarman

API 11+:

API 11+：

Add android:foreground="?android:attr/selectableItemBackground"to your CardViewelement.

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

API 9+:

API 9+：

Add android:foreground="?selectableItemBackground"to your CardViewelement.

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

---

---

Edit: The ripple originating from the center and not from the touch point is a known bug, and has been fixed.

编辑：源自中心而非接触点的波纹是一个已知错误，已修复。

回答by GregoryK

To draw selection on pre-Lollipopand post-Lollipopcorrectly you can use the following approach (the idea is to use insetdrawable of selector with roundedcorners for pre-Lollipop - sample below uses custom colors, you can change them to default):

吸取选择前棒棒堂和后棒棒糖正确，您可以使用下面的方法（该想法是使用插图与选择的绘制圆的边角预棒棒糖-以下用途自定义颜色样本，则可以将其更改为默认值）：

android:foreground="@drawable/card_foreground"

post-Lollipop

后棒棒糖

drawable-v21/card_foreground.xml

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

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>

pre-Lollipop

前棒棒糖

drawable/card_foreground.xml (you'll need to tweak inset values according to elevation of your card)

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

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>

回答by AndyW

This helped in my case

这对我有帮助

Background:

背景：

The CardViewignores android:backgroundin favor of app:cardBackgroundwhich can only be color. The border and shadow are in fact part of the background so you cannot set your own.

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

Solution:

解决方案：

Make the layout inside the CardViewclickable instead of the card itself. You already wrote both attributes needed for this layout:

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

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

回答by Aleksey Masny

Here is my solution. It uses ripple for lollipop+ and static foreground for pre-lollipop devices.

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

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