安卓自定义控件之不可滑动的折线图

最新推荐文章于 2021-05-25 16:40:48 发布
最新推荐文章于 2021-05-25 16:40:48 发布
阅读量866 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 自定义控件 文章标签： 控件 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cmwly/article/details/52538152
本文介绍了一个自定义的不可滑动折线图组件的实现细节，包括如何通过设置坐标轴名称、最大值、平均值等参数来动态更新视图。该组件基于Android平台开发，利用了Canvas绘图API来实现折线图的绘制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

代码在注释中，与柱状图的实现类似

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;


import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Map;

/**
 * Created by wangliang on 0013/2016/9/13.
 * 思路：每传递一次坐标名称则更新一次视图，坐标的传递采用动态计算的方法，当更改坐标轴名称的时候，所有视图清空进行重绘，柱状图显示数量由所传递的徐州的名称决定
 */
public class BrokenLineGrapNoScrollView extends View {

    private Context context;
    private final String TAG = "HistogramNoScrollView";
    private Integer defaultAxisColor = Color.BLACK;
    private Integer defaultAxisWidth;

    private List<String> xAxisListNames;
    private List<String> yAxisListNames;
    private List<Coordinate> xAxisCoordinateList;//所有x轴基准点坐标
    private List<Coordinate> yAxisCoordinateList;//所有y轴基准点坐标
    private List<Coordinate> xAxisTextCoordinateList;//所有x轴文字坐标
    private List<Coordinate> yAxisTextCoordinateList;//所有y轴文字坐标
    private List<Coordinate> listAllNoAxisCoordinate;//除轴上坐标之外的其他柱状图的坐标

    private Paint xAxisTextPaint;//x轴文字画笔
    private Paint yAxisTextPaint;//y轴文字画笔
    private Paint xAxisPaint;//x轴画笔
    private Paint yAxisPaint;//y轴画笔
    private Paint brokenLineGrapPaint;//柱状图画笔
    private Paint averageValuePaint;//平均值线
    private Path averageValuePath;//平均值线

    private Integer axisTextColor;
    private Integer axisTextSize;

    private Integer defaultBetweenXAxisAndTextSpace;
    private Integer defaultBetweenYAxisAndTextSpace;
    private int xCoordinateDistance;//x轴每段的宽度

    private Double maxValue;//柱状图所能显示的最大值
    private Double averageValue;//柱状图的平均值
    private Map<String,Double> histogramValue;//柱状图所哟柱子的值
    private float histogramShowFanWei;//柱状图所能显示的范围

    private Boolean whetherShowXAxis;//是否显示y轴
    private Boolean whetherShowYAxis;//是否显示x轴
    private Boolean whetherShowAverageValue;//是否显示柱状图平均值

    public BrokenLineGrapNoScrollView(Context context) {
        super(context);
        initSetting(context,null);
    }

