溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Android自定義控件實現(xiàn)UC瀏覽器語音搜索效果

發(fā)布時間:2020-09-09 18:09:53 來源:腳本之家 閱讀:162 作者:ludi 欄目:移動開發(fā)

 最近項目上要實現(xiàn)語音搜索功能,界面樣式要模仿一下UC瀏覽器的樣式,UC瀏覽器中有一個控件,會隨著聲音大小浮動,然后尋思偷個懶,百度一下,結(jié)果也沒有找到類似的,只能自己動手了。

先上圖看我實現(xiàn)的效果:

Android自定義控件實現(xiàn)UC瀏覽器語音搜索效果

這是自定義控件的代碼,里面注釋也很明白,就不費(fèi)話了

public class CustomCircleView extends View{
  private Paint mPaint;
  private int strokeWidth = 0;   //圓環(huán)的寬度
  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();
    //如果布局中沒有設(shè)置bigCircleColor和floatCircleColor的時候給他一個默認(rèn)值
    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);
    //計算圓的半徑稍微麻煩點(diǎn),但是在圖上畫一下應(yīng)該能明白 (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);

    //繪制中間圖標(biāo)
    canvas.drawBitmap(bitmap, width/2-nBitmapWidth/2, height/2-nBitmapHeight/2, mPaint);


  }
  //根據(jù)傳入的寬度重新繪制
  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"
  />


高度寬度一定要給精確值,切記?。。?!顏色值可以不設(shè)定,默認(rèn)就是我上面圖的效果。
然后根據(jù)音量大小直接傳入數(shù)值就可以了,很簡單的使用方法,這里我用隨機(jī)數(shù)代替了。

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));
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI