16. 动画

注意:本章的动画效果只会在API 11(Android3.0.x)及以上的Android版本上生效

在低于上述的Android版本中,动画将不会被执行,并不会导致程序崩溃。

所有类型的图标都可以用一种看上去比较炫酷的动画效果来进行构建。

三种不同的动画方法来让我们在X轴,Y轴或则两个轴同时显示动画效果。

方法 使用
animateX(int durationMillis) X水平轴的图表值动画,这意味着在指定的时间内从左到右 建立图表
animateY(int durationMillis) 垂直轴的图表值动画,这意味着在指定的时间内从下到上 建立图表。
animateXY(int xDuration, int yDuration) 两个轴的图表值动画,从左到右,从下到上 建立图表。
mChart.animateX(3000); // animate horizontal 3000 milliseconds
// or:
mChart.animateY(3000); // animate vertical 3000 milliseconds
// or:
mChart.animateXY(3000, 3000); // animate horizontal and vertical 3000 milliseconds

任意一种 animate(…) 动画方法被调用后,无需再调用 invalidate() 方法。

16.1 缓动动画

这个库可以让你对动画应用”缓动函数”。

你可以选择以下预定义的静态 Easing.EasingOption :

  public enum EasingOption {
      Linear,
      EaseInQuad,
      EaseOutQuad,
      EaseInOutQuad,
      EaseInCubic,
      EaseOutCubic,
      EaseInOutCubic,
      EaseInQuart,
      EaseOutQuart,
      EaseInOutQuart,
      EaseInSine,
      EaseOutSine,
      EaseInOutSine,
      EaseInExpo,
      EaseOutExpo,
      EaseInOutExpo,
      EaseInCirc,
      EaseOutCirc,
      EaseInOutCirc,
      EaseInElastic,
      EaseOutElastic,
      EaseInOutElastic,
      EaseInBack,
      EaseOutBack,
      EaseInOutBack,
      EaseInBounce,
      EaseOutBounce,
      EaseInOutBounce,
  }

基本上,有以下两种方式进行 easing 你的动画。

1. 预定义的缓动选项:(下面代码可在所有 Android 版本运行)

public void animateY(int durationmillis, Easing.EasingOption option); 

例如,调用带有预定义缓动选项的动画方法

// animate both axes with easing
mChart.animateY(3000, Easing.EasingOption.EaseOutBack); 

当你想代码运行在 Android 3.0 (API 11) 以下时,要使用 Easing.EasingOption 。

2. 自定义缓动函数(在 Android 3.0 自定义缓动函数会使应用 crash):

public void animateY(int durationmillis, EasingFunction function); 

通过创建你自己的easing-function类并且实现EasingFunction接口,你可以实现你自己的easing功能

/**
 * Interface for creating custom made easing functions.
 */
 public interface EasingFunction {
    /**
     * Called everytime the animation is updated.
     * @param input - the time passed since the animation started (value between 0 and 1)
     */
     public float getInterpolation(float input);
 }

然后,按照如下方式使用(注意,这个不能在小于Android3.0的版本上使用,将会导致程序崩溃)

// animate both axes with easing
mChart.animateY(3000, new MyEasingFunction()); 

17. IMarker接口

版本v3.0.0以来,图表中的标记(弹出窗口)由IMarker接口表示。

17.1 IMarker接口

这个接口可以帮助你实现在图表中条目高亮的时候显示自定义的Marker窗口。这个接口给我们提供了如下需要实现的方法:

public interface IMarker {

    /**
     * @return The desired (general) offset you wish the IMarker to have on the x- and y-axis.
     *         By returning x: -(width / 2) you will center the IMarker horizontally.
     *         By returning y: -(height / 2) you will center the IMarker vertically.
     */
    MPPointF getOffset();

    /**
     * @return The offset for drawing at the specific `point`. This allows conditional adjusting of the Marker position.
     *         If you have no adjustments to make, return getOffset().
     *
     * @param posX This is the X position at which the marker wants to be drawn.
     *             You can adjust the offset conditionally based on this argument.
     * @param posY This is the X position at which the marker wants to be drawn.
     *             You can adjust the offset conditionally based on this argument.
     */
    MPPointF getOffsetForDrawingAtPos(float posX, float posY);

    /**
     * This method enables a specified custom IMarker to update it's content every time the IMarker is redrawn.
     *
     * @param e         The Entry the IMarker belongs to. This can also be any subclass of Entry, like BarEntry or
     *                  CandleEntry, simply cast it at runtime.
     * @param highlight The highlight object contains information about the highlighted value such as it's dataset-index, the
     *                  selected range or stack-index (only stacked bar entries).
     */
    void refreshContent(Entry e, Highlight highlight);

