文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android中自定义View实现圆环等待及相关的音量调节效果

2022-06-06 08:32

关注

圆环交替、等待效果

效果就这样,分析了一下,大概有这几个属性,两个颜色,一个速度,一个圆环的宽度。
自定View的几个步骤:
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
3、重写onMesure 
4、重写onDraw

1、自定义属性:


<?xml version="1.0" encoding="utf-8"?> 
<resources> 
  <attr name="firstColor" format="color" /> 
  <attr name="secondColor" format="color" /> 
  <attr name="circleWidth" format="dimension" /> 
  <attr name="speed" format="integer" /> 
  <declare-styleable name="CustomProgressBar"> 
    <attr name="firstColor" /> 
    <attr name="secondColor" /> 
    <attr name="circleWidth" /> 
    <attr name="speed" /> 
  </declare-styleable> 
</resources> 

2、在View的构造方法中获得我们自定义的属性


 
  private int mFirstColor; 
   
  private int mSecondColor; 
   
  private int mCircleWidth; 
   
  private Paint mPaint; 
   
  private int mProgress; 
   
  private int mSpeed; 
   
  private boolean isNext = false; 
  public CustomProgressBar(Context context, AttributeSet attrs) 
  { 
    this(context, attrs, 0); 
  } 
  public CustomProgressBar(Context context) 
  { 
    this(context, null); 
  } 
   
  public CustomProgressBar(Context context, AttributeSet attrs, int defStyle) 
  { 
    super(context, attrs, defStyle); 
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyle, 0); 
    int n = a.getIndexCount(); 
    for (int i = 0; i < n; i++) 
    { 
      int attr = a.getIndex(i); 
      switch (attr) 
      { 
      case R.styleable.CustomProgressBar_firstColor: 
        mFirstColor = a.getColor(attr, Color.GREEN); 
        break; 
      case R.styleable.CustomProgressBar_secondColor: 
        mSecondColor = a.getColor(attr, Color.RED); 
        break; 
      case R.styleable.CustomProgressBar_circleWidth: 
        mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension( 
            TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics())); 
        break; 
      case R.styleable.CustomProgressBar_speed: 
        mSpeed = a.getInt(attr, 20);// 默认20 
        break; 
      } 
    } 
    a.recycle(); 
    mPaint = new Paint(); 
    // 绘图线程 
    new Thread() 
    { 
      public void run() 
      { 
        while (true) 
        { 
          mProgress++; 
          if (mProgress == 360) 
          { 
            mProgress = 0; 
            if (!isNext) 
              isNext = true; 
            else 
              isNext = false; 
          } 
          postInvalidate(); 
          try 
          { 
            Thread.sleep(mSpeed); 
          } catch (InterruptedException e) 
          { 
            e.printStackTrace(); 
          } 
        } 
      }; 
    }.start(); 
  } 

3、直接重写onDraw,这不需要重写onMeasure


@Override 
  protected void onDraw(Canvas canvas) 
  { 
    int centre = getWidth() / 2; // 获取圆心的x坐标 
    int radius = centre - mCircleWidth / 2;// 半径 
    mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度 
    mPaint.setAntiAlias(true); // 消除锯齿 
    mPaint.setStyle(Paint.Style.STROKE); // 设置空心 
    RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限 
    if (!isNext) 
    {// 第一颜色的圈完整,第二颜色跑 
      mPaint.setColor(mFirstColor); // 设置圆环的颜色 
      canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环 
      mPaint.setColor(mSecondColor); // 设置圆环的颜色 
      canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧 
    } else 
    { 
      mPaint.setColor(mSecondColor); // 设置圆环的颜色 
      canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环 
      mPaint.setColor(mFirstColor); // 设置圆环的颜色 
      canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧 
    } 
  } 

大功完成了,当然了,唯一比较纠结的地方就是两个颜色何时切换,如何切换,我采用上面的办法,你也可以自己想想怎么实现。

视频音量调控

2016426152352723.jpg (519×303)

这样一个效果使用自定义View来实现的话和圆环的思路差不多,所以我们一起来看:
1、先分许需要的属性,两个小块的颜色、一张中间的图片、间隙大小、一个多少个块块。分析完毕,开始写attr.xml


<?xml version="1.0" encoding="utf-8"?> 
<resources> 
  <attr name="firstColor" format="color" /> 
  <attr name="secondColor" format="color" /> 
  <attr name="circleWidth" format="dimension" /> 
  <attr name="dotCount" format="integer" /> 
  <attr name="splitSize" format="integer" /> 
  <attr name="bg" format="reference"></attr> 
  <declare-styleable name="CustomVolumControlBar"> 
    <attr name="firstColor" /> 
    <attr name="secondColor" /> 
    <attr name="circleWidth" /> 
    <attr name="dotCount" /> 
    <attr name="splitSize" /> 
    <attr name="bg" /> 
  </declare-styleable> 
</resources> 

