Android繪制音樂播放器示波器

更新時間：2016年07月12日 14:37:28 作者：qq_25193681

這篇文章主要為大家詳細(xì)介紹了Android繪制音樂播放器示波器的相關(guān)資料，感興趣的小伙伴們可以參考一下

示波器是在大學(xué)的時候老師教的，但是出來工作一直沒有用到過，漸漸的也就忘記了，現(xiàn)在重新學(xué)習(xí)一下。來看看效果圖：

這里是一個自定義的柱狀圖，然后有一個按鈕，點(diǎn)擊按鈕的時候，這里柱子會不停的運(yùn)動，類似于音樂播放器里示波器的跳動。

跟前面幾個自定義view的方式類似，重寫了onSizeChange()方法和onDraw()方法
先列一下我們要用到的變量：

 /**畫筆*/
 private Paint mPaint;
 /**控件的寬度*/
 private float mWidth;
 /**單個柱子的寬度*/
 private float mRectWidth;
 /**單個柱子的高度*/
 private float mRectHeight;
 /**柱子的總個數(shù)*/
 private float mRectCount = 10;
 /**柱子之間的間隔*/
 private int offsets = 2;
 /**Android中的線性漸變*/
 private LinearGradient mLinearGradient;
 /**隨機(jī)的柱子的高度*/
 private double mRandom;

所有的變量都在這里了

下面給畫筆初始化

 /**
  * 初始化畫筆
  */
 private void initView() {
  mPaint = new Paint();
  mPaint.setAntiAlias(true);
 }

然后在onSizeChange()里面給變量賦值

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mWidth = getWidth();
  mRectHeight = getHeight();
  mRectWidth = (int) (mWidth * 0.6 / mRectCount);
  mLinearGradient = new LinearGradient(0, 0, mRectWidth, mRectHeight,
    Color.YELLOW, Color.BLUE, Shader.TileMode.CLAMP);
  mPaint.setShader(mLinearGradient);

 }

最后繪制柱狀圖

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  for (int i = 0; i < mRectCount; i++) {
   mRandom = Math.random();
   float currentHeight = (float) (mRectHeight * mRandom);
   canvas.drawRect(
     (float) (mWidth * 0.4 / 2 + mRectWidth * i + offsets),
     currentHeight, (float) (mWidth * 0.4 / 2 + mRectWidth
       * (i + 1)), mRectHeight, mPaint);
  }

 }

這個時候，一個音樂播放器的示波器已經(jīng)完成了，但是，這個是靜態(tài)的，接下來，向外面暴露一個方法，用于刷新View，實(shí)現(xiàn)動態(tài)的效果。

    public void onStart() {
        postInvalidateDelayed(300);
    }

每間隔300ms對View進(jìn)行重繪，就可以有一個比較好的視覺效果了。

好了，最后我貼上全部的代碼：

public class MusicLine extends View {
 private Paint mPaint;
 private float mWidth;
 private float mRectWidth;
 private float mRectHeight;
 private float mRectCount = 10;
 private int offsets = 2;
 private LinearGradient mLinearGradient;
 private double mRandom;

 public MusicLine(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);

  initView();
 }

 public MusicLine(Context context, AttributeSet attrs) {
  super(context, attrs);
  initView();
 }

 public MusicLine(Context context) {
  super(context);
  initView();
 }

 /**
  * 初始化工具類
  */
 private void initView() {
  mPaint = new Paint();
  mPaint.setAntiAlias(true);
 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mWidth = getWidth();
  mRectHeight = getHeight();
  mRectWidth = (int) (mWidth * 0.6 / mRectCount);
  mLinearGradient = new LinearGradient(0, 0, mRectWidth, mRectHeight,
    Color.YELLOW, Color.BLUE, Shader.TileMode.CLAMP);
  mPaint.setShader(mLinearGradient);

 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  for (int i = 0; i < mRectCount; i++) {
   mRandom = Math.random();
   float currentHeight = (float) (mRectHeight * mRandom);
   canvas.drawRect(
     (float) (mWidth * 0.4 / 2 + mRectWidth * i + offsets),
     currentHeight, (float) (mWidth * 0.4 / 2 + mRectWidth
       * (i + 1)), mRectHeight, mPaint);
  }

 }

 public void onStart() {
  postInvalidateDelayed(300);
 }

}

至此，全部完成了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: