Android按钮上的涟漪效应

Android按钮上的涟漪效应是一种用户界面设计技术，它可以为用户提供视觉反馈，提示他们触发了按钮。这种效应使界面看起来更加动态，吸引用户的注意，提高用户体验。本文将介绍涟漪效应原理及如何在Android程序中实现。

原理

涟漪效应原理基于SurfaceView类，它是一个特殊的View，可以在它上面绘制任何东西。涟漪效应的实现过程是：

• 当用户点击按钮时，获取按钮的坐标位置，并在界面上创建一个圆形的ImageView；
• 将这个ImageView的背景色设置为半透明灰色，ImageView的宽高都设置成0，并将其添加到SurfaceView上；
• 使用属性动画对ImageView进行扩展，以在短时间内填充按钮范围内。

实现

XML

设置按钮圆角及背景颜色：

<Button
   android:id="@+id/my_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:padding="10dp"
   android:text="Button"
   android:textColor="@android:color/white"
   android:background="@drawable/ripple_button"
   android:stateListAnimator="@null"
   android:backgroundTint="#4285f4"
   android:backgroundTintMode="src_in"
   android:stateListAnimator="@null"
   android:drawablePadding="8dp"/>

Ripple Button Drawable

创建drawable文件夹并添加ripple_button.xml，添加并调整圆角半径，颜色，透明度及波纹半径：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
   android:color="@color/colorAccent">
   <item>
       <shape android:shape="rectangle">
           <solid android:color="@color/colorAccent" />
           <corners android:radius="20dp" />
       </shape>
   </item>
</ripple>

Java

获取按钮并设置其点击监听器：

Button mButton = findViewById(R.id.my_button);
mButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       animateRipple(view);
   }
});

实现动画：

public void animateRipple(View view) {
   final ImageView rippleView = new ImageView(this);
   rippleView.setImageDrawable(getResources().getDrawable(R.drawable.ripple_circle));
   final RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(0, 0);
   params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
   params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
   final int x = mButton.getWidth() / 2;
   final int y = mButton.getHeight() / 2;
   params.setMargins(0, 0, mButton.getWidth() - x, mButton.getHeight() - y);
   rippleView.setLayoutParams(params);
   RelativeLayout layout = findViewById(R.id.my_layout);
   layout.addView(rippleView);
   ObjectAnimator animator = ObjectAnimator.ofObject(rippleView, "layoutParams", new RelativeLayout.LayoutParamsEvaluator(), params, getCircleParams());
   animator.setInterpolator(new AccelerateInterpolator());
   animator.setDuration(500);
   animator.start();
}

实现圆形波纹效果：

public class RippleCircleDrawable extends Drawable {

   private Paint mPaint;
   private RectF mRectF = new RectF();
   private float mRadius;

   public RippleCircleDrawable(int color) {
       mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
       mPaint.setColor(color);
       mPaint.setStyle(Paint.Style.FILL);
   }

   @Override
   public void draw(Canvas canvas) {
       mRectF.set(getBounds());
       canvas.drawCircle(mRectF.centerX(), mRectF.centerY(), mRadius, mPaint);
   }

   @Override
   public void setAlpha(int alpha) {
       mPaint.setAlpha(alpha);
   }

   @Override
   public void setColorFilter(ColorFilter colorFilter) {
       mPaint.setColorFilter(colorFilter);
   }

   @Override
   public int getOpacity() {
       return PixelFormat.TRANSLUCENT;
   }

   public void setRadius(float radius) {
       mRadius = radius;
   }

   public float getRadius() {
       return mRadius;
   }
}

结论

本文介绍了Android按钮上的涟漪效应，掌握此技能可以让你的界面看起来更加动态，吸引用户的注意，提高用户体验。