Android 自定义漏斗图FunnelView(二)

原创 2016年08月29日 20:45:22

基于上次静态漏斗图做出改进:

  • 动态添加数据,根据集合数据动态展示;
  • 高度根据漏斗图数据自适配,根据数据量多少,漏斗图高度自动适配;
  • 顺利添加动画效果;
  • 各种手机型号自适配;
  • 加文字,加线条等需要的人士,参考早期版本;
  • 代码示例改日上传到github上
  • 代码地址FunnelView
 
有任何问题可以加本博客的qq群交流;


效果展示:



核心代码(完整代码见github):


public  void setData(List<Integer> moneys, int maxMoney,ArrayList<String> colors) {
    this.mMoneys = moneys;
    this.maxMoney = maxMoney;
    this.colors=colors;
    //初始化的时候需要停止来不及关闭的动画,引发不想看到的bug;
    stopAnimator();
    init();
    calculate();
    //提前算好填充数据的最大高度,这是关键;
//此方法不能放在onMeasure方法中进行测量 getMaxHight();
   requestLayout();
}
private void stopAnimator(){
    if (xAnimator!=null&&alphaAnimator!=null)
      if (xAnimator.isRunning()) {
        xAnimator.end();
        alphaAnimator.end();
     }
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(getMeasuredLength(widthMeasureSpec, true),
            getMeasuredLength(heightMeasureSpec, false));
}


private int getMeasuredLength(int length, boolean isWidth) {
    int specMode = MeasureSpec.getMode(length);
    int specSize = MeasureSpec.getSize(length);
    int size;
    if (specMode == MeasureSpec.EXACTLY) {
        size = specSize;
    } else {
        size = maxHight+(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics());
        Log.i("FunnelMain", "onMeasure:"+ size);
    }
    return size;
}
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for (int i = 0; i < mMoneys.size(); i++) {
        draw2(canvas, mPaints.get(i), mPathAngleWidths.get(i), mPathHeights.get(i),i);
    }
}

ObjectAnimator xAnimator;
ObjectAnimator alphaAnimator;
public void animateY() {
    xAnimator = ObjectAnimator.ofFloat(this, "phaseX", 0, 1);
    xAnimator.setDuration(2000);
    xAnimator.addUpdateListener(this);
    xAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    xAnimator.start();

    alphaAnimator = ObjectAnimator.ofInt(this, "textAlpha", 0, 255);
    alphaAnimator.setDuration(2000);
    alphaAnimator.addUpdateListener(this);
    alphaAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    alphaAnimator.start();
}

private  void  calculate() {
    mPathHeights.clear();
    mPathAngleWidths.clear();
    for (int i = 0; i < mMoneys.size(); i++) {
        int money = mMoneys.get(i);
        float scale = (float) money / maxMoney;
        Float mPathHeight = mTotalHeight * scale * phaseX;
        if (mPathHeight < minLineH * phaseX) {
            mPathHeight = minLineH * phaseX;
        } else if (mPathHeight > maxLineH * phaseX) {
            mPathHeight = maxLineH * phaseX;
        }
        mPathHeights.add(i, mPathHeight);
        Float mPathAngleWidth = mPathHeight / ANGLE_SCALE;
        mPathAngleWidths.add(i, mPathAngleWidth);
    }
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

android 3D效果的饼状图实现销售漏斗

先上效果图实现思路:核心其实就是圆柱的绘制,上下两个椭圆中间用线起来就行了。直接上代码/** * Created by catos on 2016/7/21. * 销售漏斗 */publi...

Android自定义View(二)

  • 2016年08月21日 20:28
  • 3.59MB
  • 下载

Android Study之自定义View进阶路:绘制饼图(二)

> LZ-Says:前行的路,曲折颇多,有过不开心,也有过属于自己的小幸福,个人感觉最重要的,保持初心,方得始终~一起加油~! 前言 上一篇为大家带来了自定义View的初级使用,也就是简单的绘制一些图...

Android自定义7日年化收益率图表

  • 2017年04月25日 21:43
  • 35.75MB
  • 下载

android 自定义view 之 动态音频图 (二)

android 自定义view 之 动态音频图 (二)

android自定义轮播图

  • 2016年12月03日 17:33
  • 4.45MB
  • 下载

SVG可视化简易漏斗图

Visualization as a problem-solving and knowledge discovery tool has become even more important as we...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 自定义漏斗图FunnelView(二)
举报原因:
原因补充:

(最多只允许输入30个字)