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. USB详解

    USB作为一种串行接口,应用日益广泛.如同每个工程设计人员必须掌握I2C,RS232这些接口一样,我们也必须掌握USB.但是USB的接口协议实在有点费解,Linux UCHI驱动作者之一Alan St ...

  2. Spring MVC工作流程图

    图一   图二    Spring工作流程描述       1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServlet捕获:       2. Disp ...

  3. Eclipse FindBugs插件

    在线安装: Update Site:http://findbugs.cs.umd.edu/eclipse 本地安装: 1.首先从findbugs网站下载插件:http://findbugs.sourc ...

  4. struts2中各个jar包作用 (转)

    Struts2.3.4 所需的Jar包及介绍 Jar包的分类 jar包名称 jar包版本 jar包 文件名 jar包 的作用 jar包内包含的主要包路径及主要类 依赖的自有jar包名称 依赖的第三方j ...

  5. Android 图形基础类Rect,扎实基础助腾飞

    转载请注明出处:王亟亟的大牛之路 上周把"垃圾桶动画写完了",然后这礼拜寻思着学习点啥,脑子闷逼了大半天,然后就找了点基础源码读读,把看的经历分享给大家. 先安利:https:// ...

  6. jQuery实现输入框提示,当获取焦点时提示消失,当失去焦点时内容为空则显示提示,否则保留输入信息

    首先看效果 默认状态下 获取焦点状态下 什么也没输入,离开 有输入离开 输入默认值离开 代码 <!DOCTYPE html> <html> <head> <m ...

  7. 简化Kubernetes应用部署工具-Helm

    [编者的话]微服务和容器化给复杂应用部署与管理带来了极大的挑战.Helm是目前Kubernetes服务编排领域的唯一开源子项目,做为Kubernetes应用的一个包管理工具,可理解为Kubernete ...

  8. JS代码大全(都是网上看到自己整理的)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  9. JS触发服务器控件的单击事件

    <script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script ...

  10. MVC后台的几种跳转方法

    //当服务器执行到Response.Redirect语句时,会立即中断页面的生命周期,直接向客户端返回信息,让客户端进行重定向操作.302(暂时重定向) Response.Redirect(" ...