欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义控件实现UC浏览器语音搜索效果

程序员文章站 2023-11-13 12:48:28
 最近项目上要实现语音搜索功能,界面样式要模仿一下uc浏览器的样式,uc浏览器中有一个控件,会随着声音大小浮动,然后寻思偷个懒,百度一下,结果也没有找到类似的,只...

 最近项目上要实现语音搜索功能,界面样式要模仿一下uc浏览器的样式,uc浏览器中有一个控件,会随着声音大小浮动,然后寻思偷个懒,百度一下,结果也没有找到类似的,只能自己动手了。

先上图看我实现的效果:

Android自定义控件实现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));
}

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