当前位置: 老葡京网站娱乐 > 操作系统 > 手机系统 > 正文

Android自定义View之绘制音乐播放器示波器

时间:2016-09-01 csdn qq_25193681

老葡京网站娱乐 www.sdguanhua.com 周末玩的有点嗨,没更新博客了,今天补上,这个示波器是在大学的时候老师教的,但是出来工作一直没有用到过,渐渐的也就忘记了,现在重新学习一下。来看看效果图:

这里是一个自定义的柱状图,然后有一个按钮,点击按钮的时候,这里柱子会不停的运动,类似于音乐播放器里示波器的跳动。

跟前面几个自定义view的方式类似,重写了onSizeChange()方法和onDraw()方法 

先列一下我们要用到的变量

    
     Paint mPaint;
    
      mWidth;
    
      mRectWidth;
    
      mRectHeight;
    
      mRectCount = ;
    
      offsets = ;
    
     LinearGradient mLinearGradient;
    
      mRandom;

所有的变量都在这里了

下面给画笔初始化

    
      () {
        mPaint =  Paint();
        mPaint.setAntiAlias();
    }

然后在onSizeChange()里面给变量赋值

    
      ( w,  h,  oldw,  oldh) {
        .onSizeChanged(w, h, oldw, oldh);
        mWidth = getWidth();
        mRectHeight = getHeight();
        mRectWidth = () (mWidth *  / mRectCount);
        mLinearGradient =  LinearGradient(, , mRectWidth, mRectHeight,
                Color.YELLOW, Color.BLUE, Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);

    }

最后绘制柱状图

    
      (Canvas canvas) {
        .onDraw(canvas);
         ( i = ; i < mRectCount; i++) {
            mRandom = Math.random();
             currentHeight = () (mRectHeight * mRandom);
            canvas.drawRect(
                    () (mWidth *  /  + mRectWidth * i + offsets),
                    currentHeight, () (mWidth *  /  + mRectWidth
                            * (i + )), mRectHeight, mPaint);
        }

    }

URL:http://www.sdguanhua.com/OS/extra/201609/50414.htm

这个时候,一个音乐播放器的示波器已经完成了,但是,这个是静态的,接下来,向外面暴露一个方法,用于刷新View,实现动态的效果。

      () {
        postInvalidateDelayed();
    }

每间隔300ms对View进行重绘,就可以有一个比较好的视觉效果了。

好了,最后我贴上全部的代码:

     {
     Paint mPaint;
      mWidth;
      mRectWidth;
      mRectHeight;
      mRectCount = ;
      offsets = ;
     LinearGradient mLinearGradient;
      mRandom;

     (Context context, AttributeSet attrs,  defStyle) {
        (context, attrs, defStyle);

        initView();
    }

     (Context context, AttributeSet attrs) {
        (context, attrs);
        initView();
    }

     (Context context) {
        (context);
        initView();
    }

    
      () {
        mPaint =  Paint();
        mPaint.setAntiAlias();
    }

    
      ( w,  h,  oldw,  oldh) {
        .onSizeChanged(w, h, oldw, oldh);
        mWidth = getWidth();
        mRectHeight = getHeight();
        mRectWidth = () (mWidth *  / mRectCount);
        mLinearGradient =  LinearGradient(, , mRectWidth, mRectHeight,
                Color.YELLOW, Color.BLUE, Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);

    }

    
      (Canvas canvas) {
        .onDraw(canvas);
         ( i = ; i < mRectCount; i++) {
            mRandom = Math.random();
             currentHeight = () (mRectHeight * mRandom);
            canvas.drawRect(
                    () (mWidth *  /  + mRectWidth * i + offsets),
                    currentHeight, () (mWidth *  /  + mRectWidth
                            * (i + )), mRectHeight, mPaint);
        }

    }

      () {
        postInvalidateDelayed();
    }

}

至此,全部完成了。