自定义控件实现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);}@Overridepublic void onClick(View v) {    Random random=new Random();    customView.setStrokeWidth(random.nextInt(100));}

我也是自定义路上的小菜鸟，希望大家可以给我提供建议，我们一起成长！

如果我的这篇文章对你有帮助，希望你动动手指帮我点个赞！谢谢！