Android 사용자 정의 WaveProgressView 물결 무늬 로드 수요 실현

효과 그림 먼저 보기:

프로젝트 의 로고 그림 으로 정의 할 수 있 습 니 다.물결 색상,파장,파장,글꼴 크기,색상,진도 바 의 최대 치 를 설정 할 수 있 습 니 다.현재 진도 치 는 파문 진동 속도 도 설정 할 수 있 습 니 다.진도 가 변 하지 않 을 때 열 었 을 때 애니메이션 이 채 워 진 효과 가 있 습 니 다(예 를 들 어 두 번 째 데이터 표시,여기 그림 이 이 효 과 를 캡 처 하지 않 았 습 니 다).
　　 원본 주소
1.어떻게 사용
1.1 레이아웃 파일 에서
사용자 정의 컨트롤 추가:

<cn.fanrunqi.waveprogressview.WaveProgressView
 android:id="@+id/waveProgressbar"
 android:background="@drawable/circle"
 <!--android:background="@drawable/bg_a"-->
 android:layout_width="130dp"
 android:layout_height="130dp" />

설명,여기 안 드 로 이 드:background 는 컨트롤 의 모양 을 정의 합 니 다.예 를 들 어 위의 원형 과 미녀 는 shape.xml 로 모양 그림 을 정의 할 수 있 습 니 다.
예 를 들 면,이것 은 원 이다.

<?xml version="1.0" encoding="utf-8"?>
<shape
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <solid android:color="#DDDDDD"/>
 <size android:width="150dp"
 android:height="150dp"/>
</shape>

android:background 에 그림 을 직접 설정 할 수도 있 습 니 다.예 를 들 어:
　
투명 픽 셀 을 주의 하고 그림 크기 를 조정 할 때 변형 되 지 않도록 배경(그림 이 든 도형 이 든)을 정사각형 으로 권장 합 니 다.
1.2 코드 에서
다음 설정 을 선택 할 수 있 습 니 다:

//               
waveProgressbar.setCurrent(int currentProgress,String currentText); // 77, "788M/1024M"
//         
waveProgressbar.setMaxProgress(int maxProgress);
//            
waveProgressbar.setText(String mTextColor,int mTextSize);//"#FFFF00", 41
//       
waveProgressbar.setWaveColor(String mWaveColor); //"#5b9ef4"
//             （         ）
waveProgressbar.setWave(float mWaveHight,float mWaveWidth);
//            （       ，     ）
waveProgressbar.setmWaveSpeed(int mWaveSpeed);//The larger the value, the slower the vibration

2.코드 구현
여기 서 주로 사용 되 는 지식 은 사용자 정의 view,Porter Duff Xfermode 와 2 단계 베 세 르 곡선 이 있 습 니 다.잘 모 르 는 것 은 제 블 로그 에서 찾 아 보 세 요.다 있 습 니 다.　　　
먼저 WaveProgressView 계승 View 를 사용자 정의 하고 구조 함수 에서 레이아웃 파일 에 설 치 된 배경 을 가 져 오 며 파 도 를 그 리 는 붓 과 문 자 를 그 리 는 붓 을 설정 합 니 다.　　

private void Init() {
 /**
 *     
 */
 if(null==getBackground()){
 throw new IllegalArgumentException(String.format("background is null."));
 }else{
 backgroundBitmap = getBitmapFromDrawable(getBackground());
 }
 /**
 *     
 */
 mPath = new Path();
 mPathPaint = new Paint();
 mPathPaint.setAntiAlias(true);
 mPathPaint.setStyle(Paint.Style.FILL);
 /**
 *     
 */
 mTextPaint = new Paint();
 mTextPaint.setAntiAlias(true);
 mTextPaint.setTextAlign(Paint.Align.CENTER);
　　　　　//        ，      
 handler.sendEmptyMessageDelayed(INVALIDATE,100);
 }

onDraw 를 복사 하 는 방법 은 먼저 파 도 를 캔버스 에 그린 다음 배경 을 그립 니 다.(배경 붓 에 Porter Duff.Mode.DST 를 설정 합 니 다.ATOP 모드:상층 의 비 교 집합 부분 과 하층 의 교 집합 부분 을 취한 다).물론 Porter Duff.Mode.SRC 일 수도 있 습 니 다.ATOP,주로 당신 이 그린 선착순 에 달 려 있 습 니 다.마지막 으로 글 자 를 그 려 서 최종 Bitmap 를 만 들 고 마지막 으로 이 Bitmap 를 onDraw 의 인자 canvas 에 그립 니 다.

 Paint paint = new Paint();
 paint.setAntiAlias(true);
 Bitmap finalBmp = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888);
 /**
 *            
 */
 Canvas canvas = new Canvas(finalBmp);
 /**
 *     
 */
 float CurMidY = height*(maxProgress-currentProgress)/maxProgress;
 if(CurY>CurMidY){
 CurY = CurY - (CurY-CurMidY)/10;
 }
 mPath.reset();
 mPath.moveTo(0-distance,CurY);

 int waveNum = width/((int)mWaveHalfWidth*4)+1;
 int multiplier = 0;
 for(int i =0;i<waveNum;i++){
 mPath.quadTo(mWaveHalfWidth*(multiplier+1)-distance,CurY-mWaveHight,mWaveHalfWidth*(multiplier+2)-distance,CurY);
 mPath.quadTo(mWaveHalfWidth*(multiplier+3)-distance,CurY+mWaveHight,mWaveHalfWidth*(multiplier+4)-distance,CurY);
 multiplier+=4;
 }
 distance +=mWaveHalfWidth/mWaveSpeed;
 distance = distance%(mWaveHalfWidth*4);

 mPath.lineTo(width,height);
 mPath.lineTo(0,height);
 mPath.close();
 canvas.drawPath(mPath, mPathPaint);
 /**
 *         
 */
 int min = Math.min(width,height);
 backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap,min,min,false);
 /**
 *   DST_ATOP，                。
 */
 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));
 /**
 *     
 */
 canvas.drawBitmap(backgroundBitmap,0,0,paint);
 /**
 *       
 */
 canvas.drawText(currentText, width/2, height/2, mTextPaint);
 return finalBmp;

