Android 오디 오 막대 그래프 효과 구현(오디 오 애니메이션 을 모방 하여 오디 오 입력 없 음)

오디 오 막대 그래프
다음 그림 에서 보 듯 이 이번 오디 오 막대 그래프 입 니 다.

사용자 정의 View 의 용법 만 있 기 때문에 우 리 는 오디 오 입력 을 진실 하 게 감청 하지 않 고 무 작위 로 숫자 를 모 의 하면 된다.
위의 그림 과 같은 정적 오디 오 막대 그래프 를 실현 하려 면 여러분 들 이 생각 을 빨리 찾 을 수 있 을 것 이 라 고 믿 습 니 다.즉,하나의 사각형 을 그 리 는 것 입 니 다.모든 사각형 간 에 거 리 를 조금 만 옮 기 면 됩 니 다.다음 코드 는 좌 표를 계산 하 는 방법 을 보 여 준다.

for (int i = 0; i < mRectCount; i++) {
//              、 、  （              ，              ）
canvas.drawRect(
(float) (mRectWidth * i + offset),
currentHeight,
(float) ( mRectWidth * (i + 1)),
mRectHeight,
mRectPaint
);
}

위의 코드 에서 우 리 는 순환 을 통 해 이 작은 사각형 을 만 들 었 습 니 다.그 중에서 currentHeight 는 모든 작은 사각형 의 높이 이 고 가로 좌표 의 끊 임 없 는 오프셋 을 통 해 이 정적 인 작은 사각형 을 그 렸 습 니 다.다음은 사각형 의 높이 를 무 작위 로 변화 시 켜 오디 오 를 모 의 한 것 입 니 다.여 기 는 Math.random()방법 으로 이 높이 를 무 작위 로 바 꾸 고 currentHeight 에 값 을 부여 합 니 다.코드 는 다음 과 같 습 니 다.

//                  ，          
mRandom = Math.random();
currentHeight = (float) (mRectHeight * mRandom);

이렇게 하면 정적 효 과 를 실현 할 수 있 지만 어떻게 동적 효 과 를 실현 합 니까?사실 매우 간단 합 니 다.onDraw()방법 에서 invalidate()방법 으로 View 에 다시 그리 라 고 알 리 면 됩 니 다.그러나 새로운 사각형 을 그 릴 때마다 View 에 다시 그 려 달라 고 알 릴 필 요 는 없다.그러면 새로 고침 속도 가 너무 빨 라 서 오히려 효과 에 영향 을 줄 수 있다.따라서 우 리 는 다음 과 같은 코드 를 사용 하여 View 의 지연 재 그림 을 그 릴 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

posInvalidateDelayed(300);

이렇게 300 ms 간격 으로 View 에 다시 그 려 달라 고 통지 하면 비교적 좋 은 시각 적 효 과 를 얻 을 수 있다.마지막 으로 그 라 데 이 션 효 과 를 추가 하면 View 를 더욱 생동감 있 게 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

@Override
protected void onSizeChanged(int w,int h,int oldW,int oldH) {
super.onSizeChanged(w, h, oldW, oldH);
//     
LinearGradient mLinearGradient;
//     
int mWidth;
//       
mWidth = getWidth();
//          
mRectHeight = getHeight();
//          (             )
mRectWidth = (mWidth-offset) / mRectCount;
//          
mLinearGradient = new LinearGradient(
0,
0,
mRectWidth,
mRectHeight,
topColor,
downColor,
Shader.TileMode.CLAMP
);
//          
mRectPaint.setShader(mLinearGradient);
}

이 예 에서 우 리 는 사용자 정의 View 를 만 들 때 한 걸음 한 걸음 기본 적 인 효과 부터 천천히 기능 을 추가 하여 더욱 복잡 한 효 과 를 그 려 야 한 다 는 것 을 알 수 있다.아무리 복잡 한 사용자 정의 뷰 라 도 천천히 교체 되 는 기능 이 므 로 사용자 정의 뷰 가 얼마나 어렵다 고 생각 하지 마 세 요.천리 길 도 한 걸음 부터 시작 해서 시작 하면 점점 익숙해 질 수 있다.
코드
다음은 이번 의 전체 코드 입 니 다.

package com.example.customaf;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
import com.example.afanalog.R;
/**
*            
* Created by shize on 2016/9/5.
*/
public class MyAF extends View {
//        
private int mRectCount;
//        
private Paint mRectPaint;
//        
private int topColor, downColor;
//         
private int mRectWidth, mRectHeight;
//    
private int offset;
//     
private int mSpeed;
public MyAF(Context context) {
super(context);
}
public MyAF(Context context, AttributeSet attrs) {
super(context, attrs);
setPaint(context, attrs);
}
public MyAF(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setPaint(context, attrs);
}
public void setPaint(Context context, AttributeSet attrs){
//       TypedArray 
TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.MyAF);
mRectPaint = new Paint();
//            
mRectPaint.setColor(ta.getColor(R.styleable.MyAF_AFTopColor,
ContextCompat.getColor(context, R.color.top_color)));
//             
topColor=ta.getColor(R.styleable.MyAF_AFTopColor,
ContextCompat.getColor(context, R.color.top_color));
//             
downColor=ta.getColor(R.styleable.MyAF_AFDownColor,
ContextCompat.getColor(context, R.color.down_color));
//        
mRectCount=ta.getInt(R.styleable.MyAF_AFCount, 10);
//          ，       
mSpeed=ta.getInt(R.styleable.MyAF_AFSpeed, 300);
//        
offset=ta.getInt(R.styleable.MyAF_AFOffset, 5);
//   TypeArray
ta.recycle();
}
@Override
protected void onSizeChanged(int w,int h,int oldW,int oldH) {
super.onSizeChanged(w, h, oldW, oldH);
//     
LinearGradient mLinearGradient;
//     
int mWidth;
//       
mWidth = getWidth();
//          
mRectHeight = getHeight();
//          (             )
mRectWidth = (mWidth-offset) / mRectCount;
//          
mLinearGradient = new LinearGradient(
0,
0,
mRectWidth,
mRectHeight,
topColor,
downColor,
Shader.TileMode.CLAMP
);
//          
mRectPaint.setShader(mLinearGradient);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
double mRandom;
float currentHeight;
for (int i = 0; i < mRectCount; i++) {
//                  ，          
mRandom = Math.random();
currentHeight = (float) (mRectHeight * mRandom);
//              、 、  （              ，              ）
canvas.drawRect(
(float) (mRectWidth * i + offset),
currentHeight,
(float) ( mRectWidth * (i + 1)),
mRectHeight,
mRectPaint
);
}
//   view    
postInvalidateDelayed(mSpeed);
}
}

레이아웃 파일 의 전체 코드:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.afanalog.MainActivity">
<com.example.customaf.MyAF
android:layout_width="match_parent"
android:layout_height="match_parent"
custom:AFCount="15"
custom:AFDownColor="@color/down_color"
custom:AFSpeed="300"
custom:AFTopColor="@color/top_color"
custom:AFOffset="15"
/>
</LinearLayout>

위 에서 말 한 것 은 소 편 이 소개 한 안 드 로 이 드 가 오디 오 막대 그래프 효과(오디 오 애니메이션 을 모방 하여 오디 오 입력 이 없 음)를 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!