Android开发X Y轴Board的绘制教程示例

目录
  • 正文
    • 1. X轴的绘制
    • 2. Y轴的绘制
      • 绘制RightYAxisLabel
    • 3. Board 绘制

正文

上篇大致介绍了RecyclerChart能够绘制的图表,以及一些特有的功能。从这节开始具体地介绍图表的绘制,本节先介绍RcyclerChart中一些图表的相关辅助的绘制,X、Y轴,以及Board的绘制。

上一章节有介绍绘制的逻辑都在ItemDecoration中实现的,而各种图表基本都有X、Y轴、Board相关的绘制,所以把他们的相关逻辑抽象到上层的基类BaseChartItemDecoration, 包含 YAxisRender、XAxisRender、BarBoardRender三个绘制的Render中显示相关的绘制逻辑,子类的相关的X、Y轴及Board 的相关绘制可以override单独实现, 泛型参数 BaseChartAttrs, BaseYAxis 根据具体的图表传递不同的类给Render进行绘制。

X、Y轴相对而言并不属于单个ItemView的附属,属于整个Chart的附属,所以单独地让RecyclerView设置Padding,然后利用padding的空间绘制X、Y轴,以BarChartRecyclerView为例:

1. X轴的绘制

ReycylerView中每个Item Model 为 RecyclerEntry, 其中包含一个字段 type, 会根据当前的位置设定一个值。

public static final int TYPE_XAXIS_FIRST = 1;//一个月
public static final int TYPE_XAXIS_SECOND = 2;//7天的线,需要drawText
public static final int TYPE_XAXIS_THIRD = 3;//最小刻度的线
public static final int TYPE_XAXIS_SPECIAL = 4;//同时是月线以及7日分隔线
public long timestamp;
public int type;
public LocalDate localDate;

例如,绘制一天步数的一个图表,每半小时一根柱子,一共48根BarChart, 其中要 0点、6点、12点、18点、24点要显示X轴坐标,则以上几个位置对应的type值设置为 TYPE_XAXIS_SECOND, 普通的设置为 TYPE_XAXIS_THIRD, 一般的设置为 TYPE_XAXIS_THIRD,在创建RecyclerEntry 的list绑定到Adapter的时候设定。绘制X轴时,drawLine 以及drawLabel 都会依照这个 Entry里的Type来设定,具体绘制相关的Color、size、position等都设定在 BaseAttrs 中, 例如一下绘制X轴的网格线:

//绘制网格 纵轴线
    final public void drawVerticalLine(Canvas canvas, RecyclerView parent, XAxis xAxis) {
        if (!mBarChartAttrs.enableXAxisGridLine){
            return;
        }
        BaseBarChartAdapter mAdapter = (BaseBarChartAdapter) parent.getAdapter();
        List<BarEntry> entries = mAdapter.getEntries();
        int parentTop = parent.getPaddingTop();
        int parentBottom = parent.getHeight() - parent.getPaddingBottom();
        int parentLeft = parent.getPaddingLeft();
        final int childCount = parent.getChildCount();
        mTextPaint.setTextSize(xAxis.getTextSize());
        int parentRight = parent.getWidth() - parent.getPaddingRight();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            int adapterPosition = parent.getChildAdapterPosition(child);
            if (adapterPosition == RecyclerView.NO_POSITION){
                continue;
            }
            int type = parent.getAdapter().getItemViewType(adapterPosition);
            final int x = child.getRight();
            if (x > parentRight || x < parentLeft) {//超出的时候就不要画了
                continue;
            }
            if (type == BarEntry.TYPE_XAXIS_FIRST || type == BarEntry.TYPE_XAXIS_SPECIAL) {
                if (mBarChartAttrs.enableXAxisFirstGridLine){
                    boolean isNextSecondType = isNearEntrySecondType(entries, xAxis, child.getWidth(), adapterPosition);
                    mLinePaint.setColor(xAxis.firstDividerColor);
                    Path path = new Path();
                    if (isNextSecondType) {
                        path.moveTo(x, parentBottom - mBarChartAttrs.contentPaddingBottom);
                    } else {
                        path.moveTo(x, parentBottom);
                    }
                    path.lineTo(x, parentTop);
                    canvas.drawPath(path, mLinePaint);
                }
            } else if (type == BarEntry.TYPE_XAXIS_SECOND) {
                if (mBarChartAttrs.enableXAxisSecondGridLine){
                    //拿到child 的布局信息
                    PathEffect pathEffect = new DashPathEffect(new float[]{5, 5, 5, 5}, 1);
                    mDashPaint.setPathEffect(pathEffect);
                    mDashPaint.setColor(xAxis.secondDividerColor);
                    Path path = new Path();
                    path.moveTo(x, parentBottom - DisplayUtil.dip2px(1));
                    path.lineTo(x, parentTop);
                    canvas.drawPath(path, mDashPaint);
                }
            } else if (type == BarEntry.TYPE_XAXIS_THIRD) {
                if (mBarChartAttrs.enableXAxisThirdGridLine){
                    //拿到child 的布局信息。 绘制同上。
                    。。。
                    canvas.drawPath(path, mDashPaint);
                }
            }
        }
    }

