Android水波紋載入控件CircleWaterWaveView使用詳解

一、效果圖

十載專業(yè)網(wǎng)站制作公司歷程，堅持以創(chuàng)新為先導(dǎo)的網(wǎng)站服務(wù)，服務(wù)超過上千企業(yè)及個人，涉及網(wǎng)站設(shè)計、手機(jī)APP定制開發(fā)、微信開發(fā)、平面設(shè)計、互聯(lián)網(wǎng)整合營銷等多個領(lǐng)域。在不同行業(yè)和領(lǐng)域給人們的工作和生活帶來美好變化。

Android水波紋載入控件CircleWaterWaveView使用詳解

本控件已上傳Github，歡迎Star和Fork，項目地址：CircleWaterWaveView

二、設(shè)計思路

觀察效果圖，可以看出，該自定義控件由三個部分構(gòu)成：外圓、內(nèi)圓、正弦曲線。他們的關(guān)系如下圖：

Android水波紋載入控件CircleWaterWaveView使用詳解

因為控件是動態(tài)的，所以我們需要一個線程去不停地繪制，所以我選擇了SurfaceView來作為該控件地父類。該控件地核心是如何去繪制波浪，我采用如下的思路來進(jìn)行內(nèi)圓下部地繪制。利用內(nèi)圓與正弦曲線地交集，來繪制。 

Android水波紋載入控件CircleWaterWaveView使用詳解

核心代碼如下：

/**
 * 繪制圖像
 *
 * @author luxun
*/
  private void drawCanvas(Canvas canvas) {
    if (canvas == null)
      return;
    //畫背景圓圈
    canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
    canvas.drawCircle(mCenterPoint.x, mCenterPoint.y, mOutRadius, mOutCirclePaint);
    canvas.drawCircle(mCenterPoint.x, mCenterPoint.y, mRadius, mCirclePaint);
    if (mStart) {
      //計算正弦曲線的路徑
      int mH = mCenterPoint.y + mRadius - mCurrentHight;
      int length = 2 * mOutRadius;
      Path path = new Path();
      path.moveTo(0, mH);
      for (int i = 0; i < length; i++) {
        int x = i;
        int y = (int) (Math.sin(Math.toRadians(x + mTranX) / amplitude) * mRadius / increase);
        path.lineTo(x, mH + y);
      }
      path.lineTo(length, mH);
      path.lineTo(length, mCenterPoint.y + mRadius);
      path.lineTo(0, mCenterPoint.y + mRadius);
      path.lineTo(0, mH);
      canvas.save();//保存畫布狀態(tài)
      //這里與圓形取交集，除去正弦曲線多畫的部分
      Path pc = new Path();
      pc.addCircle(mCenterPoint.x, mCenterPoint.y, mRadius, Path.Direction.CCW);
      canvas.clipPath(pc, Region.Op.INTERSECT);//切割畫布
      canvas.drawPath(path, mWaterPaint);
      //繪制文字
      canvas.drawText(flowNum + "%", mCenterPoint.x, mCenterPoint.y + mTextSise / 2, mTextPaint);
      canvas.restore();//恢復(fù)畫布狀態(tài)
    }
  }

三、性能優(yōu)化

繪制線程如下：

 /**
   * 繪制界面的線程
   *
   * @author luxun
 */
  private class RenderThread implements Runnable {
    @Override
    public void run() {
      // 不停繪制界面，這里是異步繪制，不采用外部通知開啟繪制的方式，水波根據(jù)數(shù)據(jù)更新才會開始增長
      while (isDrawing) {
        if (mWaterTaget > mCurrentHight) {
          mCurrentHight = mCurrentHight + mUpSpeed;
          if (mWaterTaget <= mCurrentHight) {
            mCurrentHight = mWaterTaget;
          }
        }
        if (mStart) {
          if (mTranX > mRadius) {
            mTranX = 0;
          }
          mTranX -= mWaterSpeed;
        }
        drawUI();
        SystemClock.sleep(25);//控制刷新速率，減少cpu占用
      }
    }
  }

通過為SurfaceHolder添加監(jiān)聽，來控制繪制線程。當(dāng)控件被隱藏不在前臺顯示時，自動結(jié)束繪制線程，當(dāng)控件顯示在前臺時，再次開啟繪制。

@Override
  public void surfaceCreated(SurfaceHolder surfaceHolder) {
    isDrawing = true;
    new Thread(renderThread).start();
  }

  @Override
  public void surfaceChanged(SurfaceHolder surfaceHolder, int format, int width, int height) {
    int minLength = Math.min(width, height);
    mOutRadius = minLength / 2;
    mRadius = (int) (0.5 * (minLength - mOutStrokeWidth));
    mCenterPoint = new Point(minLength / 2, minLength / 2);
    if (progress != 0) {
      setProgress(progress);
    }
  }

  @Override
  public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
    isDrawing = false;
  }

四、屬性化

部分設(shè)置屬性，除了通過代碼設(shè)置外，同時也加入了在XML文件中，直接以屬性賦值的操作。

app:textColor="#00ff00"
app:waterColor="#00ff00"
app:strokeColor="#00ff00"
app:backgroudColor="#00ff00"
app:amplitude="1.0"[水波振幅]
app:max="1000"
app:progress="500"
app:increase="6.0"[水波漲幅]
app:upSpeed="3"[上漲速度]
app:waterSpeed="8"[移動速度]
app:strokeSize="4dp"
app:textSize="20dp"

五、后記

代碼已經(jīng)上傳Github，歡迎有興趣的朋友去看看。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：Android水波紋載入控件CircleWaterWaveView使用詳解
文章起源：http://muchs.cn/article6/gpgjig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站營銷、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、商城網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名