Android自定义控件实现UC浏览器语音搜索效果
程序员文章站
2023-11-13 12:48:28
最近项目上要实现语音搜索功能,界面样式要模仿一下uc浏览器的样式,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)); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。