关于XAxis 坐标的绘制,通过ValueFormatter 来获取Label,这样可以将Label的文本内容显示交给设定ValueFormatter的提供者,ValueFormatter借用的MPChart里的概念。这里通过每个Entry中的type属性以及x, timestamp等相关属性,自己的需求来控制Label.

//绘制X坐标
    final public void drawXAxis(Canvas canvas, RecyclerView parent, XAxis xAxis) {
        if (!mBarChartAttrs.enableXAxisLabel){
            return;
        }
        int parentBottom = parent.getHeight() - parent.getPaddingBottom();
        int parentLeft = parent.getPaddingLeft();
        final int childCount = parent.getChildCount();
        mTextPaint.setTextSize(xAxis.getTextSize());
        int parentRight = parent.getWidth() - parent.getPaddingRight();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final int xLeft = child.getLeft();
            final int xRight = child.getRight();
            BarEntry barEntry = (BarEntry) child.getTag();
            String dateStr = xAxis.getValueFormatter().getBarLabel(barEntry);
            if (!TextUtils.isEmpty(dateStr)) {
                int childWidth = child.getWidth();
                float txtWidth = mTextPaint.measureText(dateStr);
                float txtXLeft = 0;
                float txtY = parentBottom - DisplayUtil.dip2px(1);
                if (childWidth > txtWidth) {//柱状图的宽度比较大的时候,文字居中
                    float distance = childWidth - txtWidth;
                    txtXLeft = xLeft + distance / 2;
                } else {
                    txtXLeft = xRight - xAxis.labelTxtPadding - txtWidth;
                }
                float txtXRight = txtXLeft + txtWidth;
                int length = dateStr.length();
                if (DecimalUtil.bigOrEquals(txtXLeft, parentLeft) && DecimalUtil.smallOrEquals(txtXRight, parentRight)) {//中间位置
                    canvas.drawText(dateStr, txtXLeft, txtY, mTextPaint);
                } else if (txtXLeft < parentLeft && txtXRight > parentLeft) {//处理左边界
                    int displayLength = (int) ((txtXRight - parentLeft) / txtWidth * length);
                    int index = length - displayLength;
                    canvas.drawText(dateStr, index, length, parentLeft, txtY, mTextPaint);
                } else if (txtXRight > parentRight && txtXLeft < parentRight) {//处理右边界
                    int displayLength = (int) ((parentRight - txtXLeft + 1) / txtWidth * length);
                    int endIndex = displayLength;
                    if (endIndex < length) {
                        endIndex += 1;
                    }
                    canvas.drawText(dateStr, 0, endIndex, txtXLeft, txtY, mTextPaint);
                }
            }
        }
    }

2. Y轴的绘制

Y轴的具体 Left、Right的绘制可以根据ChartAttrs中的设置来控制具体显示哪一种。上面有提到X/Y/Board的绘制会受RecyclerView中的padding来限制绘制的区域大小,然后具体的Y轴网格线绘制几格,每格的Label显示均由YAxis来控制,特殊的需求也支持自定义,之前有介绍过MPChart图表中Y轴的这个计算,需要跟具体的业务数据相关联。得到了YAxis的labelCount 以及具体的Label List 之后,绘制就非常简单了。

