Android 사용자 정의 컨트롤 UC 브 라 우 저 음성 검색 효과 구현

최근 프로젝트 에서 음성 검색 기능 을 실현 하려 면 인터페이스 스타일 은 UC 브 라 우 저의 스타일 을 모방 해 야 합 니 다.UC 브 라 우 저 에는 소리 크기 에 따라 움 직 이 는 컨트롤 이 있 습 니 다.그리고 게 으 름 을 피 우려 고 생각 했 습 니 다.바 이 두 는 비슷 한 것 을 찾 지 못 하고 직접 손 을 쓸 수 밖 에 없 었 습 니 다.
먼저 위의 그림 에서 내 가 실현 한 효 과 를 본다.

이것 은 사용자 정의 컨트롤 코드 입 니 다.설명 도 잘 알 고 있 으 니 말 도 안 됩 니 다.

public class CustomCircleView extends View{
  private Paint mPaint;
  private int strokeWidth = 0;   //     
  private Bitmap bitmap = null;  //     
  private int nBitmapWidth = 0;  //      
  private int nBitmapHeight = 0; //      
  private int width;     //view   
  private int height ;    //view   
  private int bigCircleColor =0;    //view   
  private int floatCircleColor =0;    //view   

  public CustomCircleView(Context context) {
    this(context, null);
  }

  public CustomCircleView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public CustomCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCircleView, defStyleAttr, 0);
    int n = a.getIndexCount();

    for (int i = 0; i < n; i++)
    {
      int attr = a.getIndex(i);
      switch (attr)
      {
        case R.styleable.CustomCircleView_icon:
          bitmap = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
          break;
        case R.styleable.CustomCircleView_bigCircleColor:
          bigCircleColor = a.getColor(attr, Color.GRAY);
          break;
        case R.styleable.CustomCircleView_floatCircleColor:
          floatCircleColor = a.getColor(attr,Color.GREEN);
          break;
      }
    }
    a.recycle();

    mPaint = new Paint();
    //         bigCircleColor floatCircleColor          
    if (bigCircleColor==0){
      bigCircleColor=Color.parseColor("#FFEEF0F1");
    }
    if (floatCircleColor==0){
      floatCircleColor=Color.parseColor("#25c1f5");
    }
    //          
    nBitmapWidth = bitmap.getWidth();
    nBitmapHeight = bitmap.getHeight();
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    //  view         view      ！！！！！！！！
    if (widthMode == MeasureSpec.EXACTLY) {
      width = widthSize;
    }
    if (heightMode == MeasureSpec.EXACTLY)
    {
      height = heightSize;
    }
    setMeasuredDimension(width, height);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setAntiAlias(true); //     
    //         
    mPaint.setColor(bigCircleColor);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(height/2-nBitmapHeight/2);
    //           ，              (height/2-nBitmapHeight/2)/2+nBitmapHeight/2
    canvas.drawCircle(width/2, height/2, (height/2-nBitmapHeight/2)/2+nBitmapHeight/2, mPaint);

    //      
    mPaint.setColor(floatCircleColor);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(strokeWidth);
    canvas.drawCircle(width/2, height/2, strokeWidth/2+nBitmapHeight/2, mPaint);

    //      
    canvas.drawBitmap(bitmap, width/2-nBitmapWidth/2, height/2-nBitmapHeight/2, mPaint);


  }
  //           
  public void setStrokeWidth(int with){
    this.strokeWidth=with;
    invalidate();
  }
}

res/values 아래 attrs 파일 코드 만 들 기:

<resources>
  <declare-styleable name="CustomCircleView">
    <attr name="bigCircleColor" format="color" />
    <attr name="floatCircleColor" format="color" />
    <attr name="icon" format="reference" />
  </declare-styleable>
</resources>

레이아웃 에서 의 사용:

<com.example.administrator.mycustomcircleview.CustomCircleView
  android:id="@+id/customView"
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:layout_gravity="center"
  app:icon="@mipmap/voice_icon"
  app:floatCircleColor="@color/colorAccent"
  app:bigCircleColor="@color/colorPrimaryDark"
  />

높이 폭 은 반드시 정확 한 값 을 주어 야 합 니 다.명심 하 세 요!!색상 값 을 설정 하지 않 아 도 됩 니 다.기본 값 은 제 위 그림 의 효과 입 니 다.
그리고 볼 륨 크기 에 따라 수 치 를 직접 전달 하면 됩 니 다.간단 한 사용 방법 입 니 다.여 기 는 제 가 랜 덤 으로 대 체 했 습 니 다.

customView = ((CustomCircleView) findViewById(R.id.customView));
  button = ((Button) findViewById(R.id.button));
  button.setOnClickListener(this);
}

@Override
public void onClick(View v) {
  Random random=new Random();
  customView.setStrokeWidth(random.nextInt(100));
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.