Android 사용자 정의 view 물결 진행 바 컨트롤 실현

사용자 정의 view 를 통 해 물방울 이 물결 면 에 떨 어 지고 물 보 라 를 튀 기 며 물결 이 흐 르 는 진도 바 컨트롤 을 실현 합 니 다.이전에 많은 물결 이 흐 르 는 진 도 를 보 았 는데 뭔 가 부족 하 다 고 느 꼈 다.그래서 물방울 이 수평면 에 떨 어 지고 물보라 가 튀 고 물이 흐 르 는 진도 효과 가 생각 나 서 직접 썼 다.효 과 는 다음 과 같 습 니 다.영상 녹화 가 좀 걸 리 고 실제 적 으로 유창 할 것 입 니 다.

용법
1.레이아웃 파일 에 WaveProgressView,circle Color 속성 은 라운드 색상,waterColor 속성 은 물결 물방울 색상,progress 속성 은 초기 진도

<com.yhongm.wave_progress_view.WaveProgressView
  android:id="@+id/wave_progress_view"
  android:layout_width="300dp"
  android:layout_height="300dp"
  android:layout_centerInParent="true"
  app:circleColor="#e38854"
  app:progress="0"
  app:waterColor="#5488e3" />

2.WaveProgressView.setProgress()방법 현재 진행 상황 설정
2.본 고가 실현 한 논리
1.물결 흐름 을 그 려 3 단계 베 어 셀 곡선 을 통 해 파형 을 그 려 waveOffsetX 와 waveOffsetY 의 값 을 끊임없이 바 꾸 어 유동 효 과 를 실현 한다.

/**
   *       
   *
   * @param begin            
   * @param waveLength      
   * @param waveOffsetX        
   * @param waveOffsetY          
   * @return
   */
  private Path getWavePath(float begin, int waveLength, int waveOffsetX, int waveOffsetY) {
    Path mPath = new Path();
    mPath.reset();
    mPath.moveTo(waveLength * begin, mCurrentHeight);
    for (int i = 0; i < mWaveCount; i++) {
      mPath.quadTo(waveLength * (begin + 0.25f) + (i * waveLength) + waveOffsetX, mCurrentHeight + waveOffsetY, (waveLength * (begin + 0.5f) + (i * waveLength) + waveOffsetX), mCurrentHeight);
      mPath.quadTo(waveLength * (begin + 0.75f) + (i * waveLength) + waveOffsetX, mCurrentHeight - waveOffsetY, (waveLength * (begin + 1f) + (i * waveLength) + waveOffsetX), mCurrentHeight);
    }
    mPath.lineTo(mWidth, mHeight);
    mPath.lineTo(0, mHeight);
    mPath.close();
    return mPath;
  } 

2.물방울 의 모양 을 그리 고 물방울 의 모양 은 삼각형 과 원호 형 으로 이 루어 져 있다.

/**
   *    Path
   *
   * @param x      x
   * @param y      y
   * @param size     
   * @return
   */
  private Path waterDrop(float x, float y, int size) {
    Path mDropPath = new Path();
    mDropPath.moveTo(x - size, y);
    mDropPath.lineTo(x, (float) (y - size * 2.5));
    mDropPath.lineTo(x + size, y);
    mDropPath.addArc(x - size, y - size, x + size, y + size, 0, 180);
    return mDropPath;
  }

3.물방울 이 물결 에 떨 어 지 는 효 과 를 그 리 는 것 은 축 Y 축 을 따라 끊임없이 물방울 을 움 직 이 는 것 이다.

/**
   *        
   *
   * @param x
   * @param y
   * @param canvas
   */
  private void drawDropByLocation(Canvas canvas, int x, int y) {
    Path mDropPath = waterDrop(x, y, 30);
    if (y == (mCurrentHeight + 50)) {
      mDropPaint.setAlpha(0);
    }
    canvas.drawPath(mDropPath, mDropPaint);
  }