    /**
     * Draws the IMarker on the given position on the screen with the given Canvas object.
     *
     * @param canvas
     * @param posX
     * @param posY
     */
    void draw(Canvas canvas, float posX, float posY);
}

17.2 创建一个标记视图

为了创建一个自定义的标记视图,你需要创建一个实现了IMarker接口的类:

public class YourMarkerView implements IMarker { ... }

实现IMarker接口时返回什么样的值,完全取决于你自己的需求。所以,看看上面关于每个方法的介绍是很有必要的。

除了通过实现IMarker接口来创建自己的标记视图,我们还可以通过继承下面提到的一个类来达到同样的目的。这个方法比较简单,并且我们也不需要实现IMarker接口中的所有方法。只有几个特定的方法需要我们复写和自定义。最重要的是复写refreshContent(…)方法来调整标记视图中的数据。一个简单的示例如下:

public class YourMarkerView extends MarkerView {

    private TextView tvContent;

    public MyMarkerView(Context context, int layoutResource) {
        super(context, layoutResource);

        // find your layout components
        tvContent = (TextView) findViewById(R.id.tvContent);
    }

    // callbacks everytime the MarkerView is redrawn, can be used to update the
    // content (user-interface)
    @Override
    public void refreshContent(Entry e, Highlight highlight) {

        tvContent.setText("" + e.getY());

        // this will perform necessary layouting
        super.refreshContent(e, highlight);
    }

    private MPPointF mOffset; 

    @Override
    public MPPointF getOffset() {

        if(mOffset == null) {
           // center the marker horizontally and vertically
           mOffset = new MPPointF(-(getWidth() / 2), -getHeight());
        }

        return mOffset;
    }
}

17.3 获取/设置Marker

给图表设置一个Marker,使用setMarker(…)方法:

IMarker marker = new YourMarkerView();
chart.setMarker(marker);

要访问图表上的一个Marker,使用getMarker()方法:

IMarker marker = chart.getMarker();

17.4 预定义Markers

除了你自定义的MarkerView,开源库中也给我们提供了几个预定义的markers以供方便快捷的使用。其中包括:

  • MarkerView :基本marker。允许提供布局文件作为图表上呈现的标记。继承这个类并且复写refreshContent(…)方法来调整标记视图中的内容。
  • MarkerImage:一种绘制图片的标记视图。允许提供一个图片资源作为图表上的标记视图。继承这个类并且复写refreshContent(…)方法来调整标记视图中的内容。


17.5 旧版MarkerView

版本v3.0.0 之前,MarkerView类负责在图表高亮部分绘制标记视图。详情请查阅老版的the old MarkerView wiki page.


18. ChartData类

本章旨在让你更深入的了解MPAndroidChart中的数据模型。

ChartData类是像LineData,BarData等等这些数据类的父类。setData()方法可以将数据设置到图表中。

public class LineData extends ChartData { ...}

下面介绍一些ChartData类中的方法,可以直接在它的子类中使用。

18.1 数据样式

方法 使用
setValueTextColor(int color) 设置 DataSets 数据对象包含的数据的值文本的颜色
setValueTextColors(List colors) 设置一个颜色列表用于显示值
setValueTextSize(float size) 设置 DataSets 数据对象包含的数据的值文本的大小(单位是dp)
setValueTypeface(Typeface tf) 设置 DataSets 数据对象包含的数据的值文本的字体
setValueFormatter(ValueFormatter f) 为DataSets 数据对象包含的数据设置自定义的 ValueFormatter。更多关于ValueFormatter,请查阅此处
setDrawValues(boolean enabled) 启用/禁用 绘制所有 DataSets 数据对象包含的数据的值文本

18.2 Getter方法

方法 使用
getDataSetByIndex(int index) 返回目标 DataSet 列表中给定索引的数据对象。
contains(Entry entry) 检查此数据对象是否包含指定的Entry 。 注:这个相当影响性能,性能严峻情况下,不要过度使用。
contains(T dataSet) 如果数据中包含指定dataSet,返回true否则返回false

18.3 清除

方法 使用
clearValues() 清除所有 DataSet 对象和所有 Entries 的数据 。 不会删除所提供的 x-values

18.4 选中高亮

方法 使用
setHighlightEnabled(boolean enabled) 设置为true,允许通过点击高亮突出 ChartData 对象和其 DataSets
setDrawVerticalHighlightIndicator(boolean enabled) 启用/即用纵向选中高亮指示线。如果禁用,指示线将不会被绘制
setDrawHorizontalHighlightIndicator(boolean enabled) 用/即用横向选中高亮指示线。如果禁用,指示线将不会被绘制

18.5 动态数据

方法 使用
notifyDataChanged() 通知数据对象,底层数据发生变化,候执行所有必需的计算

想了解如何在数据对象上增加或者移除数据,请查阅dynamic & realtime data章节

