折线图(三)绘制x轴单位值，以及标识物

来源：互联网发布：township mac 绿钞编辑：程序博客网时间：2024/06/01 07:25

这里的坐标轴只是演示，到后面还要根据情况就算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

0 0