1. 从一次按钮反馈的细节说起
做Android开发的朋友大概都遇到过这样的场景：产品经理拿着手机，指着某个按钮说“点下去怎么一点反应都没有，感觉像卡住了”。其实代码逻辑早就跑通了，接口也调了，页面也跳了，但用户就是觉得“没反应”。问题出在哪儿？出在视觉反馈上。
Android从5.0（API 21）开始引入了Material Design，其中有一个非常经典且至今仍在广泛使用的交互反馈机制——点击水波纹（Ripple）。手指按下去的一瞬间，以触点为中心，一圈半透明的波纹向外扩散，松手后波纹淡出。这个效果看似简单，但它解决的是一个非常本质的问题：让用户确认“我点到了”。
这篇内容适合两类人看：一类是刚接触Android UI开发、想搞清楚水波纹到底怎么配的新手；另一类是用过Ripple但遇到各种“不生效”“被裁剪”“颜色不对”问题的开发者。我会从系统自带的水波纹机制讲起，把它的工作原理、配置方式、常见坑点全部拆开，然后手把手带你写一个自定义的水波纹控件，让你在系统Ripple满足不了需求的时候有替代方案。
关键词就三个：Android点击水波纹、RippleDrawable、自定义水波纹控件。围绕这三个词，我们把这件事彻底讲透。
2. 系统自带水波纹的三种配置方式与底层逻辑
2.1 水波纹的本质是一个Drawable
很多人以为水波纹是某个View自带的动画，其实不是。水波纹在Android里的本质是一个Drawable——具体来说，是RippleDrawable。它继承自LayerDrawable，内部维护了一个波纹层和一个内容层。当你把它设置为某个View的背景时，View在接收到触摸事件后会把触摸坐标传给Drawable，Drawable根据坐标计算出波纹的圆心，然后驱动一个半径从0到最大值的动画。
理解这一点非常关键，因为它意味着：任何有背景的View都可以有水波纹，不限于Button。TextView、LinearLayout、ConstraintLayout、甚至自定义View，只要背景设成了RippleDrawable，就能有水波纹效果。
系统提供了三种常见的使用方式，我逐个说。
2.2 方式一：使用?attr/selectableItemBackground
这是最省事的方式，直接给View加一个属性：
<TextView android:layout_width="match_parent" android:layout_height="56dp" android:gravity="center" android:text="点击我" android:background="?attr/selectableItemBackground" android:clickable="true" android:focusable="true" />?attr/selectableItemBackground是主题里预定义的一个属性，它会根据当前主题自动适配。在Material主题下，它就是一个带水波纹的RippleDrawable；在更老的主题下，它可能是一个普通的StateListDrawable。这个方式的好处是不用自己定义颜色，跟随主题走，适合列表项、设置项这类通用场景。
但要注意一个坑：必须设置clickable和focusable为true，否则View不消费触摸事件，水波纹不会触发。很多人加了background发现没效果，八成是忘了这一条。
2.3 方式二：使用?attr/selectableItemBackgroundBorderless
这个和上面那个的区别在于：水波纹不受View边界裁剪，会溢出到View外面。适合ImageView图标按钮、Toolbar上的菜单项这类场景。
<ImageView android:layout_width="48dp" android:layout_height="48dp" android:src="@drawable/ic_action" android:background="?attr/selectableItemBackgroundBorderless" android:clickable="true" android:focusable="true" />Borderless的效果在圆形图标上特别好看，波纹从图标中心扩散出去，视觉上很自然。但它也有个限制：如果父容器设置了clipChildren=true（默认就是true），溢出的部分还是会被裁掉。解决办法是在父容器上设置android:clipChildren="false"，同时可能需要配合android:clipToPadding="false"。
2.4 方式三：自定义RippleDrawable
前两种方式颜色是固定的，如果你想控制水波纹的颜色、透明度、甚至指定波纹的遮罩形状，就得自己写一个drawable文件：
<!-- res/drawable/ripple_custom.xml --> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#40FFFFFF"> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="#FFFFFF" /> <corners android:radius="8dp" /> </shape> </item> </ripple>这里有几个关键点需要解释：
android:color：波纹的颜色，建议带透明度（比如#40FFFFFF表示25%不透明的白色），否则波纹会太实，看起来像色块而不是水波。<item android:id="@android:id/mask">：这是遮罩层，决定了波纹能显示的区域形状。如果不写mask，波纹会填满整个View的矩形区域；如果写了mask并且是圆角矩形，波纹就只在圆角矩形内显示。- mask里的shape颜色不重要，因为mask只取alpha通道，颜色本身不会被绘制出来。
注意：mask的id必须写成
@android:id/mask，不能自己随便起名，这是系统约定的。
2.5 三种方式的选型对照
| 方式 | 适用场景 | 颜色可控 | 是否溢出边界 | 代码量 |
|---|---|---|---|---|
| selectableItemBackground | 列表项、设置项 | 否（跟随主题） | 否 | 最低 |
| selectableItemBackgroundBorderless | 图标按钮、菜单项 | 否（跟随主题） | 是 | 最低 |
| 自定义RippleDrawable | 需要精确控制颜色/形状 | 是 | 否（可配mask） | 中等 |
选型逻辑很简单：能用系统属性就用系统属性，系统属性满足不了再自定义。不要一上来就自己写RippleDrawable，那样反而容易引入兼容性问题。
3. 水波纹不生效？先排查这五个地方
水波纹这个效果，说简单也简单，说坑也真坑。我见过太多人写了半天发现没效果，最后发现是某个不起眼的属性没设。下面这五个排查点，基本能覆盖90%的“水波纹不生效”问题。
3.1 检查clickable和focusable
这是最常见的原因。View如果没有设置android:clickable="true"，它不会消费触摸事件，自然也不会把触摸坐标传给Drawable。有些人用的是Button，Button默认clickable就是true，所以没问题；但换成TextView或LinearLayout，默认是false，就必须手动加上。
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:focusable="true" android:background="?attr/selectableItemBackground"> ... </LinearLayout>3.2 检查背景是否被覆盖
有时候你在XML里设了background，但代码里又调了一次setBackgroundColor()或者setBackgroundResource()，后面的调用会把前面的RippleDrawable覆盖掉。这种情况在RecyclerView的Adapter里特别常见，因为ViewHolder会被复用，如果不小心在bind方法里设了纯色背景，水波纹就没了。
排查方法：在onBindViewHolder里检查有没有多余的背景设置，确保RippleDrawable是最后设置的那个。
3.3 检查父容器的clipChildren
前面提到过，Borderless的水波纹会溢出View边界，但如果父容器clipChildren为true（默认值），溢出部分会被裁掉，看起来就像水波纹被切了一半。解决办法：
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:clipChildren="false" android:clipToPadding="false"> <ImageView android:layout_width="48dp" android:layout_height="48dp" android:background="?attr/selectableItemBackgroundBorderless" android:clickable="true" android:focusable="true" /> </LinearLayout>3.4 检查是否被foreground遮挡
Android的View有background和foreground两层。如果你在foreground上设了一个不透明的Drawable，它会盖住background的水波纹。这种情况常见于给View加了前景遮罩或者选中态覆盖层的时候。
排查方法：检查有没有调用setForeground()，或者XML里有没有android:foreground属性。
3.5 检查API版本兼容性
RippleDrawable是API 21引入的。如果你的minSdk低于21，在低版本设备上水波纹不会生效，会退化成普通的StateListDrawable。这不是bug，是系统限制。如果你的应用需要支持API 21以下，要么接受低版本没有水波纹，要么用第三方库做兼容。
提示：现在Google Play已经要求targetSdk至少33了，minSdk低于21的设备占比极低，大多数新项目可以直接把minSdk设到21以上，省去兼容烦恼。
4. 手写一个自定义水波纹控件
系统自带的RippleDrawable虽然好用，但它有几个限制：波纹的扩散动画是系统控制的，你没法干预；波纹只能从触点扩散，没法做多波纹叠加；波纹的颜色和透明度虽然能配，但动画曲线改不了。如果你想要更炫的效果——比如点击后多个波纹依次扩散、波纹带渐变消失、或者波纹从控件中心而不是触点扩散——就得自己写一个。
下面我带你从零写一个自定义水波纹控件。核心思路是：自定义View + 属性动画 + Canvas绘制。
4.1 定义自定义属性
先在res/values/attrs.xml里定义几个可配置的属性：
<resources> <declare-styleable name="WaveRippleView"> <attr name="rippleColor" format="color" /> <attr name="rippleMaxRadius" format="dimension" /> <attr name="rippleDuration" format="integer" /> <attr name="rippleStrokeWidth" format="dimension" /> <attr name="rippleStyle"> <enum name="fill" value="0" /> <enum name="stroke" value="1" /> </attr> </declare-styleable> </resources>这几个属性的含义：
rippleColor：波纹颜色，建议带透明度。rippleMaxRadius：波纹最大扩散半径，不设的话默认取控件宽高的较大值。rippleDuration：单次波纹动画时长，单位毫秒，默认600ms。rippleStrokeWidth：描边模式下波纹的线宽。rippleStyle：填充模式还是描边模式。
4.2 控件初始化与属性解析
public class WaveRippleView extends View { private Paint ripplePaint; private int rippleColor = 0x40FFFFFF; private float maxRadius = -1; private int duration = 600; private float strokeWidth = 4f; private int style = 0; // 0=fill, 1=stroke private float centerX, centerY; private float currentRadius = 0f; private float currentAlpha = 1f; private ValueAnimator animator; public WaveRippleView(Context context) { super(context); init(null); } public WaveRippleView(Context context, AttributeSet attrs) { super(context, attrs); init(attrs); } public WaveRippleView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(attrs); } private void init(AttributeSet attrs) { if (attrs != null) { TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.WaveRippleView); rippleColor = ta.getColor(R.styleable.WaveRippleView_rippleColor, rippleColor); maxRadius = ta.getDimension(R.styleable.WaveRippleView_rippleMaxRadius, -1); duration = ta.getInt(R.styleable.WaveRippleView_rippleDuration, duration); strokeWidth = ta.getDimension(R.styleable.WaveRippleView_rippleStrokeWidth, strokeWidth); style = ta.getInt(R.styleable.WaveRippleView_rippleStyle, 0); ta.recycle(); } ripplePaint = new Paint(Paint.ANTI_ALIAS_FLAG); ripplePaint.setColor(rippleColor); if (style == 1) { ripplePaint.setStyle(Paint.Style.STROKE); ripplePaint.setStrokeWidth(strokeWidth); } else { ripplePaint.setStyle(Paint.Style.FILL); } setClickable(true); } }这里有几个设计决策值得说明。为什么把setClickable(true)放在init里？因为自定义水波纹控件本身就是用来响应点击的，如果还要调用方手动设clickable，容易忘。为什么用Paint.ANTI_ALIAS_FLAG？因为波纹是圆形，不加抗锯齿边缘会有锯齿，看起来粗糙。
4.3 触摸事件处理与动画驱动
@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: centerX = event.getX(); centerY = event.getY(); startRippleAnimation(); return true; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: return true; } return super.onTouchEvent(event); } private void startRippleAnimation() { if (animator != null && animator.isRunning()) { animator.cancel(); } float targetRadius = maxRadius > 0 ? maxRadius : Math.max(getWidth(), getHeight()); animator = ValueAnimator.ofFloat(0f, 1f); animator.setDuration(duration); animator.setInterpolator(new DecelerateInterpolator()); animator.addUpdateListener(animation -> { float fraction = (float) animation.getAnimatedValue(); currentRadius = targetRadius * fraction; currentAlpha = 1f - fraction; invalidate(); }); animator.start(); }这里用了一个0到1的归一化值来驱动动画，而不是直接动画半径。这样做的好处是：半径和透明度可以共用同一个进度值，保证波纹扩散和淡出是同步的。插值器用了DecelerateInterpolator，让波纹一开始扩散快、后面慢下来，更接近真实水波的物理感。
4.4 onDraw绘制波纹
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (currentRadius > 0 && currentAlpha > 0) { int alpha = (int) (Color.alpha(rippleColor) * currentAlpha); int color = (rippleColor & 0x00FFFFFF) | (alpha << 24); ripplePaint.setColor(color); canvas.drawCircle(centerX, centerY, currentRadius, ripplePaint); } }注意这里对颜色的处理：先取出原始颜色的alpha值，乘以当前透明度系数，再重新组装成ARGB颜色。这样做的原因是，rippleColor本身可能就带透明度（比如#40FFFFFF），如果直接设alpha会覆盖掉原始透明度，导致颜色不对。
4.5 多波纹叠加的实现思路
上面这个版本一次只能显示一个波纹。如果你想做“点击后多个波纹依次扩散”的效果，思路是维护一个波纹列表：
private List<Ripple> rippleList = new ArrayList<>(); private static class Ripple { float centerX, centerY; float radius; float alpha; float delay; }每次点击时往列表里添加2-3个Ripple对象，每个有不同的delay。在onDraw里遍历列表，根据当前时间计算每个波纹的半径和透明度。这个方案稍微复杂一些，但效果会更炫。核心是要处理好时间基准，建议用一个long startTime记录动画开始时刻，每次onDraw时计算elapsed = System.currentTimeMillis() - startTime，再根据每个波纹的delay和duration算出各自的进度。
提示：多波纹叠加时，建议后一个波纹的初始延迟设为前一个的30%-50%，这样视觉上有层次感，不会糊成一团。
5. 性能与体验：那些文档里不会写的细节
5.1 水波纹动画的性能开销
水波纹动画本质上是一个持续invalidate的过程，每帧都要重绘。对于单个View来说开销很小，但如果在RecyclerView里每个item都有水波纹，快速滑动时可能会有掉帧风险。优化思路有几个：
- 控制波纹时长：600ms是个比较合适的值，超过800ms会感觉拖沓，低于300ms又看不清。
- 避免在onDraw里创建对象：Paint、Rect这些对象应该在init里创建好，onDraw里只做绘制。
- 使用硬件加速：Android默认开启硬件加速，圆形绘制会走GPU，性能比软件绘制好很多。如果发现水波纹卡顿，检查一下有没有在Application或Activity级别关掉了硬件加速。
5.2 水波纹颜色与主题的搭配
水波纹颜色不是随便选的。在浅色背景上，用深色波纹（比如#20000000）；在深色背景上，用浅色波纹（比如#40FFFFFF）。透明度控制在15%-30%之间比较合适，太淡了看不见，太浓了像色块。
如果你用的是Material Components主题，系统已经帮你定义好了colorControlHighlight这个属性，?attr/selectableItemBackground用的就是它。你可以通过覆盖这个属性来全局修改水波纹颜色：
<style name="AppTheme" parent="Theme.MaterialComponents.Light"> <item name="colorControlHighlight">#3000BCD4</item> </style>这样所有用?attr/selectableItemBackground的地方都会跟着变，不用一个个改。
5.3 长按与点击的冲突处理
水波纹默认在ACTION_DOWN时触发，如果用户长按，波纹会一直扩散到最大半径然后停住。这个行为在大多数场景下是合理的，但如果你同时给View设置了长按监听，可能会出现波纹和长按提示同时出现的情况。解决办法是在onTouchEvent里判断长按时间，超过阈值后取消波纹动画。
5.4 在RecyclerView中使用水波纹的注意事项
RecyclerView的item复用机制会导致一个问题：如果item A的水波纹正在播放，用户快速滑动导致item A被复用成了item B，波纹动画可能会“串”到item B上。解决办法是在onBindViewHolder里重置动画状态：
@Override public void onBindViewHolder(ViewHolder holder, int position) { holder.rippleView.cancelRipple(); // ... 其他绑定逻辑 }在自定义控件里加一个cancelRipple()方法，把animator取消掉，currentRadius归零，然后invalidate。
6. 系统Ripple与自定义控件的取舍
写到这里，系统Ripple和自定义控件两条路都讲完了。最后说说我个人的选型经验。
优先用系统RippleDrawable。它稳定、性能好、跟主题联动、代码量少。90%的场景——按钮、列表项、图标按钮——系统Ripple都能搞定，没必要自己造轮子。
什么时候需要自定义控件？三种情况：一是需要多波纹叠加、波纹从中心扩散这类系统做不到的效果；二是需要在波纹扩散过程中做额外的视觉变化（比如同时改变背景色、缩放图标）；三是需要精确控制动画曲线和时长，系统Ripple的动画参数是固定的，改不了。
自定义控件的代价是：你需要自己处理触摸事件、自己管理动画生命周期、自己处理RecyclerView复用、自己适配不同屏幕密度。这些工作量加起来不小，所以除非确实有需求，否则不建议轻易上自定义。
我在实际项目里的做法是：先用系统Ripple把交互跑通，等UI设计师提出更复杂的需求时，再针对性地替换成自定义控件。这样既保证了开发效率，又不会过度设计。
提示：如果只是想让水波纹颜色跟品牌色一致，改
colorControlHighlight就够了，不需要自定义控件。这是最容易被忽略的一个简单方案。
另外补充一个细节：自定义水波纹控件在XML里使用时，记得把android:background设为透明或者不设，否则背景色会盖住波纹。波纹是画在onDraw里的，背景是画在onDraw之前的，如果背景不透明，波纹就被盖住了。这个坑我在第一次写的时候踩过，排查了半天才发现是背景的问题。
