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

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

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

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

效果就這樣，分析了一下，大概有這幾個屬性，兩個顏色，一個速度，一個圓環(huán)的寬度。
自定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); 
  } 
 
  /** 
   * 必要的初始化，獲得一些自定義的值 
   * 
   * @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);// 默認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); // 設置圓環(huán)的寬度 
    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); // 設置圓環(huán)的顏色 
      canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán) 
      mPaint.setColor(mSecondColor); // 設置圓環(huán)的顏色 
      canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進度畫圓弧 
    } else 
    { 
      mPaint.setColor(mSecondColor); // 設置圓環(huán)的顏色 
      canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán) 
      mPaint.setColor(mFirstColor); // 設置圓環(huán)的顏色 
      canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進度畫圓弧 
    } 
 
  }

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

視頻音量調(diào)控

2016426152352723.jpg (519×303)

這樣一個效果使用自定義View來實現(xiàn)的話和圓環(huán)的思路差不多，所以我們一起來看：
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; 
  /** 
   * 個數(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);// 默認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); // 設置圓環(huán)的寬度 
    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); 
 
    /** 
     * 計算內(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ù)畫出每個小塊 
   * 
   * @param canvas 
   * @param centre 
   * @param radius 
   */ 
  private void drawOval(Canvas canvas, int centre, int radius) 
  { 
    /** 
     * 根據(jù)需要畫的個數(shù)以及間隙計算每個塊塊所占的比例*360 
     */ 
    float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount; 
 
    RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限 
 
    mPaint.setColor(mFirstColor); // 設置圓環(huán)的顏色 
    for (int i = 0; i < mCount; i++) 
    { 
      canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據(jù)進度畫圓弧 
    } 
 
    mPaint.setColor(mSecondColor); // 設置圓環(huán)的顏色 
    for (int i = 0; i < mCurrentCount; i++) 
    { 
      canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根據(jù)進度畫圓弧 
    } 
  }

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

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

/** 
   * 當前數(shù)量+1 
   */ 
  public void up() 
  { 
    mCurrentCount++; 
    postInvalidate(); 
  } 
 
  /** 
   * 當前數(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)聽也得很簡單哈，基本能實現(xiàn)，大家也可以加個最小距離加速度什么的，都行。

最后，效果圖：

2016426152452080.gif (434×668)

您可能感興趣的文章:

Android自定義view繪制圓環(huán)占比動畫
這篇文章主要為大家詳細介紹了Android自定義view繪制圓環(huán)占比動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
android串口開發(fā)入門之搭建ndk開發(fā)環(huán)境及第一個jni調(diào)用程序
這篇文章主要給大家介紹了關于android串口開發(fā)入門之搭建ndk開發(fā)環(huán)境及第一個jni調(diào)用程序的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2018-01-01
android自定義view之實現(xiàn)日歷界面實例
本篇文章主要介紹了android自定義view之實現(xiàn)日歷界面實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
Android簡單音樂播放實例
這篇文章主要介紹了Android簡單音樂播放實例，詳細介紹了Android Service使用方法
2015-12-12
Android自定義View實現(xiàn)水波紋引導動畫
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)水波紋動畫引導，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
Android實現(xiàn)Tab切換界面功能詳解
這篇文章主要為大家詳細介紹了Android如何實現(xiàn)Tab切換界面的功能，以及對Tab變化事件進行監(jiān)聽。文中示例代碼講解詳細，感興趣的可以了解一下
2022-05-05
Android開發(fā)強制橫屏和強制豎屏設置實例代碼
本篇文章主要介紹了Android開發(fā)強制橫屏和強制豎屏設置實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
Android14(U)適配攻略
本文主要介紹了Android14(U)適配攻略，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-06-06
Android開發(fā)apk反編譯和二次打包教程
反編譯不是讓各位開發(fā)者去對一個應用破解搞重裝什么的，主要目的是為了促進開發(fā)者學習，借鑒好的代碼，提升自我開發(fā)水平。下面我們就來研究下如何進行APK反編譯以及二次打包
2016-04-04
android文件管理器用法詳解
這篇文章主要為大家詳細介紹了android文件管理器的用法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04