最近项目上要实现语音搜索功能，界面样式要模仿一下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文件 代码：

在布局中的使用：

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

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。