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

<&＃63;xml version="1.0" encoding="utf-8"&＃63;> 
 
 
   
   
   
   
 
   
     
     
     
     
   
 
 

/** 
   * 第一圈的颜色 
   */ 
  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); 
  } 
 
  /** 
   * 必要的初始化，获得一些自定义的值 
   * 
   * @param context 
   * @param attrs 
   * @param defStyle 
   */ 
  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 

@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); // 根据进度画圆弧 
    } 
 
  } 

<&＃63;xml version="1.0" encoding="utf-8"&＃63;> 
 
 
   
   
   
   
   
   
 
   
     
     
     
     
     
     
   
 
 

/** 
   * 第一圈的颜色 
   */ 
  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); 
  } 
 
  /** 
   * 必要的初始化，获得一些自定义的值 
   * 
   * @param context 
   * @param attrs 
   * @param defStyle 
   */ 
  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 

@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;// 获得内圆的半径 
    /** 
     * 内切正方形的距离顶部 = mCircleWidth + relRadius - √2 / 2 
     */ 
    mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth; 
    /** 
     * 内切正方形的距离左边 = mCircleWidth + relRadius - √2 / 2 
     */ 
    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() 

/** 
   * 当前数量+1 
   */ 
  public void up() 
  { 
    mCurrentCount++; 
    postInvalidate(); 
  } 
 
  /** 
   * 当前数量-1 
   */ 
  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; 
  }