Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android繪制音樂播放器示波器

Android繪制音樂播放器示波器

編輯:關於Android編程

示波器是在大學的時候老師教的,但是出來工作一直沒有用到過,漸漸的也就忘記了,現在重新學習一下。來看看效果圖:

這裡是一個自定義的柱狀圖,然後有一個按鈕,點擊按鈕的時候,這裡柱子會不停的運動,類似於音樂播放器裡示波器的跳動。

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

 /**畫筆*/
 private Paint mPaint;
 /**控件的寬度*/
 private float mWidth;
 /**單個柱子的寬度*/
 private float mRectWidth;
 /**單個柱子的高度*/
 private float mRectHeight;
 /**柱子的總個數*/
 private float mRectCount = 10;
 /**柱子之間的間隔*/
 private int offsets = 2;
 /**Android中的線性漸變*/
 private LinearGradient mLinearGradient;
 /**隨機的柱子的高度*/
 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);
  }

 }

這個時候,一個音樂播放器的示波器已經完成了,但是,這個是靜態的,接下來,向外面暴露一個方法,用於刷新View,實現動態的效果。

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

每間隔300ms對View進行重繪,就可以有一個比較好的視覺效果了。

好了,最後我貼上全部的代碼:

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);
 }

}

至此,全部完成了。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持本站。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved