这里的坐标轴只是演示,到后面还要根据情况就算x,y轴的大小决定 折线图的大小。
attrs.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="LineChartView"> <!-- 视图padding --> <attr name="chartPadding" format="dimension"></attr> <!-- x轴单位 长度--> <attr name="xUnit" format="dimension"></attr> <!-- x轴单位值--> <attr name="xValue" format="integer"></attr> <!-- x轴单位字体大小--> <attr name="unitTextSize" format="dimension"></attr> <!-- x轴单位名称--> <attr name="xName" format="string"></attr> </declare-styleable> </resources>
package sam.android.utils.widget; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; import sam.android.utils.R; /** * 绘制折线图详情 */ public class LineChartView extends View { /** * 折线图padding */ private float chardPading; /** * 单位长度 */ private float xUnit; private float xValueTextSzie; /** * 单位名字 */ private String xName; /** * 单位值 */ private int xValue; public LineChartView(Context context, AttributeSet attrs) { super(context, attrs); //获取提供的chardPading长度, 如果不提供,默认为100px. 注意,拿到的dip单位最终会转化为px TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LineChartView); chardPading = typedArray.getDimension( R.styleable.LineChartView_chartPadding, 100); xUnit = typedArray.getDimension(R.styleable.LineChartView_xUnit, 50); xName = typedArray.getString(R.styleable.LineChartView_xName); xName = null != xName?xName:"x";//如果不提供名字,则默认为x xValue = typedArray.getInt(R.styleable.LineChartView_xValue, 10);//默认单位值为10 xValueTextSzie = typedArray.getDimension(R.styleable.LineChartView_unitTextSize, 25);//默认25px字体大小 } @Override protected void onDraw(Canvas canvas) { //绘制坐标轴 drawAxis(canvas); //绘制x坐标轴详情 drawX_AxisState(canvas); } /** * 为了不遮住坐标轴,给予100padding给它 */ int arrowPadding = 100; /** * 绘制x轴名称,按提供的长度来标识长度值 * @param canvas */ private void drawX_AxisState(Canvas canvas) { Paint paint = new Paint(); //直线画笔 Paint xValuePaint = new Paint(); //画笔 xValuePaint.setColor(Color.BLACK); xValuePaint.setTextSize(xValueTextSzie); paint.setColor(Color.BLACK);//设置画笔为黑色 paint.setStrokeWidth(2);//设置画笔尖大小为2px int with = getMeasuredWidth() -(int)chardPading; int height = getMeasuredHeight() -(int)chardPading; int drawXlengh = with - arrowPadding;//保留能看到箭头 int xUnit = (int) this.xUnit; canvas.drawText(xName, getMeasuredWidth()-chardPading-xValueTextSzie/2, height+xValueTextSzie, xValuePaint);//绘制单前值,在x轴下方xValueTextSzie位置 x/2是为了居中, for(int i = xUnit, j = 1; i <drawXlengh; i += xUnit, j ++) { canvas.drawLine(chardPading + i, height, chardPading + i, height - 10, paint);//绘制10px长度的线作为每单位的间隔标志物 int drawvalue = xValue*j; canvas.drawText(drawvalue+"", chardPading+i-xValueTextSzie/2, height+xValueTextSzie, xValuePaint);//绘制单前值,在x轴下方 chardPading+i-xValueTextSzie/2, xValueTextSzie位置 } } /** *绘制坐标轴, 并且设置100padding给LineChartView * @param canvas */ private void drawAxis(Canvas canvas) { int chartViewHeight = getMeasuredHeight(); //获取LineChartView高度 int charViewWidth = getMeasuredWidth(); //获取LineChartView宽度 Paint paint = new Paint(); //画笔 paint.setColor(Color.BLACK);//设置画笔为黑色 paint.setStrokeWidth(4);//设置画笔尖大小为4px /* * 绘制直线.在2点之间连线 * startX 起点的x坐标 * startY 起点的y坐标 * endX 终点的x坐标 * endY 终点的y坐标 * canvas.drawLine(startX, startY, endX, endY) */ //绘制直线paddingTop 了chardPading的y轴 canvas.drawLine(chardPading, chartViewHeight - chardPading, chardPading, chardPading, paint); //绘制y轴左边半边箭头 canvas.drawLine(chardPading, chardPading, chardPading - 10, chardPading+10, paint); //绘制y轴右边半边箭头 canvas.drawLine(chardPading, chardPading, chardPading + 10, chardPading+10, paint); //绘制直线paddingLeft 了chardPading的x轴, canvas.drawLine(chardPading, chartViewHeight - chardPading, charViewWidth - chardPading, chartViewHeight- chardPading, paint); //绘制x轴上半部分箭头 canvas.drawLine(charViewWidth - chardPading,chartViewHeight - chardPading, charViewWidth - chardPading - 10,chartViewHeight - chardPading - 10, paint); //绘制x轴下半部分箭头 canvas.drawLine(charViewWidth - chardPading, chartViewHeight - chardPading, charViewWidth - chardPading - 10,chartViewHeight - chardPading + 10, paint); } }
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="折线图(三)" android:layout_centerHorizontal="true" /> <sam.android.utils.widget.LineChartView xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:chartPadding="30dp" app:xValue="10" app:xUnit="30dp" app:xName="x轴" app:unitTextSize="12sp" /> </RelativeLayout>
待更新4