小編給大家分享一下Android如何實(shí)現(xiàn)水波紋控件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的成都網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有淥口免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

有很多app使用過水波紋的這樣的效果，看著很酷酷的樣子，所以自己就擼碼寫了一個(gè)。

實(shí)現(xiàn)思路：

利用貝塞爾曲線繪制圓弧（也就是水波的波紋）
通過動(dòng)畫改變繪制的起始點(diǎn)使水波紋平移

首先，定義我們需要的自定義屬性。

自定義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,width/2-bitmap.getWidth()/2,height-bitmap.getHeight()-distanceY,paint);
   }
   canvas.drawBitmap(bitmap,width/2-bitmap.getWidth()/2,region.getBounds().top-bitmap.getHeight(),paint);
  }
 }

 private void drawPath(Canvas canvas, Path path) {

  path.reset();
  //path的起始點(diǎn)，向手機(jī)外多繪制一段
  path.moveTo(-2* waveLength +translateX,getHeight()-distanceY);
  for(int i = 0; i= 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轉(zhuǎn)化為px
  * @param dpValue
  * @param context
  * @return
  */

 public float dp2px(float dpValue,Context context){
  return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpValue,context.getResources().getDisplayMetrics());
 }

 /**
  * 如果圖片底部有很多空白會(huì)導(dǎo)致圖片不能貼到波紋底部
  * @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, 0, 0);
  paint.setColor(color);
  canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  canvas.drawBitmap(bitmap, rect, 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, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

  drawable.draw(canvas);

  return makeRoundCorner(bitmap);

 }

}

相關(guān)類：

Path： 可以繪制二次曲線或者三次曲線到畫布上，moveTo()方法將path移動(dòng)到手機(jī)屏幕的（-2* waveLength，distanceY）這個(gè)點(diǎn)，然后以這個(gè)點(diǎn)為起始點(diǎn)繪制二次曲線曲線，rQuadTo（），以最后點(diǎn)為相對(duì)位置點(diǎn)進(jìn)行取點(diǎn)繪制。在屬性動(dòng)畫里面，不斷改變起始點(diǎn)的位置，這樣繪制的水波紋就會(huì)平移。

Region：表示區(qū)域的類，通過set(path,rect)可以獲取到矩形區(qū)域與path弧線相交的新的矩形。如果rect的寬度無限小，那么獲取的矩形區(qū)域會(huì)近似為一個(gè)點(diǎn)，這個(gè)點(diǎn)就是圖片移動(dòng)的y坐標(biāo)。

xml文件使用：

以上是“Android如何實(shí)現(xiàn)水波紋控件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！