死活找不到想要的折线图的开源库,
无奈,只好研究了几天自定义view后自己开始写。
package com.example.pc.test.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.PathShape;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import com.example.pc.test.R;
import java.util.ArrayList;
import java.util.List;
/**
* Created by pc on 2016/3/8.
*/
public class MyView extends View {
public int paddingLeft;
public int paddingRight;
public int paddingBottom;
public int paddintTop;
int width; //控件宽度
int height; //控件高度
List<Double> listDate;
double maxDate; //集合最大值,占满整个高度
int jgwidth; //2点间隔宽度
int[] x=new int[7];
int[] y=new int[7];
/**
* 初始化数据
*/
public void initDatas(){
listDate=new ArrayList<>();
listDate.add(0.7);
listDate.add(0.6);
listDate.add(0.7);
listDate.add(0.5);
listDate.add(1.0);
listDate.add(0.1);
listDate.add(0.8);
maxDate=getMaxint(); //算出最大的数
jgwidth=(getWidth()-60)/(listDate.size()-1);
paddingLeft=30;
paddingRight=30;
paddingBottom=30;
paddintTop=100;
width=getWidth()-paddingLeft;
height=getHeight()-paddingBottom;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
initDatas();
//算出来7个坐标点
for(int i=0;i<listDate.size();i++){
double kuan=getMyWeight(i);
double gao=getMyHeight(listDate.get(i));
x[i]=(int)kuan;
y[i]=(int)gao;
}
//绘制任意多边形
Paint paint = new Paint();
//设置画笔颜色
paint.setColor(getResources().getColor(R.color.arc_blue));
//设置圆弧的宽度
paint.setStrokeWidth(10);
//设置圆弧为空心
paint.setStyle(Paint.Style.STROKE);
//消除锯齿
paint.setAntiAlias(true);
Path path = new Path();
path.moveTo(((int)x[0]), (int)y[0]);
path.lineTo(x[1], y[1]);
path.lineTo(x[2], y[2]);
path.lineTo(x[3], y[3]);
path.lineTo(x[4], y[4]);
path.lineTo(x[5], y[5]);
path.lineTo(x[6], y[6]);
path.lineTo(getWidth()-paddingLeft,getHeight());
path.lineTo(paddingLeft,getHeight());
path.lineTo(((int)x[0]), (int)y[0]);
paint.setStyle(Paint.Style.FILL);
;
Shader mShader=new LinearGradient(0,0,0,getHeight(),
new int[]{0x00BFFF,Color.WHITE},
null,Shader.TileMode.REPEAT);
paint.setShader(mShader);
canvas.drawPath(path, paint);
//绘制蓝色连线
paint = new Paint();
//设置画笔颜色
paint.setColor(Color.parseColor("#49acd5"));
//设置圆弧的宽度
paint.setStrokeWidth(3);
//设置圆弧为空心
paint.setStyle(Paint.Style.FILL);
//消除锯齿
paint.setAntiAlias(true);
for(int i=0;i<listDate.size();i++){
double kuan=getMyWeight(i);
double gao=getMyHeight(listDate.get(i));
if(i!=0){
double kuan1=getMyWeight(i-1);
double gao1=getMyHeight(listDate.get(i-1));
canvas.drawLine((float) kuan1,(float) gao1,(float) kuan,(float) gao,paint);
}
}
/**
* 画圆外部蓝色
*/
paint = new Paint();
//设置画笔颜色
paint.setColor(Color.parseColor("#49acd5"));
//设置圆弧的宽度
paint.setStrokeWidth(3);
//设置圆弧为空心
paint.setStyle(Paint.Style.FILL);
//消除锯齿
paint.setAntiAlias(true);
for(int item=0;item<7;item++){
//定义一个矩形
RectF rf2 = new RectF(x[item]-15, y[item]-15, x[item]+15, y[item]+15);
//画圆
canvas.drawOval(rf2, paint);
}
/**
* 画圆内部白色
*/
paint = new Paint();
//设置画笔颜色
paint.setColor(Color.WHITE);
//设置圆弧的宽度
paint.setStrokeWidth(3);
//设置圆弧为空心
paint.setStyle(Paint.Style.FILL);
//消除锯齿
paint.setAntiAlias(true);
for(int item=0;item<7;item++){
//定义一个矩形
RectF rf2 = new RectF(x[item]-11, y[item]-11, x[item]+11, y[item]+11);
//画圆
canvas.drawOval(rf2, paint);
}
Log.e("-->1x:",x[0]+""+" "+y[0]);
Log.e("-->1x:",x[1]+""+" "+y[1]);
Log.e("-->1x:",x[2]+""+" "+y[2]);
Log.e("-->1x:",x[3]+""+" "+y[3]);
Log.e("-->1x:",x[4]+""+" "+y[4]);
}
public double getMaxint(){
double max=0;
for (int i=0;i<listDate.size();i++){
if(listDate.get(i)>max){
max=listDate.get(i);
}
}
return max;
}
//穿入数据源返回数据源应有的高度
public double getMyHeight(double d){
int height=getHeight()-paddintTop;
//
// Log.e("-->xx:height:",height+"");
// Log.e("-->xx:maxDate:",maxDate+"");
// Log.e("-->xx:d:",d+"");
// Log.e("-->xx:zhi:",height*(d/maxDate)+paddingBottom+"");
return (height-(height*(d/maxDate)))+paddintTop;
}
public double getMyWeight(int posotion){
// jgwidth=getWidth()-60;
// jgwidth=width/(listDate.size()-1);
// int width=getWidth()-paddingLeft-paddingRight;
// jgwidth=width/(listDate.size()-1);
return posotion*jgwidth+paddingLeft;
}
public MyView(Context context) {
super(context);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return super.onTouchEvent(event);
}
}
思路:
首先绘制不规则多边形,蓝色的一大块区域图及时,
根据点绘制6条线,蓝色的连着圆形的
圆形因为不知道怎么设置空心的颜色,
所以绘制了2次,
第一次绘制的蓝色大圆,
第二次绘制白色小圆,
一层层覆盖上去,即达到这个效果图,搞了2天 ,虽然代码写的很渣渣,好歹效果还是大概成型了