    public BrokenLineGrapNoScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initSetting(context,null);
    }

    public BrokenLineGrapNoScrollView(Context context, AttributeSet attrs, Integer defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initSetting(context,defStyleAttr);
    }

    private void initSetting(Context context, Integer defStyleAttr) {
        this.context = context;
        defaultBetweenXAxisAndTextSpace = 0;
        defaultBetweenYAxisAndTextSpace = 0;
        defaultAxisColor = Color.BLACK;
        defaultAxisWidth = context.getResources().getDimensionPixelOffset(R.dimen.common_dp_0_1);
        axisTextColor = Color.RED;
        axisTextSize = context.getResources().getDimensionPixelOffset(R.dimen.default_text_medium);

        xAxisTextPaint = new Paint();
        xAxisTextPaint.setTextSize(axisTextSize);
        xAxisTextPaint.setColor(axisTextColor);

        yAxisTextPaint = new Paint();
        yAxisTextPaint.setTextSize(axisTextSize);
        yAxisTextPaint.setColor(axisTextColor);

        xAxisPaint = new Paint();
        xAxisPaint.setColor(defaultAxisColor);
//        xAxisPaint.setStrokeWidth(defaultAxisWidth);
        xAxisPaint.setAntiAlias(true);

        yAxisPaint = new Paint();
        yAxisPaint.setColor(defaultAxisColor);
//        yAxisPaint.setStrokeWidth(defaultAxisWidth);
        yAxisPaint.setAntiAlias(true);


        brokenLineGrapPaint = new Paint();
        brokenLineGrapPaint.setColor(Color.BLACK);
        brokenLineGrapPaint.setTextSize(axisTextSize);
        brokenLineGrapPaint.setAntiAlias(true);

        averageValuePaint = new Paint ( ) ;
        averageValuePaint.setColor ( Color.BLACK ) ;
        //设置画直线格式
        averageValuePaint.setStyle ( Paint.Style.STROKE ) ;
        /**设置虚线效果
         * 里边的float数组的意思是：先画长度为3的实线，再间隔长度为2的空白，之后一直重复这个单元。
         * 这个数组的长度只要大于等于2就行，你可以设置多个数值，产生不同效果，最后这个0指的是与起始位置的偏移量。
         */
        averageValuePaint.setPathEffect ( new DashPathEffect( new float [ ] { 3, 2 }, 0 ) ) ;

    }

    /**
     * 设置x轴坐标文字
     * @param xAxisListNames
     * @return
     */
    public BrokenLineGrapNoScrollView setXAxisNames(List<String> xAxisListNames, boolean whetherShowXAxis){
        this.xAxisListNames = xAxisListNames;
        this.whetherShowXAxis = whetherShowXAxis;
        xAxisCoordinateList = null;//所有x轴基准点坐标
        yAxisCoordinateList = null;//所有y轴基准点坐标
        xAxisTextCoordinateList = null;//所有x轴文字坐标
        listAllNoAxisCoordinate = null;//除轴上坐标之外的其他柱状图的坐标
        return this;
    }

    /**
     * 设置y轴坐标文字
     * @param yAxisListNames
     * @return
     */
    public BrokenLineGrapNoScrollView setYAxisNames(List<String> yAxisListNames, boolean whetherShowYAxis){
        this.yAxisListNames = yAxisListNames;
        this.whetherShowYAxis = whetherShowYAxis;
        yAxisCoordinateList = null;//所有y轴基准点坐标
        yAxisTextCoordinateList = null;
        listAllNoAxisCoordinate = null;//除轴上坐标之外的其他柱状图的坐标
        return this;
    }

    /**
     * 设置柱状图所要显示的最大值以及平均值
     * @param maxValue 最大值
     * @param averageValue 平均值
     * @param whetherShowAverageValue 是否显示平均值线
     * @return
     */
    public BrokenLineGrapNoScrollView setMaxValueAndAverageValue(double maxValue, double averageValue, boolean whetherShowAverageValue){
        this.maxValue = maxValue;
        this.averageValue = averageValue;
        this.whetherShowAverageValue = whetherShowAverageValue;
        listAllNoAxisCoordinate = null;//除轴上坐标之外的其他柱状图的坐标
        return this;
    }

    public BrokenLineGrapNoScrollView setHistogramValue(Map<String,Double> histogramValue){
        this.histogramValue = histogramValue;
        listAllNoAxisCoordinate = null;//除轴上坐标之外的其他柱状图的坐标
        return this;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if(xAxisTextCoordinateList == null){
            getXAxisTextCoordinateList();
        }
        if(xAxisCoordinateList == null){
            getXAxisCoordinateList();
        }
        if(yAxisTextCoordinateList == null){
            getYAxisTextCoordinateList();
        }
        if(yAxisCoordinateList == null){
            getYAxisCoordinateList();
        }

        if(listAllNoAxisCoordinate == null){
            getListAllNoAxisCoordinate();
        }

        /**
         * 获取所要画的虚线的path
         */
        if(averageValuePath == null && maxValue != null && averageValue != null){
            histogramShowFanWei = getHeight() - (fm.descent - fm.ascent) - defaultBetweenXAxisAndTextSpace;
            averageValuePath = new Path();
            averageValuePath.moveTo(0, (float) (histogramShowFanWei - histogramShowFanWei * (averageValue / maxValue)));
            averageValuePath.lineTo(getWidth() - defaultBetweenYAxisAndTextSpace, (float) (histogramShowFanWei - histogramShowFanWei * (averageValue / maxValue)));
        }

        /**
         * 画x轴
         */
        if(xAxisTextCoordinateList.size() > 0 && whetherShowXAxis) {
            canvas.drawLine(getX() - defaultBetweenYAxisAndTextSpace,
                    getHeight() - (fm.descent - fm.ascent) - defaultBetweenXAxisAndTextSpace,
                    getWidth(),
                    getHeight() - (fm.descent - fm.ascent) - defaultBetweenXAxisAndTextSpace
                    , xAxisPaint);
        }

        /**
         * 画y轴
         */
        if(yAxisTextCoordinateList.size() > 0 && whetherShowYAxis) {
            canvas.drawLine(getX() - defaultBetweenYAxisAndTextSpace,
                    0,
                    getX() - defaultBetweenYAxisAndTextSpace,
                    getHeight() - (fm.descent - fm.ascent) - defaultBetweenXAxisAndTextSpace
                    , xAxisPaint);
        }

        /**
         * 画虚线，代表着平均值
         */
        if(listAllNoAxisCoordinate.size() > 0  && whetherShowAverageValue){
            canvas.drawPath(averageValuePath,averageValuePaint);
        }

        /**
         * 绘制x轴上的坐标刻度文字
         */
        for(int  i = 0 ; i < xAxisTextCoordinateList.size() ; i++){
            canvas.drawText(xAxisTextCoordinateList.get(i).getCoordinatename(),
                    xAxisTextCoordinateList.get(i).getxCoordinate(),
                    xAxisTextCoordinateList.get(i).getyCoordinate(),
                    xAxisTextPaint);
        }

        /**
         * 绘制折线图
         */
        for(int  i = 0 ; i < listAllNoAxisCoordinate.size() ; i++){
            float textWidth = brokenLineGrapPaint.measureText(listAllNoAxisCoordinate.get(i).getCoordinatename());
            Integer circleRadius = null;
            if(circleRadius == null){
                circleRadius = 10;
            }
            canvas.drawCircle(listAllNoAxisCoordinate.get(i).getxCoordinate(),
                    listAllNoAxisCoordinate.get(i).getyCoordinate(),circleRadius,brokenLineGrapPaint);

            if(listAllNoAxisCoordinate.get(i).getxCoordinate() <= getX() + defaultBetweenYAxisAndTextSpace){
                canvas.drawText(listAllNoAxisCoordinate.get(i).getCoordinatename(),
                        listAllNoAxisCoordinate.get(i).getxCoordinate(),
                        listAllNoAxisCoordinate.get(i).getyCoordinate() - circleRadius - 10 ,brokenLineGrapPaint);
            }else if(listAllNoAxisCoordinate.get(i).getxCoordinate() >= getWidth()){
                canvas.drawText(listAllNoAxisCoordinate.get(i).getCoordinatename(),
                        listAllNoAxisCoordinate.get(i).getxCoordinate() - textWidth,
                        listAllNoAxisCoordinate.get(i).getyCoordinate() - circleRadius - 10 ,brokenLineGrapPaint);
            }else {
                canvas.drawText(listAllNoAxisCoordinate.get(i).getCoordinatename(),
                        listAllNoAxisCoordinate.get(i).getxCoordinate() - textWidth / 2,
                        listAllNoAxisCoordinate.get(i).getyCoordinate() - circleRadius - 10 ,brokenLineGrapPaint);
            }

            if(i > 0){
                canvas.drawLine(listAllNoAxisCoordinate.get(i - 1).getxCoordinate(),
                        listAllNoAxisCoordinate.get(i - 1).getyCoordinate(),
                        listAllNoAxisCoordinate.get(i).getxCoordinate(),
                        listAllNoAxisCoordinate.get(i).getyCoordinate(),brokenLineGrapPaint);
            }
        }

    }

    private Paint.FontMetrics fm;
    /**
     * 根据文字获得文字相对于x轴的坐标
     * @param text
     * @param xCoordinateDistance
     * @return
     */
    private float[] getXtextCoordinate(String text,float xCoordinateDistance){
        float[] xy = new float[2];
        fm = xAxisTextPaint.getFontMetrics();
        float textWidth = xAxisTextPaint.measureText(text);
        float textHeight = fm.descent - fm.ascent;
        xy[0] = xCoordinateDistance - textWidth / 2;
        xy[1] = getHeight();
        return xy;
    }

    /**
     * 获取x轴刻度文字坐标
     */
    private void getXAxisTextCoordinateList(){
        xAxisTextCoordinateList = new ArrayList<>();
        if(xAxisListNames != null) {
            xCoordinateDistance = getWidth() / (xAxisListNames.size() + 1);
            for (int i = 0; i < xAxisListNames.size(); i++) {
                float[] xtextCoordinate = getXtextCoordinate(xAxisListNames.get(i), xCoordinateDistance * (i + 1));
                xAxisTextCoordinateList.add(new Coordinate(xtextCoordinate[0], xtextCoordinate[1], xAxisListNames.get(i)));
            }
        }
    }

    /**
     * 获取x轴线坐标
     */
    private void getXAxisCoordinateList(){
        xAxisCoordinateList = new ArrayList<>();
        if(xAxisListNames != null) {
            fm = xAxisTextPaint.getFontMetrics();
            float textHeight = fm.descent - fm.ascent;
            xCoordinateDistance = getWidth() / (xAxisListNames.size() + 1);
            for (int i = 0; i < xAxisListNames.size(); i++) {
                xAxisCoordinateList.add(new Coordinate(getX() + xCoordinateDistance * (i + 1)
                        , getHeight() - textHeight, xAxisListNames.get(i)));
            }
        }
    }
    /**
     * 获取y轴刻度文字坐标
     */
    private void getYAxisTextCoordinateList(){
        yAxisTextCoordinateList = new ArrayList<>();
    }

    /**
     * 获取y轴线坐标
     */
    private void getYAxisCoordinateList(){
        yAxisCoordinateList = new ArrayList<>();
    }

    private void getListAllNoAxisCoordinate(){
        listAllNoAxisCoordinate = new ArrayList<>();
        histogramShowFanWei = getHeight() - (fm.descent - fm.ascent) - defaultBetweenXAxisAndTextSpace;
        if(maxValue != null && xAxisListNames != null && xAxisCoordinateList != null){
            for(int  i = 0 ; i < xAxisListNames.size() ; i++) {
                if (histogramValue.get(xAxisListNames.get(i)) != null) {
                    listAllNoAxisCoordinate.add(new Coordinate(xAxisCoordinateList.get(i).getxCoordinate(),
                            (float) (xAxisCoordinateList.get(i).getyCoordinate() - (histogramShowFanWei * (histogramValue.get(xAxisListNames.get(i)) / maxValue))),
                            xAxisCoordinateList.get(i).getCoordinatename()));
                }
            }
            Collections.sort(listAllNoAxisCoordinate,new Coordinate());
        }
    }
}

