Question

在我的应用程序中，我想创建一个填充整个视图的涟漪。因为它没有正常工作，我创建了一个最小的示例应用程序并在那里尝试但没有成功。

我的布局如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent" android:padding="16dp">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/ripple"
        android:onClick="onViewClicked" />

</LinearLayout>

我的drawable是这样定义的：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#1E88E5"
    android:radius="0dp">

    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />

</ripple>

Here是当前视频的视频。我希望这个圆圈（我认为它正式称为热点）从middel开始直到填满整个View。我不是在谈论有意识地设置为0dp的纹波半径。你有什么想法我能做到这一点吗？

编辑：最后，我希望实现this之类的内容。

对于每个不想阅读所有答案的人：我设法实现它并为此创建repo。可以在项目中自由使用，并向我发送拉取请求。

Answer 1

您可以通过创建自定义RippleView来实现此效果。使用public static double closetozero(double[] ts) { return ts.Aggregate((t1, t0) => Math.Abs(t1) > Math.Abs(t0) ? t0 : t1); }方法在全视图上绘制圆圈，并将“动画”设置为该圆圈。

onDraw

^{该实施从RippleEffect Library项目中被盗。在库项目中查找完整实现。}

要从中心位置创建圆圈，请使用以下方法

if (animationRunning) {
            canvas.save();
            if (rippleDuration <= timer * frameRate) {
                animationRunning = false;
                timer = 0;
                durationEmpty = -1;
                timerEmpty = 0;
                // There is problem on Android M where canvas.restore() seems to be called automatically
                // For now, don't call canvas.restore() manually on Android M (API 23)
                if(Build.VERSION.SDK_INT != 23) {
                    canvas.restore();
                }
                invalidate();
                if (onCompletionListener != null) onCompletionListener.onComplete(this);
                return;
            } else
                canvasHandler.postDelayed(runnable, frameRate);

            if (timer == 0)
                canvas.save();


            canvas.drawCircle(x, y, (radiusMax * (((float) timer * frameRate) / rippleDuration)), paint);

            paint.setColor(Color.parseColor("#ffff4444"));

            if (rippleType == 1 && originBitmap != null && (((float) timer * frameRate) / rippleDuration) > 0.4f) {
                if (durationEmpty == -1)
                    durationEmpty = rippleDuration - timer * frameRate;

                timerEmpty++;
                final Bitmap tmpBitmap = getCircleBitmap((int) ((radiusMax) * (((float) timerEmpty * frameRate) / (durationEmpty))));
                canvas.drawBitmap(tmpBitmap, 0, 0, paint);
                tmpBitmap.recycle();
            }

            paint.setColor(rippleColor);

            if (rippleType == 1) {
                if ((((float) timer * frameRate) / rippleDuration) > 0.6f)
                    paint.setAlpha((int) (rippleAlpha - ((rippleAlpha) * (((float) timerEmpty * frameRate) / (durationEmpty)))));
                else
                    paint.setAlpha(rippleAlpha);
            }
            else
                paint.setAlpha((int) (rippleAlpha - ((rippleAlpha) * (((float) timer * frameRate) / rippleDuration))));

            timer++;
        }

输出：

你可以获得从中间增长直到它填满整个视图的圆圈

Answer 2

可点击视图的涟漪效应


ripple effect for regular buttons will work by default in API 21, and for other
touchable views it can be achieved by specifying

    android:background="?android:attr/selectableItemBackground">

In Java CODE 

    int[] attrs = new int[]{R.attr.selectableItemBackground};
    TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
    int backgroundResource = typedArray.getResourceId(0, 0);
    myView.setBackgroundResource(backgroundResource);

按钮


Most buttons are made with several drawables. Usually you’ll have a pressed and
normal version of assets like this:

/drawable/button.xml:

<?php tag or after a closing ?>

If you have a custom button with selected state, your text color changes 
depending on the state, etc. So the default button background is not going 
to work for you here. You can add this feedback for your own drawables and 
for custom buttons by simply wrapping them in a ripple element:

/drawable-v21/button.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>
    <item android:drawable="@drawable/button_normal"/>
</selector>

使用<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:drawable="@drawable/button_normal" /> </ripple>会使涟漪与应用中的内置涟漪颜色相同。

的

如果你不喜欢默认的灰色，你可以指定你希望?android:colorControlHighlight在主题中的颜色。

android:colorControlHighlight

如果您希望纹波延伸超出视图边界，则可以使用<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorControlHighlight">@color/your_custom_color</item> </style> </resources>。这适用于作为较大视图的一部分的ImageButtons和较小的按钮：

Answer 3

试试这个我希望它为你工作

使用 android:foreground="@drawable/ripple"

而不是 android:background="@drawable/ripple"

并将android:radius="0dp"更改为50dp或100dp并检查

使波纹填满整个视图

3 个答案:

可点击视图的涟漪效应