快捷導(dǎo)航

Android中自定義View實(shí)現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果

更新時(shí)間：2016年04月26日 15:25:53 作者：鴻洋_

這篇文章主要介紹了Android中自定義View實(shí)現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果,邏輯非常簡(jiǎn)單,或許繪圖方面更加繁瑣XD 需要的朋友可以參考下

圓環(huán)交替、等待效果

效果就這樣，分析了一下，大概有這幾個(gè)屬性，兩個(gè)顏色，一個(gè)速度，一個(gè)圓環(huán)的寬度。
自定View的幾個(gè)步驟：
1、自定義View的屬性
2、在View的構(gòu)造方法中獲得我們自定義的屬性
3、重寫(xiě)onMesure
4、重寫(xiě)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的構(gòu)造方法中獲得我們自定義的屬性

/** 
   * 第一圈的顏色 
   */ 
  private int mFirstColor; 
  /** 
   * 第二圈的顏色 
   */ 
  private int mSecondColor; 
  /** 
   * 圈的寬度 
   */ 
  private int mCircleWidth; 
  /** 
   * 畫(huà)筆 
   */ 
  private Paint mPaint; 
  /** 
   * 當(dāng)前進(jìn)度 
   */ 
  private int mProgress; 
 
  /** 
   * 速度 
   */ 
  private int mSpeed; 
 
  /** 
   * 是否應(yīng)該開(kāi)始下一個(gè) 
   */ 
  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 < 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);// 默認(rèn)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、直接重寫(xiě)onDraw，這不需要重寫(xiě)onMeasure

@Override 
  protected void onDraw(Canvas canvas) 
  { 
 
    int centre = getWidth() / 2; // 獲取圓心的x坐標(biāo) 
    int radius = centre - mCircleWidth / 2;// 半徑 
    mPaint.setStrokeWidth(mCircleWidth); // 設(shè)置圓環(huán)的寬度 
    mPaint.setAntiAlias(true); // 消除鋸齒 
    mPaint.setStyle(Paint.Style.STROKE); // 設(shè)置空心 
    RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限 
    if (!isNext) 
    {// 第一顏色的圈完整，第二顏色跑 
      mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色 
      canvas.drawCircle(centre, centre, radius, mPaint); // 畫(huà)出圓環(huán) 
      mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色 
      canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫(huà)圓弧 
    } else 
    { 
      mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色 
      canvas.drawCircle(centre, centre, radius, mPaint); // 畫(huà)出圓環(huán) 
      mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色 
      canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫(huà)圓弧 
    } 
 
  }

大功完成了，當(dāng)然了，唯一比較糾結(jié)的地方就是兩個(gè)顏色何時(shí)切換，如何切換，我采用上面的辦法，你也可以自己想想怎么實(shí)現(xiàn)。

視頻音量調(diào)控

2016426152352723.jpg (519×303)

這樣一個(gè)效果使用自定義View來(lái)實(shí)現(xiàn)的話(huà)和圓環(huán)的思路差不多，所以我們一起來(lái)看：
1、先分許需要的屬性，兩個(gè)小塊的顏色、一張中間的圖片、間隙大小、一個(gè)多少個(gè)塊塊。分析完畢，開(kāi)始寫(xiě)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、在構(gòu)造中獲取這些屬性：

/** 
   * 第一圈的顏色 
   */ 
  private int mFirstColor; 
 
  /** 
   * 第二圈的顏色 
   */ 
  private int mSecondColor; 
  /** 
   * 圈的寬度 
   */ 
  private int mCircleWidth; 
  /** 
   * 畫(huà)筆 
   */ 
  private Paint mPaint; 
  /** 
   * 當(dāng)前進(jìn)度 
   */ 
  private int mCurrentCount = 3; 
 
  /** 
   * 中間的圖片 
   */ 
  private Bitmap mImage; 
  /** 
   * 每個(gè)塊塊間的間隙 
   */ 
  private int mSplitSize; 
  /** 
   * 個(gè)數(shù) 
   */ 
  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 < 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);// 默認(rèn)20 
        break; 
      case R.styleable.CustomVolumControlBar_splitSize: 
        mSplitSize = a.getInt(attr, 20); 
        break; 
      } 
    } 
    a.recycle(); 
    mPaint = new Paint(); 
    mRect = new Rect(); 
  }

3、重寫(xiě)onDraw

@Override 
  protected void onDraw(Canvas canvas) 
  { 
    mPaint.setAntiAlias(true); // 消除鋸齒 
    mPaint.setStrokeWidth(mCircleWidth); // 設(shè)置圓環(huán)的寬度 
    mPaint.setStrokeCap(Paint.Cap.ROUND); // 定義線段斷電形狀為圓頭 
    mPaint.setAntiAlias(true); // 消除鋸齒 
    mPaint.setStyle(Paint.Style.STROKE); // 設(shè)置空心 
    int centre = getWidth() / 2; // 獲取圓心的x坐標(biāo) 
    int radius = centre - mCircleWidth / 2;// 半徑 
    /** 
     * 畫(huà)塊塊去 
     */ 
    drawOval(canvas, centre, radius); 
 
    /** 
     * 計(jì)算內(nèi)切正方形的位置 
     */ 
    int relRadius = radius - mCircleWidth / 2;// 獲得內(nèi)圓的半徑 
    /** 
     * 內(nèi)切正方形的距離頂部 = mCircleWidth + relRadius - √2 / 2 
     */ 
    mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth; 
    /** 
     * 內(nèi)切正方形的距離左邊 = 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); 
 
    /** 
     * 如果圖片比較小，那么根據(jù)圖片的尺寸放置到正中心 
     */ 
    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); 
  } 
 
  /** 
   * 根據(jù)參數(shù)畫(huà)出每個(gè)小塊 
   * 
   * @param canvas 
   * @param centre 
   * @param radius 
   */ 
  private void drawOval(Canvas canvas, int centre, int radius) 
  { 
    /** 
     * 根據(jù)需要畫(huà)的個(gè)數(shù)以及間隙計(jì)算每個(gè)塊塊所占的比例*360 
     */ 
    float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount; 
 
    RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限 
 
    mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色 
    for (int i = 0; i < mCount; i++) 
    { 
      canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據(jù)進(jìn)度畫(huà)圓弧 
    } 
 
    mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色 
    for (int i = 0; i < mCurrentCount; i++) 
    { 
      canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據(jù)進(jìn)度畫(huà)圓弧 
    } 
  }

這里需要注意下：
畫(huà)塊：首先根據(jù)塊數(shù)量和間隙計(jì)算，每個(gè)塊所占的比例。
畫(huà)圖：當(dāng)圖比較大時(shí)，直接使用該環(huán)內(nèi)切正方形大小進(jìn)行約束，當(dāng)圖片比較小時(shí)，在正中心的位置繪制。有些數(shù)學(xué)運(yùn)算過(guò)程，樓主在草稿上畫(huà)了一會(huì)，不復(fù)雜，大家自己畫(huà)畫(huà)，我就不貼草稿了。

4、添加觸摸監(jiān)聽(tīng)：

/** 
   * 當(dāng)前數(shù)量+1 
   */ 
  public void up() 
  { 
    mCurrentCount++; 
    postInvalidate(); 
  } 
 
  /** 
   * 當(dāng)前數(shù)量-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; 
  }

觸摸監(jiān)聽(tīng)也得很簡(jiǎn)單哈，基本能實(shí)現(xiàn)，大家也可以加個(gè)最小距離加速度什么的，都行。

最后，效果圖：

2016426152452080.gif (434×668)