矩形无界波纹效应

Question

我知道，我们可以通过设置背景属性的?android:attr/selectableItemBackgroundBorderless来获得视图的无界波纹效应。

我们也可以简单地使用我们自己的纹波图来定制颜色：

<!-- An unbounded blue ripple. --/>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/blue" />

结果是一个无界的圆圈，从中心波纹到拐角开始有波纹效应。

我试着用矩形而不是圆圈来构建相同的效果，但是我从来没有找到同样的效果。例如，我尝试使用掩码视图进行以下操作：

<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>
</ripple>

更多样本：http://blog.stylingandroid.com/ripples-part-3/

结果是一个矩形，而不是unbounded。它将被限制在视图边界(如文档中对掩码的解释)，以及波纹效应是不同的(对我来说，在Android预览版中)

我想知道是否有任何解决方案，简单地构建矩形无界与默认无界波纹一样的波纹效应(正如我前面解释的)？

或者为了解决这个问题，我应该去一个自定义视图？

Answer 1

使用xml似乎是无法实现的。但是，它可以从代码中实现：

1. 通过为其附加层(内容和掩码)提供null，使波纹无界
2. 增加热点区域，使圆周波纹超出视图的更大尺寸(宽度或高度)
3. 在绘图前用矩形夹紧画布

fun View.setSelectableItemBackgroundBorderlessRectangle(
    @Px left: Int = 0,
    @Px top: Int = 0,
    @Px right: Int = 0,
    @Px bottom: Int = 0,
) {
    doOnLayout { view ->
        val bounds = Rect(-left, -top, view.width + right, view.height + bottom)

        background = object : RippleDrawable(
            ColorStateList.valueOf(getColorFromAttr(android.R.attr.colorControlHighlight)),
            null,
            null
        ) {
            override fun draw(canvas: Canvas) {
                canvas.clipRect(bounds)
                super.draw(canvas)
            }
        }.apply {
            setHotspotBounds(bounds.left, bounds.top, bounds.right, bounds.bottom)
        }
    }
}