android 音乐播放柱形图

xiaoxiao2021-02-28  135

直接上思路: 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。完了,就这。

这个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。 完了 就这。 附上整体代码(注意:下载Demo时,一定要将Demo中的MusicView 类替换成下面的MusicView 类!!!否侧会报数组下标越界错误)

package com.app.test.musicproject; import android.content.Context; import android.graphics.Bitmap; 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<Integer> randomList = new ArrayList<>(); private Random random = new Random();//随机产生的数(柱子的高度) private float columnEarchWight ;//每一个柱子的宽度 private float difference;//每两个柱子之间的间隔 private int columnSize = 6;//总多少个柱子(默认是6个) private Bitmap mBufferBitmap; private Canvas bufferCanvas; private int color = Color.BLUE; public int getColor() { return color; } public void setColor(int color) { this.color = color; } 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); //双缓冲 if(mBufferBitmap != null ){ mBufferBitmap.recycle(); } mBufferBitmap = Bitmap.createBitmap((int)wight,(int)height, Bitmap.Config.ARGB_8888); bufferCanvas = null; bufferCanvas = new Canvas(mBufferBitmap); Paint paint = new Paint(); paint.setColor(color); 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); bufferCanvas.drawRect(rectF1,paint); } canvas.drawBitmap(mBufferBitmap,0,0,paint); } public void runView(){ new Thread(){ @Override public void run() { super.run(); try { int nextInt; while(true){ sleep(100); randomList.clear(); for(int i = 0;i < columnSize;i++){ nextInt = random.nextInt(columnSize - 1);//这是height分为columnSize - 1,然后随即产生 占几部分 randomList.add(nextInt); } postInvalidate(); } } catch (InterruptedException e) { e.printStackTrace(); } } }.start(); } }

资源下载:http://download.csdn.net/detail/lmq121210/9834649

转载请注明原文地址: https://www.6miu.com/read-34578.html

最新回复(0)