非按钮视图的Android涟漪效应+提升

时间:2015-01-28 12:32:53

标签: android android-5.0-lollipop rippledrawable android-elevation

我正在尝试向LinearLayout添加触摸反馈,这类似于API级别21中常规按钮的反馈,非常类似于this示例,并且到目前为止还没有成功。

我已经定义了一个像这样的标准波纹:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">

<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="?android:colorAccent" />
    </shape>
</item>

并使用Google提供的StateListAnimator here

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="translationZ"
        android:valueTo="@dimen/touch_raise"
        android:valueType="floatType" />
</item>
<item>
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="translationZ"
        android:valueTo="0dp"
        android:valueType="floatType" />
</item>

在定义动画师和波纹绘制后,我已将它们添加到我的LinearLayout中,如下所示:

<LinearLayout
    android:id="@+id/linearLayout"        
    android:clickable="true"
    android:focusable="true"
    android:orientation="horizontal"
    android:background="@drawable/ripple"
    android:stateListAnimator="@anim/touch_elevation">

这个想法是使用这个LinearLayout作为一个按钮,因为我插入各种类型的文本并在其中处理ImageView定位(与按钮drawables相反)更加简单。

只要视图的背景根据this问题没有透明度,就可以单独添加涟漪效果或动画。

我不确定这是否是与上述问题相关的问题,但看到标准按钮设法同时采用波纹和高程动画反馈,我认为在其他视图中也可以实现这种效果。 / p>

非常感谢对这个问题的任何见解。

2 个答案:

答案 0 :(得分:1)

使用ForegroundLinearLayout。它允许在视图的前景中放置波纹或任何其他可绘制的。与创建ForegroundRelativeLayout等相同的方法(只需将此类扩展为RelativeLayout)。

以下是stateListAnimator和波纹绘制的示例:

<your.package.ForegroundLinearLayout
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:foreground="@drawable/bg_ripple"
    android:background="#fff"
    android:clickable="true"
    android:stateListAnimator="@animator/animator_elevation">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world!"/>

</your.package.ForegroundLinearLayout>

结果:

enter image description here

编辑:ForegroundLinearLayout存在于支持设计库中。所以你可以使用 android.support.design.internal.ForegroundLinearLayout

答案 1 :(得分:0)

两个效果在涟漪项目元素中没有android:id="@android:id/mask"属性的情况下一起工作(可能此属性增加了一些透明度)。