4.가장 바깥쪽 양쪽 에 떨 어 지 는 물방울 을 그 려 3 단계 베 셀 곡선 을 통 해 좌우 양쪽 물방울 이 떨 어 지 는 경 로 를 모 의 하고 무 작위 로 생 성 된 물방울 이 떨 어 지 는 경 로 는 모두 이 좌우 양쪽 에 있다.

/**
   *           ，        
   *
   * @param canvas
   * @param x
   * @param y       
   */
  private synchronized void drawDropSplash(Canvas canvas, int x, int y) {
    PathMeasure mLeftPathMeasure = getOnBothSidesOfPathMeasure(x, y, true);
    PathMeasure mRightPathMeasure = getOnBothSidesOfPathMeasure(x, y, false);

    float[] mLeftPos = new float[2];
    float[] mRightPos = new float[2];
    float[] mLeftTan = new float[2];
    float[] mRightTan = new float[2];

    for (int i = 0; i < 200; i++) {
      float percent = i / 200f;
      mLeftPathMeasure.getPosTan(mLeftPathMeasure.getLength() * percent, mLeftPos, mLeftTan);
      mRightPathMeasure.getPosTan(mRightPathMeasure.getLength() * percent, mRightPos, mRightTan);
      mLeftHashMapPath.put(Math.round(mLeftPos[1]), mLeftPos[0]);
      mRightHashMapPath.put(Math.round(mRightPos[1]), mRightPos[0]);
    }

    if (mRandomHashMap.isEmpty() && mRandomHashMap.size() == 0) {
      pushRandomDrag(y);
    }
    drawRandomDrag(canvas, x, y, mLeftHashMapPath, mRightHashMapPath);

    drawOnBothSidesOfWaterDrop(canvas, mLeftPathMeasure);

    drawOnBothSidesOfWaterDrop(canvas, mRightPathMeasure);

}

/**
   *        
   *
   * @param y
   */
  private void pushRandomDrag(int y) {
    Random r = new Random();
    for (int i = 0; i < 20; i++) {
      int randomY = r.nextInt(y);
      if (mLeftHashMapPath.containsKey(randomY)) {
        Float rightValue = mRightHashMapPath.get(randomY);
        Float leftValue = mLeftHashMapPath.get(randomY);
        int roundLeftValue = Math.round(leftValue);
        int roundRightValue = Math.round(rightValue);
        if (roundRightValue == roundLeftValue) {
          roundRightValue++;
        }
        int roundMinus = Math.round(roundRightValue - roundLeftValue);//    
        float randomX = r.nextInt(roundMinus) + mLeftHashMapPath.get(randomY);//         ,          
        mRandomHashMap.put(randomX, randomY);

      }
    }
}

5.랜 덤 으로 생 성 된 물방울 이 3 단계 베 세 르 곡선 을 따라 이동 하여 떨 어 지 는 효과

/**
   *          
   *
   * @param canvas
   * @param x
   * @param y
   * @param size
   * @param randomY
   * @param randomX
   */
  private void drawSmartDropOnPath(Canvas canvas, int x, int y, int size, int randomY, float randomX) {
    Path smartDropPath = new Path();
    smartDropPath.moveTo(x, y + 50);
    if (x < randomX) {
      smartDropPath.cubicTo(x, y + 50, randomX + 30, randomY - 20, randomX, randomY);
    } else {
      smartDropPath.cubicTo(x, y + 50, randomX - 30, randomY - 20, randomX, randomY);
    }
    smartDropPath.lineTo(randomX, randomY + 150);
    PathMeasure pathMeasure = new PathMeasure();
    pathMeasure.setPath(smartDropPath, false);
    float[] pos = new float[2];
    float[] tan = new float[2];
    pathMeasure.getPosTan(pathMeasure.getLength() * mPercent, pos, tan);
    Path path = waterDrop(pos[0], pos[1], size);
    canvas.drawPath(path, mSplashPaint);
  }

전체 코드 자세 한 내용 은 클릭 하여 열기Github 프로젝트관심 있 으 면 Star 를 눌 러 주세요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.