2、在构造中获取这些属性:


 
  private int mFirstColor; 
   
  private int mSecondColor; 
   
  private int mCircleWidth; 
   
  private Paint mPaint; 
   
  private int mCurrentCount = 3; 
   
  private Bitmap mImage; 
   
  private int mSplitSize; 
   
  private int mCount; 
  private Rect mRect; 
  public CustomVolumControlBar(Context context, AttributeSet attrs) 
  { 
    this(context, attrs, 0); 
  } 
  public CustomVolumControlBar(Context context) 
  { 
    this(context, null); 
  } 
   
  public CustomVolumControlBar(Context context, AttributeSet attrs, int defStyle) 
  { 
    super(context, attrs, defStyle); 
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomVolumControlBar, defStyle, 0); 
    int n = a.getIndexCount(); 
    for (int i = 0; i < n; i++) 
    { 
      int attr = a.getIndex(i); 
      switch (attr) 
      { 
      case R.styleable.CustomVolumControlBar_firstColor: 
        mFirstColor = a.getColor(attr, Color.GREEN); 
        break; 
      case R.styleable.CustomVolumControlBar_secondColor: 
        mSecondColor = a.getColor(attr, Color.CYAN); 
        break; 
      case R.styleable.CustomVolumControlBar_bg: 
        mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0)); 
        break; 
      case R.styleable.CustomVolumControlBar_circleWidth: 
        mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension( 
            TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics())); 
        break; 
      case R.styleable.CustomVolumControlBar_dotCount: 
        mCount = a.getInt(attr, 20);// 默认20 
        break; 
      case R.styleable.CustomVolumControlBar_splitSize: 
        mSplitSize = a.getInt(attr, 20); 
        break; 
      } 
    } 
    a.recycle(); 
    mPaint = new Paint(); 
    mRect = new Rect(); 
  } 

3、重写onDraw


@Override 
  protected void onDraw(Canvas canvas) 
  { 
    mPaint.setAntiAlias(true); // 消除锯齿 
    mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度 
    mPaint.setStrokeCap(Paint.Cap.ROUND); // 定义线段断电形状为圆头 
    mPaint.setAntiAlias(true); // 消除锯齿 
    mPaint.setStyle(Paint.Style.STROKE); // 设置空心 
    int centre = getWidth() / 2; // 获取圆心的x坐标 
    int radius = centre - mCircleWidth / 2;// 半径 
     
    drawOval(canvas, centre, radius); 
     
    int relRadius = radius - mCircleWidth / 2;// 获得内圆的半径 
     
    mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth; 
     
    mRect.top = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth; 
    mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius); 
    mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius); 
     
    if (mImage.getWidth() < Math.sqrt(2) * relRadius) 
    { 
      mRect.left = (int) (mRect.left + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getWidth() * 1.0f / 2); 
      mRect.top = (int) (mRect.top + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getHeight() * 1.0f / 2); 
      mRect.right = (int) (mRect.left + mImage.getWidth()); 
      mRect.bottom = (int) (mRect.top + mImage.getHeight()); 
    } 
    // 绘图 
    canvas.drawBitmap(mImage, null, mRect, mPaint); 
  } 
   
  private void drawOval(Canvas canvas, int centre, int radius) 
  { 
     
    float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount; 
    RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限 
    mPaint.setColor(mFirstColor); // 设置圆环的颜色 
    for (int i = 0; i < mCount; i++) 
    { 
      canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧 
    } 
    mPaint.setColor(mSecondColor); // 设置圆环的颜色 
    for (int i = 0; i < mCurrentCount; i++) 
    { 
      canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧 
    } 
  } 

这里需要注意下:
画块:首先根据块数量和间隙计算,每个块所占的比例。
画图:当图比较大时,直接使用该环内切正方形大小进行约束,当图片比较小时,在正中心的位置绘制。有些数学运算过程,楼主在草稿上画了一会,不复杂,大家自己画画,我就不贴草稿了。

4、添加触摸监听:


 
  public void up() 
  { 
    mCurrentCount++; 
    postInvalidate(); 
  } 
   
  public void down() 
  { 
    mCurrentCount--; 
    postInvalidate(); 
  } 
  private int xDown, xUp; 
  @Override 
  public boolean onTouchEvent(MotionEvent event) 
  { 
    switch (event.getAction()) 
    { 
    case MotionEvent.ACTION_DOWN: 
      xDown = (int) event.getY(); 
      break; 
    case MotionEvent.ACTION_UP: 
      xUp = (int) event.getY(); 
      if (xUp > xDown)// 下滑 
      { 
        down(); 
      } else 
      { 
        up(); 
      } 
      break; 
    } 
    return true; 
  } 

触摸监听也得很简单哈,基本能实现,大家也可以加个最小距离加速度什么的,都行。

最后,效果图:

2016426152452080.gif (434×668)

您可能感兴趣的文章:android自定义View实现圆环颜色选择器利用Android模仿微信摄像圆环进度效果实例Android自定义带动画的半圆环型进度效果Android自定义view绘制圆环占比动画Android实现动态圆环的图片头像控件Android自定义View实现圆环交替效果Android自定义View之酷炫圆环(二)Android自定义View之酷炫数字圆环Android开发笔记之:在ImageView上绘制圆环的实现方法Android实现光点模糊渐变的自旋转圆环特效


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