电商_自定义折线图

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.ZheLineActivity">

    <com.example.myapplication.view.LineView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Activity

package com.example.myapplication.activity;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.example.myapplication.R;

//折线图
public class ZheLineActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zhe_line);
    }
}

自定义View

package com.example.myapplication.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

//折线图
public class LineView extends View{

    private String[] timeArr={
            "00:00","06:00","12:00","18:00","24:00"
    };

    //温度值
    private String[] arr={
            "-20°","-10°","0°","10°","20°","30°","40°"
    };



    private Paint mPaint;

    private float margin=60;
    private Path mPath;

    public LineView(Context context) {
        super(context);
        init(context);
    }

    public LineView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public LineView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {

         mPath=new Path();

        setBackgroundColor(Color.parseColor("#222222"));

         mPaint=new Paint();
        mPaint.setColor(Color.WHITE);
        mPaint.setStrokeWidth(6);
        mPaint.setTextSize(26);
        mPaint.setTextAlign(Paint.Align.CENTER);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //绘制标题
        canvasTitle(canvas);

        //绘制XY
        canvasXY(canvas);

        //绘制时间轴刻度
        canvasTime(canvas);

        //绘制折线
        canvasLine(canvas);

    }

    //绘制折线
    private void canvasLine(Canvas canvas) {
        mPaint.setColor(Color.WHITE);
        //获取X轴的长度
        float xWidth=getRight()-margin*2;
        //每一份的长度
        float vWidth=xWidth/timeArr.length;


        //获取Y轴的长度
        float yHeight=getBottom()-margin*2;

        //均等y轴刻度
        float vHeight=yHeight/arr.length;

//        mPath.moveTo(margin,getBottom()-margin);
//        mPath.lineTo(margin+vWidth,yHeight-vHeight);

        //canvas.drawPath(mPath,mPaint);

        canvas.drawLine(margin,getBottom()-margin,margin+vWidth,yHeight-vHeight,mPaint);

        canvas.drawLine(margin+vWidth,yHeight-vHeight,margin+vWidth*2,yHeight-vHeight*4,mPaint);
        //绘制圆
       // mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(margin+vWidth,yHeight-vHeight,10,mPaint);
    }

    //绘制时间
    private void canvasTime(Canvas canvas) {
        //根据时间数组，均分X轴

        //获取X轴的长度
        float xWidth=getRight()-margin*2;
        //每一份的长度
        float vWidth=xWidth/timeArr.length;

        float deWidth=margin;
        for (int a=0;a<timeArr.length;a++){
            if(a==0){
                canvas.drawText(timeArr[a],margin+margin/2,getBottom()-margin+30,mPaint);
            }else{
                deWidth+=vWidth;//deWidth=deWidth+vWidth
                canvas.drawText(timeArr[a],deWidth+margin/2,getBottom()-margin+30,mPaint);
            }
        }

        //获取Y轴的长度
        float yHeight=getBottom()-margin*2;

        //均等y轴刻度
        float vHeight=yHeight/arr.length;

        float defHeight=getBottom()-margin;//默认的坐标

        float defLineHeight=getBottom()-margin;//默认的坐标

        int color=Color.WHITE;
        for (int b=0;b<arr.length;b++){
            switch (b){
                case 0:
                    color=Color.GRAY;
                    break;
                case 1:
                    color=Color.YELLOW;
                    break;
                case 2:
                    color=Color.GRAY;
                    break;
                case 3:
                    color=Color.GREEN;
                    break;
                case 4:
                    color=Color.RED;
                    break;
            }

            mPaint.setColor(Color.WHITE);
            if(b==0){
                canvas.drawText(arr[b],margin-20,defHeight,mPaint);
            }else{
                defHeight-=vHeight;//
                canvas.drawText(arr[b],margin-20,defHeight,mPaint);
            }


            mPaint.setColor(color);

            if(b==0){
                canvas.drawLine(margin,defLineHeight-vHeight,margin,defLineHeight,mPaint);
            }else{
                //defHeight-=vHeight;//
                canvas.drawLine(margin,defLineHeight-vHeight*(b+1),margin,defLineHeight-vHeight*b,mPaint);
            }


        }



    }

    //绘制xy
    private void canvasXY(Canvas canvas) {
        mPaint.setColor(Color.WHITE);
        /*
        * 绘制X轴  Y轴坐标不变，只改变X的坐标
        * */
        canvas.drawLine(margin,getBottom()-margin,getRight()-margin,getBottom()-margin,mPaint);

        //绘制Y轴
        canvas.drawLine(margin,margin,margin,getBottom()-margin,mPaint);

    }

    private void canvasTitle(Canvas canvas) {
        mPaint.setColor(Color.WHITE);
        canvas.drawText("帝都气温折现图",getRight()/2,50,mPaint);
    }
}

效果图