自定义View之动态音频条

来源：互联网发布：淘宝定时上架怎么设置编辑：程序博客网时间：2024/06/05 03:16

上一篇文章主要介绍了如何对现有的控件进行拓展，即继承已有的某个view，这一篇文章将介绍如何自定义view，如何重写view。

先看一下demo图
这里写图片描述

思路很简单，就是绘制一个个的矩形，每个矩形之间稍微偏移一点距离即可。

 @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(                    (mRectWidth * i+offset),                    currentHeight,                    (mRectWidth * (i + 1)),                    mRectHeight,                    mPaint);        }        postInvalidateDelayed(300);    }

其中，currentHeight就是每个小矩形的高，通过横坐标的不断偏移，就绘制出了一个个静态的小矩形。每个小矩形的高通过Math.random()的方法来随机改变这些高度值，在通过postInvalidateDelayed(300)，每隔0.3秒通知View进行重绘。

这里需要注意一点的就是画矩形的问题，canvas.drawRect的前4个参数到底是什么意思，一开始我一直没弄清楚，以为要画的矩形是在一个坐标轴的右边，所有的数据都是距离原点的距离，但是这显然是错误的，正确的应该使用android坐标系和视图坐标系（以原点向右为X的正方向，以原点向下是Y轴的正方向），这里的4个参数主要是根据手机屏幕，确切的说是父控件而言：
第一个和第三个参数是距离父控件的左边的距离
第二个个第四个参数是距离父控件的上端的距离

盗用别人的一张图说明一下：
这里写图片描述
这里是canvas.drawRect(150,75,260,120);

另外，再给绘制的Paint对象增加一个LinearGradient渐变效果，这样不同高度的矩形就会有不同颜色的渐变效果。
代码如下：

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

最后，贴出全部代码：

package com.example.cntvuser.myapplication.common;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;/** * User: Picasso(380643397@qq.com) * Date: 2015-11-09 * Time: 10:37 * FIXME */public class VolumeView extends View {    private int mWidth;    private int mRectWidth;    private int mRectHeight;    private Paint mPaint;    private int mRectCount;    private int offset = 5;//间隔    private double mRandom;    private LinearGradient mLinearGradient;    public VolumeView(Context context) {        super(context);        initView();    }    public VolumeView(Context context, AttributeSet attrs) {        super(context, attrs);        initView();    }    public VolumeView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initView();    }    private void initView(){        mPaint = new Paint();        mPaint.setColor(Color.BLUE);        mPaint.setStyle(Paint.Style.FILL);        mRectCount = 8;    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mWidth = getWidth();        mRectHeight = getHeight();        mRectWidth = mWidth/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(                    (mRectWidth * i+offset),                    currentHeight,                    (mRectWidth * (i + 1)),                    mRectHeight,                    mPaint);        }        postInvalidateDelayed(300);    }}

当我看完这个的时候，我想之前分享的MPAndroidChart绘制图表应该自己也会绘制了。

0 0