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

 更新时间:2017年04月22日 14:26:33   作者:ludi  
这篇文章主要为大家详细介绍了Android自定义控件实现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));
}

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

相关文章

  • Android Studio3.0升级后使用注意事项及解决方法

    Android Studio3.0升级后使用注意事项及解决方法

    这篇文章主要介绍了Android Studio3.0升级后使用注意事项及解决方法,需要的朋友参考下吧
    2017-12-12
  • Android操作系统的架构设计分析

    Android操作系统的架构设计分析

    这篇文章主要介绍了Android操作系统的架构设计分析,Android系统架构分为Linux内核驱动、C/C ++框架、Java框架、Java应用程序,本文分别讲解了它的作用,需要的朋友可以参考下
    2015-06-06
  • Android数据持久化之File机制分析

    Android数据持久化之File机制分析

    这篇文章主要介绍了Android数据持久化之File机制,较为详细的分析了File机制的原理及Android使用File实现数据持久化的相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • android手机获取唯一标识的方法

    android手机获取唯一标识的方法

    这篇文章主要 为大家详细介绍了android手机获取唯一标识的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Android 路径查询具体实现

    Android 路径查询具体实现

    可以通过RasterMap的getDirection()方法来查询路径,和查询地址类似,路径查询的结果也是通过回调函数的方式来通知应用程序的,下面的例子返回南京到北京的路径
    2013-10-10
  • Android图片加载库Glide用法

    Android图片加载库Glide用法

    大家好,本篇文章主要讲的Android图片加载库Glide用法,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下,方便下次浏览
    2021-12-12
  • Android实现短信加密功能(发送加密短信、解密本地短信)

    Android实现短信加密功能(发送加密短信、解密本地短信)

    这篇文章主要介绍了android实现短信加密功能的相关资料,功能包括发送加密短信、解密本地短信,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Android TouchListener实现拖拽删实例代码

    Android TouchListener实现拖拽删实例代码

    这篇文章主要介绍了Android TouchListener实现拖拽删实例代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • 解析Android中webview和js之间的交互

    解析Android中webview和js之间的交互

    本篇文章是对Android中webview和js之间的交互进行了详细的分析介绍,需要的朋友参考下
    2013-07-07
  • Android对话框AlertDialog详解

    Android对话框AlertDialog详解

    本文详细讲解了Android对话框AlertDialog的实现方式,文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-12-12

最新评论