最近項目上要實現(xiàn)語音搜索功能，界面樣式要模仿一下UC瀏覽器的樣式，UC瀏覽器中有一個控件，會隨著聲音大小浮動，然后尋思偷個懶，百度一下，結(jié)果也沒有找到類似的，只能自己動手了。
創(chuàng)新互聯(lián)擁有網(wǎng)站維護(hù)技術(shù)和項目管理團(tuán)隊，建立的售前、實施和售后服務(wù)體系，為客戶提供定制化的成都網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站維護(hù)、成都電信服務(wù)器托管解決方案。為客戶網(wǎng)站安全和日常運(yùn)維提供整體管家式外包優(yōu)質(zhì)服務(wù)。我們的網(wǎng)站維護(hù)服務(wù)覆蓋集團(tuán)企業(yè)、上市公司、外企網(wǎng)站、商城建設(shè)、政府網(wǎng)站等各類型客戶群體，為全球上千企業(yè)提供全方位網(wǎng)站維護(hù)、服務(wù)器維護(hù)解決方案。
先上圖看我實現(xiàn)的效果：
這是自定義控件的代碼，里面注釋也很明白，就不費(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);
//計算圓的半徑稍微麻煩點，但是在圖上畫一下應(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文件 代碼：
在布局中的使用：
高度寬度一定要給精確值，切記啊?。?！顏色值可以不設(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
