效果图如下:
刚开始尝试用第三方画曲线的框架来画效果图,后来发现曲线间的阴影当有负数的度数的时候画不出来,而且不需要点击放大、点点可点的效果,用框架显得很臃肿,所以最后用自定义View来画的折线图。自定义画折线图的大致思路:这个图是有多个四边形组成的(4个点连接起来就是一个四边形),两边延伸:添加四个多余的点,将左右的边距设置成负数即可。
代码如下:
public class WeatherChartView extends View {
/**
* x轴集合
*/
private float mXAxis[] ;
/**
* 白天y轴集合
*/
private float mYAxisDay[] ;
/**
* 夜间y轴集合
*/
private float mYAxisNight[] ;
/**
* x,y轴集合数
*/
private int LENGTH ;
/**
* 白天温度集合
*/
private int mTempDay[] ;
/**
* 夜间温度集合
*/
private int mTempNight[] ;
/**
* 控件高
*/
private int mHeight;
/**
* 字体大小
*/
private float mTextSize;
/**
* 圓半径
*/
private float mRadius ;
/**
* 圓半径今天
*/
private float mRadiusToday ;
/**
* 文字移动位置距离
*/
private float mTextSpace ;
/**
* 线的大小
*/
private float mStokeWidth ;
/**
* 白天折线颜色
*/
private int mColorDay = Color.parseColor("#ffffff");
/**
* 夜间折线颜色
*/
private int mColorNight = Color.parseColor("#ffffff");;
/**
* 字体颜色
*/
private int mTextColor = Color.parseColor("#ffffff");;
/**
* 屏幕密度
*/
private float mDensity;
/**
* 控件边的空白空间
*/
private float mSpace;
@SuppressWarnings("deprecation")
public WeatherChartView(Context context, AttributeSet attrs) {
super(context, attrs);
mDensity = getResources().getDisplayMetrics().density;
mRadius = 3 * mDensity;
mRadiusToday = 3 * mDensity;
//mSpace = 3 * mDensity;
mTextSpace = 10 * mDensity;