【Android】自定义View —— 水波纹

【关键词】

水波纹 涟漪 自定义View

【问题】

• 通过自定义 View 实现点击时出现水波纹的效果；

【效果图】

【分析】

• 按下时，获取当前触摸点的坐标；
• 以当前触摸点（Action_down 和 Action_move）为圆心，不断画圆；
• 按下时开始绘制波纹，且速度较慢；
• 松开后加快绘制速度，直到结束；

【解决方案】

• 在 onDraw 中，不断地增加圆的半径，并不断地画圆，直到圆的半径达到最大值；一次画完之后，调用 postInvalidateDelayed(16); 延时重绘；
• 设一个 mSlow 变量，按下时设置为true， 松开后设置为 false， 在绘制圆的过程中根据这个变量的值来动态改变半径的增量值；

【代码】

用法
[layout - view_ripple.xml]

  
  
  
  

   
   
   
   
 
    <?xml version="1.0" encoding="utf-8"?> 
   
   
   
   
   
 
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   
   
   
   
   
 
     android:layout_width="match_parent" 
   
   
   
   
   
 
     android:layout_height="match_parent" 
   
   
   
   
   
 
     android:gravity="center" 
   
   
   
   
   
 
     android:orientation="vertical" > 
   
   
   
   
   
 
      
   
   
   
   
   
 
     <com.lyloou.android.view.RippleView 
   
   
   
   
   
 
     android:layout_margin="16dp" 
   
   
   
   
   
 
     android:layout_width="200dp" 
   
   
   
   
   
 
     android:layout_height="80dp" /> 
   
   
   
   
   
 
    </LinearLayout> 
   
  
  
  
  

[activity]

  
  
  
  

   
   
   
   
 
    @Override 
   
   
   
   
   
 
    protected void onCreate(Bundle savedInstanceState) { 
   
   
   
   
   
 
     setContentView(R.layout.view_ripple); 
   
   
   
   
   
 
     super.onCreate(savedInstanceState); 
   
   
   
   
   
 
    } 
   
  
  
  
  

源码
[view]

  
  
  
  

   
   
   
   
 
    public class RippleView extends View { 
   
   
   
   
   
 
     private Paint mPaint; 
   
   
   
   
   
 
      
   
   
   
   
   
 
     private boolean mSlow; 
   
   
   
   
   
 
     private int mCurrentR; 
   
   
   
   
   
 
     private int mCenterX = -1; 
   
   
   
   
   
 
     private int mCenterY = -1; 
   
   
   
   
   
 
      
   
   
   
   
   
 
     public RippleView(Context context) { 
   
   
   
   
   
 
     this(context, null); 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
      
   
   
   
   
   
 
     public RippleView(Context context, AttributeSet attrs) { 
   
   
   
   
   
 
     this(context, attrs, 0); 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
      
   
   
   
   
   
 
     public RippleView(Context context, AttributeSet attrs, int defStyleAttr) { 
   
   
   
   
   
 
     super(context, attrs, defStyleAttr); 
   
   
   
   
   
 
     mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
      
   
   
   
   
   
 
      
   
   
   
   
   
 
     @Override 
   
   
   
   
   
 
     public boolean onTouchEvent(MotionEvent event) { 
   
   
   
   
   
 
     switch (event.getAction()) { 
   
   
   
   
   
 
     case MotionEvent.ACTION_DOWN: 
   
   
   
   
   
 
     mCenterX = (int) event.getX(); 
   
   
   
   
   
 
     mCenterY = (int) event.getY(); 
   
   
   
   
   
 
     downStart(); 
   
   
   
   
   
 
     return true; 
   
   
   
   
   
 
     case MotionEvent.ACTION_MOVE: 
   
   
   
   
   
 
     mCenterX = (int) event.getX(); 
   
   
   
   
   
 
     mCenterY = (int) event.getY(); 
   
   
   
   
   
 
     break; 
   
   
   
   
   
 
     case MotionEvent.ACTION_UP: 
   
   
   
   
   
 
     upEnd(); 
   
   
   
   
   
 
     break; 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
     return super.onTouchEvent(event); 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
      
   
   
   
   
   
 
     private void downStart() { 
   
   
   
   
   
 
     mSlow = true; 
   
   
   
   
   
 
     mCurrentR = 0; 
   
   
   
   
   
 
     postInvalidate(); 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
      
   
   
   
   
   
 
     private void upEnd() { 
   
   
   
   
   
 
     mSlow = false; 
   
   
   
   
   
 
     postInvalidate(); 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
      
   
   
   
   
   
 
      
   
   
   
   
   
 
      
   
   
   
   
   
 
     @Override 
   
   
   
   
   
 
     protected void onDraw(Canvas canvas) { 
   
   
   
   
   
 
     // 画背景 
   
   
   
   
   
 
     canvas.drawColor(Color.DKGRAY); 
   
   
   
   
   
 
      
   
   
   
   
   
 
     int maxR = Math.max(getWidth(), getHeight()); 
   
   
   
   
   
 
      
   
   
   
   
   
 
     boolean isInit = mCenterX ==-1 && mCenterY == -1; 
   
   
   
   
   
 
     if (!isInit && mCurrentR < maxR) { 
   
   
   
   
   
 
     int unit = mSlow ? maxR / 200 : maxR / 10; 
   
   
   
   
   
 
     mCurrentR = mCurrentR + unit; 
   
   
   
   
   
 
     // 颜色透明度随着半径的不断增加而越来越透明 
   
   
   
   
   
 
     int color = Color.argb((int) ((1-mCurrentR*1.0f/maxR)*255), 88, 120, 22); 
   
   
   
   
   
 
     mPaint.setColor(color); 
   
   
   
   
   
 
     canvas.drawCircle(mCenterX, mCenterY, mCurrentR, mPaint); 
   
   
   
   
   
 
     postInvalidateDelayed(16); 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
      
   
   
   
   
   
 
     super.onDraw(canvas); 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
    } 
   
  
  
  
  

【参考资料】

• Android L中水波纹点击效果的实现;