调用方法：

 List<String> list = new ArrayList<>();
        list.add("123");
        list.add("456");
        list.add("789");
        list.add("147");
        list.add("258");
        Map<String,Double> map = new HashMap<>();
        map.put(list.get(0),10d);
        map.put(list.get(1),15d);
        map.put(list.get(3),7d);
        ((HistogramNoScrollView)findViewById(R.id.test1)).setXAxisNames(list,true);
        ((HistogramNoScrollView)findViewById(R.id.test1)).setMaxValueAndAverageValue(20,10,true);
        ((HistogramNoScrollView)findViewById(R.id.test1)).setHistogramValue(map);

安卓自定义控件之不可滑动柱状图：http://blog.youkuaiyun.com/cmwly/article/details/52537297
安卓自定义控件之坐标存储类：http://blog.youkuaiyun.com/cmwly/article/details/49951913

android自定义折线图可左右滑动,Android自定义View实现折线图效果
weixin_29095587的博客
05-25 990
下面就是结果图(每种状态用一个表情图片表示)：一、主页面的布局文件如下：xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"xmlns:app="http://...
Android自定义折线图，可左右滑动，可点击
热门推荐
u014544193的专栏
01-10 1万+
前言 前几天有小盆友让我写一个折线图，可以点击，可以左右滑动。对于折线肯定有很多项目都使用过，所以网上肯定也有很多demo，像AndroidChart、HelloChart之类的，功能相当丰富，效果也很赞，但是太重了，其他的小demo又不符合要求，当然了，我写的自定义折线图的思想也有来自这些小demo，对他们表示感谢。 效果图 废话不多说 ，先上效果图： 效果是不是很赞，如果上图
android 折线图控件demo
06-14
android 折线图控件demo 可控制双坐标值距离，方向，颜色，线条，可支持扩至滑动等
一个安卓折线图控件
逗比学习笔记
09-29 609
1.废话少说，看效果 2.只需要一个class,即实现ChartView.java public class ChartView extends View { private float xLength; private float yLength; private float startPointX; private float startPoi
安卓 折线图控件
dianna7010的博客
10-07 272
国庆节啊 堕落啊 写了个折线图控件。。。。已封装成aar, 你可以自定义以下属性 使用方法如下 package com.wenxuan.mytestaar; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import com.wenxuan.l...
自定义控件-- 折线图--Android
quanjin24k的专栏
08-31 6400
继续我们的控件重写哈、 前阵子重写了个【柱状图】， 今天就看看这个【折线图】到底怎么整、 原理是一样的         依然没有用aChartEngine， 纯手工绘制；          绘制分析：            1.折线图讲求的也是一个坐标轴对称的一个概念，只要将这个换算做到位， 剩余工作就是体力活-绘制了；            2.明确折线图的元素，X轴，Y轴，刻度值，名称
Android自定义控件之《折线图的绘制》
知足常乐
01-03 4117
金融软件里的行情分时图，这是我们最常见的折线图，当然了，折线图的用途并不仅仅局限于此，像一般在一定区间内，为了更好的能显示出幅度的变化，那么用折线图来展示无疑是最符合效果的，当然了，网上也有很多的第三方开源，这篇文章呢，对开源的不做过多描述，想要了解请关注后续文章，好了，废话不多说，让我们从0来一步步绘制折线图吧。 先来看一下我们最终要实现的效果：         
Android自定义折线图
arrol1786936883的博客
11-01 2856
前言折线图在比较数据、天气等方面的时候会用到，网上也不乏大佬将其封装成完整控件。自己也简单写写看一下效果。先上效果图，毕竟无图何以言diao。 嗯，效果就这样，下面将介绍其从无到有的过程！！重写View的onMeasure方法在自定义控件的时候，控件的宽高（最终的测量尺寸）由控件本身和其父容器共同决定的，既然是共同决定的我们得知道父容器的“意愿”对吧！父容器的“意愿”也就三种，在Measur
Android自定义View实现折线图效果
09-01
本示例介绍如何自定义一个折线图控件，适用于展示一系列状态，并支持用户滑动查看。以下是实现这一功能的关键步骤和知识点： 1. **自定义View的基本结构**： 首先，你需要创建一个新的Java类，如`LineCharView`，...
Android自定义控件示例：圆环比例图与折线图的实现
1. Android自定义控件概述： 自定义控件是Android开发中用于增强和扩展应用UI（用户界面）功能的重要手段。通过继承现有的View类或者组合多个控件，开发者可以创建符合特定需求的控件。 2. 圆环比例图（Ring ...
android自定义折线图表格控件
04-16
android自定义折线图表格控件 采用自己在画布绘制实现的一个折线图控件 支持多条线的展示以及各种自定义的方法
Android自定义View简易折线图控件（二）
01-04
继续练习自定义View，这次带来的是简易折线图，支持坐标点点击监听，效果如下： 画坐标轴、画刻度、画点、连线。。x、y轴的数据范围是写死的 1 <= x <= 7 ，1 <= y <= 70 。。写活的话涉及到坐标轴刻度的动态计算、坐标点的坐标修改，想想就头大，这里只练习自定义View。 1、在res/values文件夹下新建attrs.xml文件，编写自定义属性： <?xml version=1.0 encoding=utf-8?> <attr name=textCol
自定义左右滑动折线图
08-24
自定义折线图，可以左右滑动或根据需求自己改动代码。
安卓自定义控件之折线图
子敬的技术博客
07-03 802
自定义控件之折线图 目标： 效果图： 需求： 1、      折线图是固定的，不会滑动，但是随着点数的增多间距逐渐变小（需要在一页中可以看见全部的点）。 2、      横轴的数字也是随着点数的增多保持好间距。 3、      折现需要平滑一点 实现思路 因为没有滑动功能，所以思路比较简单。就是画线和画数字。根据点的多少来决定纵轴间的间距和下面数字之间的间距。
Android自定义控件之折线图
LIFER
06-23 2025
前言 折线图是Android开发中经常会碰到的效果，但由于涉及自定义View的知识，对许多刚入门的小白来说会觉得很高深。其实不然，接下来我就以尽量通俗的语言来说明下图折线图效果的实现过程。 效果图 实现过程 首先，选择自定义控件的方式。 自定义控件的实现有四种方式： 1.继承View，重写onDraw、onMeasure等方法。 2.继承已有的View（比如TextView）
android自定义曲线控件,Android自定义控件实现折线图
weixin_42358827的博客
05-25 569
本文实例实现一个如下图所示的Android折线图，供大家参考，具体内容如下首先是控件绘图区域的划分，控件左边取一小部分(控件总宽度的八分之一)绘制表头，右边剩余的部分绘制表格确定表格的行列数，首先绘制一个三行八列的网格，设置好行列的坐标后开始绘制/*绘制三条横线*/for(int i=0;i<3;i++){canvas.drawLine(textWide, mLineYs[i], total...
android自定义控件之折线图
梦游美国
02-01 396
最近在学着做android自定义控件，为熟练Canvas与Paint的使用方法而写了个折线图控件。效果如下： 图中的X轴刻度数、Y轴的刻度数、折现数、以及折现数据都做了参数供调用者指定。废话不多了，直接上控件代码   package com.example.customwidget; import java.util.List; import android.conten...
android自定义曲线控件,Android自定义折线图
weixin_35036735的博客
05-25 193
list = new ArrayList<>();private Listlist2 = new ArrayList<>();private Canvas canvas;public yuanxing(Context context) {super(context);initPaint();}public yuanxing(Context context, @Nullabl...
Android自定义折线图控件示例
工程新一的博客
11-17 775
原文链接 情天孽海（简书作者）：http://www.jianshu.com/p/4b087dee6f5f# 业务需求：呈现每天，每周，每月数据信息，使用户能一眼就看出自己的数据趋势，当然最好的就是折线统计图或者柱状图了，这种也类似如股价趋势图等。 要实现这要的功能就需要借助于android强大的自定义控件了。 先上效果图:下面开始自定义控件：1.在工程目录res/values下新建attrs
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值