首页 > 代码库 > android 趋势图
android 趋势图
效果图
思路:
自定义视图继承View,在onDraw()函数中绘制点和线
获取视图的高度,将视图区分为指定的趋势值,
例如,我们的销售业绩从0-10,分为10个阶段,那么就用视图的高度/10,然后根据指定的状态数组来绘制点的位置,然后线连接点
趋势视图代码:
public class LineView extends View {
//点之间的距离
private int xUnit = 50;
//视图的高度
private int height;
//默认的趋势单位
private int yUnit = 10;
//默认的趋势数组
private int arr[] = { 5, 6, 3, 6, 3, 7, 6, 7, 7, 8, 8, 2, 6, 4, 3 };
private int lineColor, radius, referLineColor, maxLevel;
private float lineWidth, referLineWidth;
public LineView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
public LineView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
private Paint paint;
private Paint paintReferLine;
private void init(Context context, AttributeSet attrs) {
lineColor = Color.GREEN;
lineWidth = 3;
referLineColor = Color.GRAY;
referLineWidth = 1;
maxLevel = 10;
TypedArray typeArray = context.obtainStyledAttributes(attrs,
R.styleable.lineView);
for (int i = 0; i < typeArray.length(); i++) {
switch (typeArray.getIndex(i)) {
//趋势线的颜色
case R.styleable.lineView_lineColor:
lineColor = typeArray.getColor(i, Color.GREEN);
break;
//趋势线的宽度
case R.styleable.lineView_lineWidth:
lineWidth = typeArray.getDimension(i, 3);
break;
//圆点的半径
case R.styleable.lineView_pointRadius:
radius = typeArray.getDimensionPixelSize(i, 5);
break;
//参考线颜色
case R.styleable.lineView_referLineColor:
referLineColor = typeArray.getColor(i, Color.GRAY);
break;
//参考线宽度
case R.styleable.lineView_referLineWidth:
referLineWidth = typeArray.getDimension(i, 1);
break;
//阶段值
case R.styleable.lineView_maxLevel:
maxLevel = typeArray.getInt(i, 10);
break;
}
}
paint = new Paint();
paint.setColor(lineColor);
paint.setStrokeWidth(lineWidth);
paint.setAntiAlias(true);
paintReferLine = new Paint();
paintReferLine.setColor(referLineColor);
paintReferLine.setStrokeWidth(referLineWidth);
paintReferLine.setAntiAlias(true);
}
public void setLevelArray(int[] array) {
this.arr = array;
invalidate();
}
public void setMaxLevel(int maxLevel) {
this.maxLevel = maxLevel;
}
public void setLineColor(int lineColor) {
this.lineColor = lineColor;
paint.setColor(lineColor);
}
public void setLineWidth(float lineWidth) {
this.lineWidth = lineWidth;
paint.setStrokeWidth(lineWidth);
}
public void setRadius(int radius) {
this.radius = radius;
}
public void setReferLineColor(int referLineColor) {
this.referLineColor = referLineColor;
paintReferLine.setColor(referLineColor);
}
public void setReferLineWidth(int referLineWidth) {
this.referLineWidth = referLineWidth;
paintReferLine.setStrokeWidth(referLineWidth);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
super.onLayout(changed, left, top, right, bottom);
height = getHeight();
yUnit = height / maxLevel;
if (arr.length > 0) {
xUnit = getWidth() / arr.length;
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (arr.length == 0) {
canvas.drawText("set Point Array First", 50, 50, paint);
return;
}
for (int i = 0; i < arr.length - 1; i++) {
int sX = i * xUnit + radius;
int sY = arr[i] * yUnit;
int eX = (i + 1) * xUnit + radius;
int code = arr[i + 1];
int eY = code * yUnit;
if (sY == 0) {
sY = radius;
}
if (eY == 0) {
eY = radius;
}
if (sY >= height - radius) {
sY = height - radius;
}
if (eY >= height - radius) {
eY = height - radius;
}
if (i == 0) {
canvas.drawLine(sX, 0, sX, height, paintReferLine);
canvas.drawCircle(sX, sY, radius, paint);
}
canvas.drawLine(eX, 0, eX, height, paintReferLine);
canvas.drawLine(sX, sY, eX, eY, paint);
canvas.drawCircle(eX, eY, radius, paint);
}
}
}
xml布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:lineView="http://schemas.android.com/apk/res/com.example.lineview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<demo.LineView
android:id="@+id/lineView"
android:layout_width="match_parent"
android:layout_height="match_parent"
lineView:lineColor="#000000"
lineView:lineWidth="2dp"
lineView:maxLevel="10"
lineView:pointRadius="5dp"
lineView:referLineColor="#DCDCDC"
lineView:referLineWidth="1dp" />
</LinearLayout>
源代码下载