이곳 의 큐 리 는 지난 웨 이브 중앙 선의 Y 축 좌표 이 며,큐 미 디 는 현재 Y 축 좌표 로 웨 이브 가 올 라 갈 때마다 멈 추 는 효과 가 없 도록 이 1/100 의 상승 을 10 회로 나 눠 그립 니 다.
distance 는 x 축의 오프셋 입 니 다.물결 을 움 직 이기 위해 그 릴 때마다 왼쪽으로 오프셋 을 해 야 합 니 다.　

distance +=mWaveHalfWidth/mWaveSpeed;
distance = distance%(mWaveHalfWidth*4);

매번 오프셋 거 리 는 반 파 너비/파도 진동 속도 입 니 다.한 파 는 4 개의 반 파 너비 로 하나의 순환 을 이 루 고 다시 시작 x 위치 로 돌아 가 순환 변 위 를 시작 합 니 다.
view 의 너비 에 따라 모두 몇 개의 파형 을 그 려 야 하 는 지 계산 하 는 동시에 파 를 하나 더 넣 어 왼쪽으로 이동 하도록 합 니 다.

int waveNum = width/((int)mWaveHalfWidth*4)+1;
 int multiplier = 0;
 for(int i =0;i<waveNum;i++){
  mPath.quadTo(mWaveHalfWidth*(multiplier+1)-distance,CurY-mWaveHight,mWaveHalfWidth*(multiplier+2)-distance,CurY);
  mPath.quadTo(mWaveHalfWidth*(multiplier+3)-distance,CurY+mWaveHight,mWaveHalfWidth*(multiplier+4)-distance,CurY);
  multiplier+=4;
 }

매번 파형 의 왼쪽 점,파형 의 오른쪽 점,view 의 왼쪽 아래,view 의 오른쪽 아래 각 을 그립 니 다.메모리 에 새로 만 든 view 와 같은 크기 의 canvas 에 그림 을 그립 니 다.　

mPath.reset();
mPath.moveTo(0-distance,CurY);

mPath.lineTo(width,height);
mPath.lineTo(0,height);
mPath.close();
canvas.drawPath(mPath, mPathPaint);

배경 그림 을 크기 조정 한 다음 canvas 에 그립 니 다.이 크기 조정 은 최소 변 으로 크기 조정 합 니 다.

int min = Math.min(width,height);
backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap,min,min,false);

마지막 으로 텍스트 를 그립 니 다.초기 화 에 붓 을 설 치 했 습 니 다.코드 를 통 해 텍스트 의 색 을 설정 할 수 있 도록 텍스트 의 색 과 크기 를 onDraw 방법 에 설정 해 야 합 니 다.

mPathPaint.setColor(Color.parseColor(mWaveColor));
mTextPaint.setColor(Color.parseColor(mTextColor));
mTextPaint.setTextSize(mTextSize);
canvas.drawText(currentText, width/2, height/2, mTextPaint);

파 도 를 움 직 이기 위해 handler 순환 호출 invalidate 리 셋 인터페이스 를 사용 합 니 다.동시에 구조 함수 에서 handler 순환 을 열 어야 합 니 다.

private static final int INVALIDATE = 0X777;
 private Handler handler = new Handler() {
 @Override
 public void handleMessage(Message msg) {
  super.handleMessage(msg);
  switch (msg.what) {
  case INVALIDATE:
   invalidate();
   sendEmptyMessageDelayed(INVALIDATE,RefreshGap);
   break;
  }
 }
 };

마지막 으로 관련 속성 설정 함수 입 니 다.

 /**
 * @param currentProgress     
 * @param currentText          
 */
 public void setCurrent(int currentProgress,String currentText) {
 this.currentProgress = currentProgress;
 this.currentText = currentText;
 }

 /**
 * @param maxProgress          ，  100
 */
 public void setMaxProgress(int maxProgress){
 this.maxProgress = maxProgress;
 }

 /**
 * @param mTextColor      
 * @param mTextSize      
 */
 public void setText(String mTextColor,int mTextSize){
 this.mTextColor = mTextColor;
 this.mTextSize = mTextSize;
 }
 /**
 * @param mWaveHight      
 * @param mWaveWidth        
 */
 public void setWave(float mWaveHight,float mWaveWidth){
 this.mWaveHight = mWaveHight;
 this.mWaveHalfWidth = mWaveWidth/2;
 }

 /**
 * @param mWaveColor     
 */
 public void setWaveColor(String mWaveColor){
 this.mWaveColor = mWaveColor;
 }
 /**
 *         
 * @param mWaveSpeed
 */
 public void setmWaveSpeed(int mWaveSpeed){
 this.mWaveSpeed = mWaveSpeed;
 }

실현 은 비교적 간단 합 니 다.소스 코드 와 demo 는 모두 위의 주소 에 있 습 니 다.무슨 문제 가 있 으 면 저 에 게 메 시 지 를 남 겨 주 십시오.감사합니다!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.