android 音乐播放柱形图

直接上思路:

1: 先测量onMeasure 测量view的大小

2:绘制具体的柱形图onDraw;

其实我们的view可以wrap_content和固定值,如果是固定值就不用onMeasure了(仅限该需求下),但是如果是wrap_content的话 我们就需要重新测量大小了,因为我们需要用到wight和height。

wight = View.MeasureSpec.getSize(widthMeasureSpec);

height = View.MeasureSpec.getSize(heightMeasureSpec);

如果你感觉没思路的话,你也可以这个这样

实现步骤:

1:先做一个view 然后里面就画几个柱形图(静态的,到此成功了一半了!)

2:然后为什么会是动态的呢 ? 我们就会想到了利用开启一个线程,每次产生随机数randomNumber,然后根据随机数计算出柱形图的高height,最后刷新view。完了,就这。

221359_0.png

这个view的模型如上图所示。

根据上图,我们可以知道:柱形图的数量比间隔数多一个。

我们要先测量获取wight 和 height

wight = View.MeasureSpec.getSize(widthMeasureSpec);

height = View.MeasureSpec.getSize(heightMeasureSpec);

然后我们看下变量

private float columnEarchWight ;//每一个柱子的宽度

private float difference;//每两个柱子之间的间隔

private int columnSize = 6;//总多少个柱子(默认是6个)

columnEarchWight = (float)(wight * 0.8/columnSize);

difference = (float)(wight * 0.2 / (columnSize - 1));

之所以0.8和0.2 的意思是:我们要所有的柱形图站宽度的0.8,间隔的宽度占总宽度的0.2;,然后再计算出每一个柱子的宽度和每一个间隔的宽度;

然后我们随机产生columnSize个整数

randomList.clear();

for(int i = 0;i < columnSize;i++){

//这是height分为columnSize - 1,然后随即产生 占几部分

nextInt = random.nextInt(columnSize - 1);

randomList.add(nextInt);

}

这些整数是每一个柱形图的高度所占height的比例(一个height共分为了columnSize - 1部分,然后nextInt 是占了几部分)

然后就是画图了

Paint paint = new Paint();

paint.setColor(Color.BLUE);

paint.setAntiAlias(true);

paint.setStyle(Paint.Style.FILL);

for(int i = 0;i < columnSize;i++){

RectF rectF1 =

new RectF(difference * i + columnEarchWight * i,

height * randomList.get(i)/(columnSize - 1),

(difference * i + columnEarchWight * (i + 1)),

height);

canvas.drawRect(rectF1,paint);

}

里面的for循环,对比上图,仔细琢磨一下。difference 是间隔,columnEarchWight 是宽度,

然后在写一个handler 每次都产生不同的随机数,然后刷新view。

完了 就这。

附上整体代码

package com.app.test.musicproject;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.RectF;

import android.os.Handler;

import android.os.Message;

import android.util.AttributeSet;

import android.util.Log;

import android.view.View;

import java.util.ArrayList;

import java.util.List;

import java.util.Random;

/**

* Created by liumengqiang on 2017/5/5.

*/

public class MusicView extends View {

public MusicView(Context context) {

super(context);

}

public MusicView(Context context, AttributeSet attrs) {

super(context, attrs);

}

public MusicView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

private float height;

private float wight;

private List randomList = new ArrayList<>();

private Random random = new Random();//随机产生的数(柱子的高度)

private float columnEarchWight ;//每一个柱子的宽度

private float difference;//每两个柱子之间的间隔

private int columnSize = 6;//总多少个柱子(默认是6个)

public int getColumnSize() {

return columnSize;

}

public void setColumnSize(int columnSize) {

this.columnSize = columnSize;

columnEarchWight = (float)(wight * 0.8/columnSize);//所有柱子所占的宽度

difference = (float)(wight * 0.2 / (columnSize - 1));//所有柱子间隔宽度和

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

wight = View.MeasureSpec.getSize(widthMeasureSpec);

height = View.MeasureSpec.getSize(heightMeasureSpec);

columnEarchWight = (float)(wight * 0.8/columnSize);

difference = (float)(wight * 0.2 / (columnSize - 1));

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Paint paint = new Paint();

paint.setColor(Color.BLUE);

paint.setAntiAlias(true);

paint.setStyle(Paint.Style.FILL);

for(int i = 0;i < columnSize;i++){

RectF rectF1 =

new RectF(difference * i + columnEarchWight * i,

height * randomList.get(i)/(columnSize - 1),

(difference * i + columnEarchWight * (i + 1)),

height);

canvas.drawRect(rectF1,paint);

}

}

public void runView(){

new Thread(){

@Override

public void run() {

super.run();

try {

while(true){

sleep(100);

handler.sendEmptyMessage(1);

}

} catch (InterruptedException e) {

e.printStackTrace();

}

}

}.start();

}

private Handler handler = new Handler(){

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

int what = msg.what;

int nextInt;

switch (what){

case 1:{

randomList.clear();

for(int i = 0;i < columnSize;i++){

nextInt = random.nextInt(columnSize - 1);//这是height分为columnSize - 1,然后随即产生 占几部分

randomList.add(nextInt);

}

invalidate();

break;

}

}

}

};

}

更多推荐