MPAndroidChart Wiki(译文)~Part 4的更多相关文章

  1. MPAndroidChart Wiki(译文)~Part 1

    1. 基础入门 1.1 添加依赖 Gradle 工程添加依赖 (推荐使用) 项目级build.gradle中添加: allprojects { repositories { maven { url & ...

  2. MPAndroidChart Wiki(译文)~Part 6

    22. ViewPortHandler ViewPortHandler负责处理图表的视窗.也就是说它负责图表视图中的展示给用户的那部分内容.包括图表位移,缩放级别,图表大小和绘制区域以及当前偏移量.V ...

  3. MPAndroidChart Wiki(译文)~Part 5

    19. ChartData子类 这篇wiki主要关注ChartData子类的具体介绍.至于此部分没有提及到的ChartData的子类,代表他们没有特性功能需要介绍. BarData 方法 使用 set ...

  4. MPAndroidChart Wiki(译文)~Part 2

    7. 填充数据 这一章节将讲解给各式各样的图表设置数据的方法. 7.1 LineChart(线形图) 想给图表添加数据,使用如下方法: public void setData(ChartData da ...

  5. MPAndroidChart Wiki(译文)~Part 3

    13. 图例 默认情况下,所有的图表都支持图例并且会自动生成.给图表设置完数据之后,图例会被绘制出来.图例通常由多个条目组成,每个条目由标签形式/形状表示. 自动生成的图例包含的条目数取决于不同颜色的 ...

  6. MPAndroidChart的具体属性方法

    android中常用的第三方图表MPAndroidChart的一些具体属性及方法说明 注意:在将折线图转为曲线图时,lineDataSet.setMode(LineDataSet.Mode.CUBIC ...

  7. <Android 应用 之路> MPAndroidChart~BubbleChart(气泡图) and RadarChart(雷达图)

    简介 MPAndroidChart是PhilJay大神给Android开发者带来的福利.MPAndroidChart是一个功能强大并且使用灵活的图表开源库,支持Android和iOS两种,这里我们暂时 ...

  8. <Android 应用 之路> MPAndroidChart~ScatterChart

    简介 MPAndroidChart是PhilJay大神给Android开发者带来的福利.MPAndroidChart是一个功能强大并且使用灵活的图表开源库,支持Android和IOS两种,这里我们暂时 ...

  9. <Android 应用 之路> MPAndroidChart~PieChart

    简介 MPAndroidChart是PhilJay大神给Android开发者带来的福利.MPAndroidChart是一个功能强大并且使用灵活的图表开源库,支持Android和IOS两种,这里我们暂时 ...

随机推荐

  1. unicode下数据之间的转换

    首先mfc下字符串只有两种数据:char(一个字节)和wchar_t(两个字节),很多其他数据类型如TCHAR,WCHAR等都是这个两个基本类型的宏定义,BYTE是uchar 1.对话框打印char* ...

  2. linux之kali系统ssh服务开启

    1.修改sshd_config文件,命令为:vi /etc/ssh/sshd_config 2.将#PasswordAuthentication no的注释去掉,并且将NO修改为YES  //我的ka ...

  3. nxp的layerscape系列芯片中的rcw指定了一些什么信息

    答:指定了一些可以配置的硬件信息(如可以配置uart相关的引脚功能).引导镜像(uboot)的读取地址以及从何种介质(flash,sd)启动系统的信息

  4. [BZOJ4653 区间]

    Description 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x ...

  5. SSM到Spring Boot-从零开发校园商铺平台

    第1章 开发准备 本章包含课程介绍,同时讲解开发网站所需要准备的事情,并且带领大家从零开始搭建一个Maven Web. 1-1 课程导学 1-2 开发准备 第2章 项目设计和框架搭建 本章主要先带领大 ...

  6. UVA 12657 Boxes in a Line(双向链表+小技巧)

    题意:对于一行按照顺序排列盒子数字与位置都为 1,2,3,4....n 执行四种操作 c = 1    x 放到 y 的左边 c =2     x 放到 y 的右边 c =3 交换 x, y c =4 ...

  7. 解题报告:hdu1013 Digital Roots

    2017-09-07 22:02:01 writer:pprp 简单的水题,但是需要对最初的部分进行处理,防止溢出 /* @theme: hdu 1013 Digital roots @writer: ...

  8. Python学习札记(六) Basic3 List和Tuple

    参考:List Tuple Note List List是Python中一个很吊的数据结构,类似C语言的数组. 1.定义:listname = [variable 1, v2, v3, ..., vn ...

  9. Mysql事物的4种隔离级别

    SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 首先,我们使用 test 数据库, ...

  10. sass快速入门 - 笔记

    一.使用变量 1.使用$符号来标识变量. 例: $nav-color:#F90; .nav{ $width:100px; width:$width; color:$nav-color; }