在我的应用程序中,我想创建一个充满整个视图的涟漪。因为它不能正常工作,我创建了一个最小的示例应用程序,并在那里尝试过,但没有成功。
我的布局如下:
<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>
我的可抽性定义如下:
<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是一个视频,显示当前的情况。我希望这个圆(我认为它被正式称为热点)从中间开始增长,直到填满整个
View
。我不是说波纹的半径,这里有意识地设置为0dp。你知道我怎么做吗?编辑:最后我想达到类似this的效果。
对于每个不想阅读所有答案的人:我设法实现了它,并为此创建了一个repo。我可以在你的项目中使用这个并给我发送请求。
最佳答案
您可以通过创建自定义的RippleView来实现此效果。使用onDraw
方法在全视图上绘制圆,并将动画设置为该圆。
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++;
}
该实现是从RippleEffect Library项目中窃取的。在图书馆项目中找到完整的实现。
要仅从中心位置创建圆,请使用下面的方法
/**
* Launch Ripple animation for the current view centered at x and y position
*
* @param x Horizontal position of the ripple center
* @param y Vertical position of the ripple center
*/
public void animateRipple(final float x, final float y) {
createAnimation(x, y);
}
/**
* Create Ripple animation centered at x, y
*
* @param x Horizontal position of the ripple center
* @param y Vertical position of the ripple center
*/
private void createAnimation(final float x, final float y) {
if (this.isEnabled() && !animationRunning) {
if (hasToZoom)
this.startAnimation(scaleAnimation);
radiusMax = Math.max(WIDTH, HEIGHT);
if (rippleType != 2)
radiusMax /= 2;
radiusMax -= ripplePadding;
if (isCentered || rippleType == 1) {
this.x = getMeasuredWidth() / 2;
this.y = getMeasuredHeight() / 2;
} else {
this.x = x;
this.y = y;
}
animationRunning = true;
if (rippleType == 1 && originBitmap == null)
originBitmap = getDrawingCache(true);
invalidate();
}
}
输出:
你可以从中间画出一个圆圈,直到它填满整个视图