自定义view折线图分析Word下载.docx
- 文档编号:20313143
- 上传时间:2023-01-21
- 格式:DOCX
- 页数:46
- 大小:262.53KB
自定义view折线图分析Word下载.docx
《自定义view折线图分析Word下载.docx》由会员分享,可在线阅读,更多相关《自定义view折线图分析Word下载.docx(46页珍藏版)》请在冰豆网上搜索。
//释放画布
canvas.restore();
}
3、我们最后,在X,Y轴写个文字,那么我们需要知道X,Y这两个文字的坐标是多少?
如图:
因为我们已经知道lift,right,top,buttom。
其实我们就可计算出来他们的坐标了。
其实Y轴的坐标只是向右移动一点即可(lift+num,top),x的坐标向下移动一点即可(right,top+num),其中num是你移动多少。
自己可以合理调试
privatevoiddrawXYelement(Canvascanvas){
//锁定画布
canvas.save();
mTextPaint.setTextSize(36);
//文字大小
*Y轴文字提示
*drawText(String,x,y,TextPaint)
*(lift,top)
mTextPaint.setTextAlign(Paint.Align.LEFT);
//左对齐
canvas.drawText("
Y"
lift+20,top,mTextPaint);
*X轴文字提示
*drawText(String,right,buttom,TextPaint)
mTextPaint.setTextAlign(Paint.Align.RIGHT);
//右对齐
X"
right,buttom+50,mTextPaint);
我们在main的xml引用此类
<
.polylinedemo.XYView01
android:
id="
@+id/My_XYView04"
layout_width="
wrap_content"
layout_height="
500dp"
background="
#8B7500"
/>
编译一下效果:
4、附上全部代码
package.polylinedemo;
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.Path;
importandroid.text.TextPaint;
importandroid.util.AttributeSet;
importandroid.util.Log;
importandroid.view.View;
/**
*CreatedbyENZon2016/11/25.
*绘制自定义view折线图
*第一步:
绘制X和Y轴,那么我们需要什么准备呢?
*/
publicclassXYView01extendsView{
privateintviewSize;
//获取空间的尺寸,也就是我们布局的尺寸大小(不知道理解的是否正确)
privatePaintlinePaint;
//线条画笔和点画笔
privatePathmPath;
//路径对象
privateTextPaintmTextPaint;
//文字画笔
floatlift;
floattop;
floatright;
floatbuttom;
floatPathY_X;
floatPathY_Y;
floatPathX_X;
floatPathX_Y;
publicXYView01(Contextcontext,AttributeSetattrs){
super(context,attrs);
//第一步,初始化对象
linePaint=newPaint();
linePaint.setColor(Color.YELLOW);
//线条的颜色
linePaint.setStrokeWidth(8);
//线条的宽度
linePaint.setAntiAlias(true);
//取消锯齿
linePaint.setStyle(Paint.Style.STROKE);
//粗线
//初始化Path
mPath=newPath();
mTextPaint=newTextPaint(Paint.ANTI_ALIAS_FLAG|Paint.DITHER_FLAG|Paint.LINEAR_TEXT_FLAG);
mTextPaint.setColor(Color.WHITE);
publicXYView01(Contextcontext){
super(context);
@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
//在我们没学习测量控件之前强制宽高一致
super.onMeasure(widthMeasureSpec,widthMeasureSpec);
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
//第二步骤,我们在这里获取每个用到的坐标点和尺寸
viewSize=w;
//获取空间的尺寸,
Log.i("
Text"
"
viewSize:
"
+viewSize);
//这个是我们上下左右需要用到的坐标点
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
//定义一个绘制X,Y轴的方法
drawXY(canvas);
//绘制X和Y轴上的提示文字
drawXYelement(canvas);
privatevoiddrawXYelement(Canvascanvas){
}
1、我们绘制X和Y轴区域的子网格,我们需要知道他们范围?
Y轴上的最大范围=(buttom-top);
X轴的最大范围=(right-lift);
2、在这个范围我们需要分为多少个端即有几个数据?
每一段间距事是多少?
//假如我们有八条数据
intcount=pointFs.size();
//计算横纵坐标刻度间隔
spaceY=(buttom-top)/count;
spaceX=(right-lift)/count;
3、最大值和最小值是多少?
//计算横轴数据最大值
maxX=0;
for(inti=0;
i<
count;
i++){
if(maxX<
pointFs.get(i).x){
maxX=pointFs.get(i).x;
//X轴最大坐标
maxX:
--"
+maxX);
//计算横轴最近的能被count整除的值
intremainderX=((int)maxX)%divisor;
maxX=remainderX==0?
((int)maxX):
divisor-remainderX+((int)maxX);
//计算纵轴数据最大值
maxY=0;
if(maxY<
pointFs.get(i).y){
maxY=pointFs.get(i).y;
maxY:
+maxY);
//计算纵轴最近的能被count整除的值
intremainderY=((int)maxY)%divisor;
remainderY:
+remainderY);
4、既然我们已经知道了最大值和最小值,也知道了间距,那么我么开始绘制,通过for循环来绘制Y轴,每绘制每一个Y轴的点,都会把X轴与之相交的点全部绘制。
(自己可以在本子上画画图就容易理解了)例如下图
//锁定画布并设置画布透明度为75%
intsc=canvas.saveLayerAlpha(0,0,canvas.getWidth(),canvas.getHeight(),75,Canvas.ALL_SAVE_FLAG);
//绘制横纵线段
for(floaty=buttom-spaceY;
y>
top;
y-=spaceY){
y"
+y);
for(floatx=lift;
x<
right;
x+=spaceX){
x"
+x);
*绘制纵向线段
if(y==top+spaceY){
canvas.drawLine(x,y,x,y+spaceY*(count-1),linePaint);
*绘制横向线段
if(x==right-spaceX){
canvas.drawLine(x,y,x-spaceX*(count-1),y,linePaint);
5、全部代码,只是多了一个方法drawLines(canvas);
importandroid.graphics.PointF;
importjava.util.ArrayList;
importjava.util.List;
importjava.util.Random;
publicclassXYView02extendsView{
privateList<
PointF>
pointFs=newArrayList<
>
();
//数据列表
privatefloat[]rulerX,rulerY;
//xy轴向刻度
//上下左右坐标点
privatefloatlift;
privatefloattop;
privatefloatright;
privatefloatbuttom;
//Y轴文字坐标点
privatefloatPathY_X;
privatefloatPathY_Y;
//X轴文字坐标点
privatefloatPathX_X;
privatefloatPathX_Y;
privatefloatmaxX;
//x轴最大值
privatefloatmaxY;
//Y轴最大值
privatefloatspaceX,spaceY;
//刻度间隔
publicXYView02(Contextcontext,AttributeSetattrs){
//模拟数据
initData();
publicXYView02(Contextcontext){
//下面是绘制X,Y轴提示文字
*Y轴(PathY_X,PathY_Y)
PathY_X=viewSize*2/16;
PathY_Y=viewSize*1/16;
*X轴(PathX_X,PathX_Y)
PathX_X=viewSize*15/16f;
PathX_Y=viewSize*9/16f;
privatevoidinitData(){
Randomrandom=newRandom();
8;
PointFpointF=newPointF();
pointF.x=(float)(random.nextInt(100)*i);
pointF.y=(float)(random.nextInt(100)*i);
pointFs.add(pointF);
//----------------------------我们在这里添加一个绘制网格的方法----------------------------------------
drawLines(canvas);
privatevoiddrawLines(Canvascanvas){
//重置线条画笔,因为是细线,所有我这里设置了2。
linePaint.setStrokeWidth
(2);
spaceY:
+spaceY);
spaceX:
+spaceX);
//计算除数的值为数据长度减一,8个数据,7条线。
intdivisor=count-1;
divisor:
+divisor);
((int)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 自定义 view 折线 分析