//绘制 Y轴刻度线 横的网格线
    public void drawHorizontalLine(Canvas canvas, RecyclerView parent, T yAxis) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        mLinePaint.setColor(yAxis.getGridColor());
        int top = parent.getPaddingTop();
        int bottom = parent.getHeight() - parent.getPaddingBottom();
        float distance = bottom - mBarChartAttrs.contentPaddingBottom - mBarChartAttrs.contentPaddingTop - top;
        int lineNums = yAxis.getLabelCount();
        float lineDistance = distance / lineNums;
        float gridLine = top + mBarChartAttrs.contentPaddingTop;
        for (int i = 0; i <= lineNums; i++) {
            if (i > 0) {
                gridLine = gridLine + lineDistance;
            }
            Path path = new Path();
            path.moveTo(left, gridLine);
            path.lineTo(right, gridLine);
            boolean enable = false;
            if (i == lineNums && mBarChartAttrs.enableYAxisZero) {
                enable = true;
            } else {
                enable = mBarChartAttrs.enableYAxisGridLine;//允许画 Y轴刻度
            }
            if (enable) {
                canvas.drawPath(path, mLinePaint);
            }
        }
    }

绘制RightYAxisLabel

//绘制右边的刻度
    public void drawRightYAxisLabel(Canvas canvas, RecyclerView parent, T yAxis) {
        if (mBarChartAttrs.enableRightYAxisLabel) {
            int right = parent.getWidth();
            int top = parent.getPaddingTop();
            int bottom = parent.getHeight() - parent.getPaddingBottom();
            mTextPaint.setTextSize(yAxis.getTextSize());
            String longestStr = yAxis.getLongestLabel();
            float yAxisWidth = mTextPaint.measureText(longestStr) + mBarChartAttrs.recyclerPaddingRight;
            int paddingRight = computeYAxisWidth(parent.getPaddingRight(), yAxisWidth);
            //设置 recyclerView的 BarChart 内容区域
            parent.setPadding(parent.getPaddingLeft(), parent.getPaddingTop(), paddingRight, parent.getPaddingBottom());
            float topLocation = top + mBarChartAttrs.contentPaddingTop;
            float containerHeight = bottom - mBarChartAttrs.contentPaddingBottom - topLocation;
            float itemHeight = containerHeight / yAxis.getLabelCount();
          //通过YAxis获取 具体的label List.
            HashMap<Float, Float> yAxisScaleMap = yAxis.getYAxisScaleMap(topLocation, itemHeight, yAxis.getLabelCount());
            float txtX = right - parent.getPaddingRight() + yAxis.labelHorizontalPadding;
            for (Map.Entry<Float, Float> entry : yAxisScaleMap.entrySet()) {
                float yAxisScaleLocation = entry.getKey();
                float yAxisScaleValue = entry.getValue();
                String labelStr = yAxis.getValueFormatter().getFormattedValue(yAxisScaleValue);
                float txtY = yAxisScaleLocation + yAxis.labelVerticalPadding;
                canvas.drawText(labelStr, txtX, txtY, mTextPaint);
            }
        }
    }

3. Board 绘制

Board的绘制相对而言就简单了,只需根据mBarChartAttrs 中的属性值,以及RecyclerView的padding值,以及绘制颜色背景等绘制即可。

final public void drawBarBorder(@NonNull Canvas canvas, @NonNull RecyclerView parent) {
    if (mBarChartAttrs.enableBarBorder) {
      RectF rectF = new RectF();
      float start = parent.getPaddingLeft();
      float top = parent.getPaddingTop();
      float end = parent.getRight() - parent.getPaddingRight();
      //底部有0的刻度是不是不用画,就画折线了。
      float bottom = parent.getHeight() - parent.getPaddingBottom() - mBarChartAttrs.contentPaddingBottom;
      rectF.set(start, top, end, bottom);
      mBarBorderPaint.setStrokeWidth(mBarChartAttrs.barBorderWidth);
      canvas.drawRect(rectF, mBarBorderPaint);
    }
}

至此本章节介绍完毕,相对而言还是比较简单的,YAxis中的label 的计算等,可以参考我代码里面的Case。

