Android实现水波纹控件的方法

概述有很多app使用过水波纹的这样的效果，看着很酷酷的样子，所以自己就撸码写了一个。

有很多app使用过水波纹的这样的效果，看着很酷酷的样子，所以自己就撸码写了一个。

实现思路：

利用贝塞尔曲线绘制圆弧（也就是水波的波纹）
通过动画改变绘制的起始点使水波纹平移

首先，定义我们需要的自定义属性。

<?xml version="1.0" enCoding="utf-8"?><resources> <declare-styleable name="waveStyleable">  <!-- 水波纹的长度-->  <attr name="waveLength" format="float"></attr>  <!-- 水波纹的高度-->  <attr name="waveHeight" format="float"></attr>  <!-- 水波纹的速度-->  <attr name="waveSpeed" format="float"></attr>  <!--水波纹上方的头像 -->  <attr name="wavetopIcon" format="reference"></attr>  <!--水波的颜色 -->  <attr name="wavecolor" format="color"></attr>  <!--水波距离底部的距离 -->  <attr name="distanceY" format="float"></attr> </declare-styleable></resources>

自定义view绘制水波纹控件

public class WaveVIEw extends VIEw { private Paint paint; private Path path; private float waveLength ; private float waveHeight ; private float waveSpeed ; private Bitmap bitmap; private int wavecolor ; private int strokeWIDth = 3; private Region region; private int wIDth,height; public int translateX ; private float distanceY; public WaveVIEw(Context context) {  super(context); } public WaveVIEw(Context context,AttributeSet attrs) {  super(context,attrs);  TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.waveStyleable);  waveLength = array.getfloat(R.styleable.waveStyleable_waveLength,300);  wavecolor = array.getcolor(R.styleable.waveStyleable_wavecolor,0x00ff00);  waveHeight = array.getfloat(R.styleable.waveStyleable_waveHeight,100);  waveSpeed = array.getfloat(R.styleable.waveStyleable_waveSpeed,5);  distanceY = array.getfloat(R.styleable.waveStyleable_distanceY,100);  Drawable wavetopICon = array.getDrawable(R.styleable.waveStyleable_wavetopIcon);  array.recycle();  bitmap = drawabletoBitmap(wavetopICon);  initPaint();  startAnimal(); } private voID initPaint() {  paint = new Paint();  paint.setStyle(Paint.Style.FILL);  paint.setcolor(wavecolor);  paint.setstrokeWIDth(strokeWIDth);  //绘制贝塞尔曲线的path  path = new Path(); } @OverrIDe protected voID onDraw(Canvas canvas) {  super.onDraw(canvas);  //绘制贝塞尔曲线  drawPath(canvas,path);  //绘制wave上部的头像  drawIcon(canvas); } private voID drawIcon(Canvas canvas) {  float baseline = height-distanceY;  if(region.getBounds().top==baseline){   canvas.drawBitmap(bitmap,wIDth/2-bitmap.getWIDth()/2,region.getBounds().bottom-bitmap.getHeight(),paint);  }else {   if(region.getBounds().top==0){    canvas.drawBitmap(bitmap,height-bitmap.getHeight()-distanceY,paint);   }   canvas.drawBitmap(bitmap,region.getBounds().top-bitmap.getHeight(),paint);  } } private voID drawPath(Canvas canvas,Path path) {  path.reset();  //path的起始点，向手机外多绘制一段  path.moveto(-2* waveLength +translateX,getHeight()-distanceY);  for(int i = 0; i<getWIDth()+ waveLength; i+= waveLength){   path.rQuadTo(waveLength /2,-waveHeight,waveLength,0);   path.rQuadTo(waveLength /2,waveHeight,0);  }  region = new Region();  Region clip = new Region();  clip.set((int) (getWIDth()/2-0.1),getWIDth()/2,getHeight()*2);  region.setPath(path,clip);  path.lineto(getWIDth(),getHeight());  path.lineto(-waveLength,getHeight());  path.close();  canvas.drawPath(path,paint); } public voID startAnimal(){  ValueAnimator animator = ValueAnimator.offloat(0,1);  animator.setDuration(3000);  animator.setRepeatCount(ValueAnimator.INFINITE);  animator.setInterpolator(new linearInterpolator());  animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {   @OverrIDe   public voID onAnimationUpdate(ValueAnimator animation) {    translateX += waveSpeed;    if(-2* waveLength +translateX >= 0){     translateX = 0;    }    postInvalIDate();   }  });  animator.start(); } @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {  super.onMeasure(wIDthMeasureSpec,heightmeasureSpec);  //获取宽高模式  int wIDthMode = MeasureSpec.getMode(wIDthMeasureSpec);  int heightmode = MeasureSpec.getMode(heightmeasureSpec);  wIDth = MeasureSpec.getSize(wIDthMeasureSpec);  height = MeasureSpec.getSize(heightmeasureSpec);  if (wIDthMode == MeasureSpec.AT_MOST){   wIDth = (int) waveLength;  }  if(heightmode == MeasureSpec.AT_MOST){   height = (int) (waveHeight+ distanceY+bitmap.getHeight());  }  setMeasuredDimension(wIDth,height); } /**  * dp转化为px  * @param dpValue  * @param context  * @return  */ public float dp2px(float dpValue,Context context){  return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpValue,context.getResources().getdisplayMetrics()); } /**  * 如果图片底部有很多空白会导致图片不能贴到波纹底部  * @param bitmap  * @return  */ public Bitmap makeRoundCorner(Bitmap bitmap) {  int wIDth = bitmap.getWIDth();  int height = bitmap.getHeight();  int left = 0,top = 0,right = wIDth,bottom = height;  float roundPx = height/2;  if (wIDth > height) {   left = (wIDth - height)/2;   top = 0;   right = left + height;   bottom = height;  } else if (height > wIDth) {   left = 0;   top = (height - wIDth)/2;   right = wIDth;   bottom = top + wIDth;   roundPx = wIDth/2;  }  Bitmap output = Bitmap.createBitmap(wIDth,height,Bitmap.Config.ARGB_8888);  Canvas canvas = new Canvas(output);  int color = 0xff424242;  Paint paint = new Paint();  Rect rect = new Rect(left,top,right,bottom);  RectF rectF = new RectF(rect);  paint.setAntiAlias(true);  canvas.drawARGB(0,0);  paint.setcolor(color);  canvas.drawRoundRect(rectF,roundPx,paint);  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  canvas.drawBitmap(bitmap,rect,paint);  return output; } public Bitmap drawabletoBitmap(Drawable drawable) {  Bitmap bitmap = Bitmap.createBitmap(    drawable.getIntrinsicWIDth(),drawable.getIntrinsicHeight(),drawable.getopacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888      : Bitmap.Config.RGB_565);  Canvas canvas = new Canvas(bitmap);  drawable.setBounds(0,drawable.getIntrinsicWIDth(),drawable.getIntrinsicHeight());  drawable.draw(canvas);  return makeRoundCorner(bitmap); }}

相关类：

Path： 可以绘制二次曲线或者三次曲线到画布上，moveto()方法将path移动到手机屏幕的（-2* waveLength，distanceY）这个点，然后以这个点为起始点绘制二次曲线曲线，rQuadTo（），以最后点为相对位置点进行取点绘制。在属性动画里面，不断改变起始点的位置，这样绘制的水波纹就会平移。

Region：表示区域的类，通过set(path,rect)可以获取到矩形区域与path弧线相交的新的矩形。如果rect的宽度无限小，那么获取的矩形区域会近似为一个点，这个点就是图片移动的y坐标。

xml文件使用：

<relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:tools="http://schemas.androID.com/tools" androID:ID="@+ID/activity_main" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" tools:context="com.iwintrue.waveapplication.MainActivity"> <com.iwintrue.waveapplication.WaveVIEw xmlns:app="http://schemas.androID.com/apk/res-auto" app:waveLength = "200" app:waveHeight = "50" app:waveSpeed = "10" app:wavecolor = "#0ff" app:distanceY = "100" app:wavetopIcon = "@mipmap/icon" androID:layout_centerInParent="true" androID:ID="@+ID/waterVIEw" androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:background="#f00" /></relativeLayout>

核心代码就是这么多，代码中也有解释，关键的类也做了注解了。要是还有那里有疑问，多多交流哈

github地址：https://github.com/zhoukai1526/WaveApplication

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android实现水波纹控件的方法全部内容，希望文章能够帮你解决Android实现水波纹控件的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。