实际边界上的涟漪效应

Question

我创建了一个列表视图并为其项目添加了边框。

类似这样的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false"
    android:orientation="horizontal"
    android:background="@drawable/listviewborderbox"
    android:padding="10dp" >

    <LinearLayout
        android:id="@+id/sharedbyyouNameLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".70"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/sharedbyyoutext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="@string/sampletext1"
            android:textColor="@color/blackText"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/sharedbyyouselected"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="@string/sampletext2"
            android:textColor="@color/blackText"
            android:textSize="16sp"
            tools:ignore="RtlHardcoded" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/sharedbyyouLayoutforarrow"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".10"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_next"
            tools:ignore="RtlSymmetry,RtlHardcoded,ContentDescription" />
    </LinearLayout>
</LinearLayout> 

而且我在 Drawable-v21 中有这样的涟漪效应值：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white"> <item android:drawable="@color/footercolor"/> </ripple>

drawable 文件夹中的边框形状 xml 是这样的：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="@color/colorforbodybox" />
    <corners android:radius="10dip"/>
    <stroke android:width="2dip" android:color="@color/colorforborder" />
</shape>

波纹效果有效，但波纹效果显示在我绘制的边界线之外。请查看下面的图片：

如何让列表视图中的涟漪效果不越界？

Answer 1

要实现圆角波纹效果，请将您的 ripple xml 文件更改为：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@android:color/white"
    tools:targetApi="lollipop">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="10dp"/>
            <solid android:color="@color/footercolor"/>
        </shape>
    </item>

</ripple>

Answer 2

我遇到的问题是视图的角半径不是固定值，因此使用建议的 xml 对我不起作用。

无论使用什么形状，我都需要一种能够适应涟漪效应的东西......

我使用了一个简单的视图扩展：

fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { // Here you can pass the color you want for the ripple effect and assign a "default" value
    val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
    this.background = RippleDrawable(
        rippleColor, // This is the color of the effect and needs to be a ColorStateList
        this.background, // ( = content ) With this you use your view's background as the content of the ripple effect 
        this.background) // ( = mask ) With this the ripple will take the shape of the background and not "spill over". (Could be null IF you did set the previous variable "content = this.background")
}

或者，如果你想分开两层：

fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { 
    val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
    this.foreground = RippleDrawable( //Using the foreground allows you to give the view whatever background you need
        rippleColor, 
        null, //Whatever shape you put here will cover everything you've got underneath so you probably want to keep it "null"
        this.background)
}

基本上你给一个视图一个背景（在你的情况下是带边框的圆角矩形）然后你可以简单地在你的活动/片段中调用扩展：

whateverView.addRippleEffect()
//or
whateverView.addRippleEffect(R.color.red)

见：https://developer.android.com/reference/android/graphics/drawable/RippleDrawable

Answer 3

1.创建包含背景形状的 Ripple Drawable

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

    <item>
        <shape                                      //the background shape when it's not being click
            android:shape="rectangle">

            <solid
                android:color="@color/colorPrimary" />

            <corners
                android:radius="32dp" />

        </shape>

    </item>

</ripple>

2。将 Drawable 应用到视图并移除阴影

<Button
    style="?borderlessButtonStyle"                          //remove the default shadow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_button"        //here
    android:text="Sign up"
    android:textAllCaps="false"
    android:textColor="@android:color/white" />