以上就是Android开发X Y轴Board的绘制教程示例的详细内容,更多关于Android Board绘制X Y轴的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android APP开发KML轨迹导出教程示例

    目录 引言 写入kml gps点 奥森10km 轨迹图 引言 前两天在知乎上面找海外骑行.跑步软件Strava的时候,看到一个将运动轨迹从A App 导出,导入到B APP的工具 APP RunGap,恰巧之前给台湾.印度那边的测试同事处理他们的问题时,写过这样的一个工具,KML文件导出,然后在Mac下的 Google 地球上看轨迹是否偏差,是否存在坐标类型的转化错误等问题,能够比较快地定位问题. KML文件,读者有不知道的可以Google一下,它是一种专门存GPS 点数据的xml文件格式. 将

  • MPAndroidChart 自定义图表绘制使用实例

    目录 引言 1. LineGradientChart 2. 散点图 3. SteppedChart 引言 声明:文中的MPChart代指MPAndroidChart. 本文主要讲解LineChart中的三个变种Chart,第一个是渐变的LineGradientChart, 第二个是频率散点图,游泳阶梯图,其实MPChart本身也有阶梯图的,DataSet.isDrawSteppedEnabled()这个属性来控制. 1. LineGradientChart 原理:每个Entry中的 Yvalue

  • Android画图实现MPAndroidchart折线图示例详解

    目录 效果图 依赖 activity.xml MainActivity MyMarkerView 自定义class maekertextview .xml 常用属性 效果图 用的是3.1.0的依赖 依赖 allprojects { repositories { jcenter() maven { url "https://jitpack.io" } } } //依赖 dependencies{ implementation 'com.github.PhilJay:MPAndroidCh

  • Android MPChart自定义睡眠泳道图教程示例

    目录 声明 SleepItemEntry SleepBuffer SleepRender 声明 本文MPChart 代表的就是 MPAndroidChart. 本章节继续上次的自定义绘制,不同之前的图形, 日历下边的睡眠泳道图,每个item不同于之前的图形,会均等的width, 相反的是均等的高度的矩形,不等的宽度,就是所占X轴的比重不一样,见1.1睡眠泳道图. 1.0 睡眠泳道图 首先跳出MPChart自定义这层概念,我们来绘制这个图形,本身来说还是蛮简单的,绘制四种不同的Rect, 根据不同

  • MPAndroidChart绘制自定义运动数据图表示例详解

    目录 引言 TimeAxis SportYAxis CustomLineChart 引言 声明:文中的MPChart代指MPAndroidChart. 本系列之前的文章介绍的MPChart中BarChart相关的一些绘制,接下来我们看看LineChart相关的绘制. 这里以实际的运动相关的图表数据做业务支撑来讲解.MPChart图表支持多指触控方法,这里所有的图表自定义都关掉了这个属性,这样就减少Transformer,以及绘制过程中的更多的变动,相当于一个静态的图. 通常图表在放大的过程中,坐

  • Android实现简单的自定义ViewGroup流式布局

    目录 前言 一.基本的测量与布局 二.流式的布局的layout 三.流式的布局的Measure 后记 前言 前面几篇我们简单的复习了一下自定义 View 的测量与绘制,并且回顾了常见的一些事件的处理方式. 那么如果我们想自定义 ViewGroup 的话,它和自定义View又有什么区别呢?其实我们把 ViewGroup 当做 View 来用的话也不是不可以.但是既然我们用到了容器 ViewGroup 当时是想用它的一些特殊的特性了. 比如 ViewGroup 的测量,ViewGroup的布局,Vi

  • Android MPAndroidChart绘制原理

    目录 前言 1. Chart整体结构 2.Chart 绘制参与的业务组件 Render Buffer Entry.DataSet Attribute 3. 整体Chart绘制流程 前言 官方demo地址:github.com/PhilJay/MPA… 笔者接下来的文章里MPChart 代表的就是 MPAndroidChart. 下载后AS里运行,可以看到demo里面有 Line Charts, Bar Charts, Pie Charts, Radar Charts, Other Charts.

  • Android开发X Y轴Board的绘制教程示例

    目录 正文 1. X轴的绘制 2. Y轴的绘制 绘制RightYAxisLabel 3. Board 绘制 正文 上篇大致介绍了RecyclerChart能够绘制的图表,以及一些特有的功能.从这节开始具体地介绍图表的绘制,本节先介绍RcyclerChart中一些图表的相关辅助的绘制,X.Y轴,以及Board的绘制. 上一章节有介绍绘制的逻辑都在ItemDecoration中实现的,而各种图表基本都有X.Y轴.Board相关的绘制,所以把他们的相关逻辑抽象到上层的基类BaseChartItemDe

  • Android开发组件flutter的20个常用技巧示例总结

    目录 1.map遍历快速实现边距,文字自适应改变大小 2.使用SafeArea 添加边距 3.布局思路 4.获取当前屏幕的大小 5.文本溢出显示省略号 6.一个圆角带搜索icon的搜索框案例 7.修改按钮的背景色 8.tab切换实例 9.点击事件组件点击空白区域不触发点击 10.使用主题色 11.往安卓模拟器中传图片 12.控制text的最大行数显示影藏文字 13.去掉默认的抽屉图标 14.图片占满屏 15.倒计时 16.固定底部 17.添加阴影 18.隐藏键盘 19.获取父级组件大小 20.点

  • android开发修改状态栏背景色和图标颜色的示例

    本文介绍了android开发修改状态栏背景色和图标颜色的示例,分享给大家,具体如下: 修改状态栏背景色和图标颜色 默认是黑底白字的,现在要改为白底黑字的 先看下效果图: 1.状态栏背景是白色: 在style中设置 <item name="colorPrimaryDark">@color/white</item> 2.写修改状态栏图标的颜色(暂时只知道黑色和白色) public class StatusBarUtil { /** * 修改状态栏为全透明 * @pa

  • Android开发微信小程序页面的图文教程

    初识Android Android是我们在日常生活中注视最久的,我们所使用的所有手机APP基本上都可以在Android上运行.而这次我们将开发一个app页面. Android Studio Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试.大概就是一个开发工具. 项目介绍 我们会首先建立大概的框架,会将一个页面分为三个部分.下

  • Android开发Intent跳转传递list集合实现示例

    目录 引言 传递list集合 传递ArrayList集合 传递实体类 传递String 引言 Android 两个activity之间普通传值 如:单个String ,int ... 就不多说了 参考文章 https://www.jb51.net/article/257178.htm 传递list集合 注意:list传值的实体类用序列化 先创建个实体类(等下测试用) import java.io.Serializable; //别忘了序列化 Serializable public class D

  • android开发通过Scroller实现过渡滑动效果操作示例

    本文实例讲述了android开发通过Scroller实现过渡滑动效果.分享给大家供大家参考,具体如下: 主要介绍一下Scroller这个类,它可以实现过渡滑动的效果,使滑动看起来不是那么生硬,当然它用大量的重绘来实现,invalidate();通过源码看: 看构造方法 /** * Create a Scroller with the default duration and interpolator. */ public Scroller(Context context) { this(cont

  • Android开发中自定义ProgressBar控件的方法示例

    本文实例讲述了Android开发中自定义ProgressBar控件的方法.分享给大家供大家参考,具体如下: 很简单,首先加载Drawable,在onMeasure设置好其区域大小, 然后使用canvas.clipRect绘图 public class ProgressView extends ImageView { private Drawable maskDraw; /** * 加载的进度 0-100 */ private int mProcess = 20; public ProgressV

  • Android开发实现的简单媒体播放器功能示例

    本文实例讲述了Android开发实现的简单媒体播放器功能.分享给大家供大家参考,具体如下: 一.概述: 因为播放视频需要很大的内存,所以必须使用surfaceview , surfaceview 里实现了双缓冲的功能, 二.全部代码: /** * @描述 使用surfaceview 创建视频 * @项目名称 App_Basic * @包名 com.example.basic.media * @类名 MediaPlayerActivity * @author chenlin * @date 201

  • Android开发实现简单的观察者与被观察者示例

    本文实例讲述了Android开发实现简单的观察者与被观察者.分享给大家供大家参考,具体如下: 概述: 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己. 观察者模式结构图 Subject:抽象主题(抽象被观察者),抽象主题角色把所有观察者对象保存在一个集合里,每个主题都可以有任意数量的观察者,抽象主题提供一个

  • Android开发之基于DialogFragment创建对话框的方法示例

    本文实例讲述了Android基于DialogFragment创建对话框的方法.分享给大家供大家参考,具体如下: /** * 使用DialogFragment创建对话框 * @description: * @author ldm * @date 2016-5-12 下午2:00:01 */ public class FragmentAlertDialog extends Activity { private Button button; @Override protected void onCre

随机推荐