Skip to content

一个漂亮的自定义漏斗图View,支持定义描述,颜色,自动适配高度以及自定义宽度策略

Notifications You must be signed in to change notification settings

Jay-huangjie/FunnelView

Repository files navigation

FunnelView

一个漂亮的自定义漏斗View,支持自定义描述,颜色,自动适配高度或自定义高度,宽度也能自动适配,甚至能自己定义宽度的伸缩策略来达到适配效果

效果图(Design sketch)

效果 图片
默认效果 view1.png
自定义描述文字 view2.png
自定义宽度伸缩策略 view3.png

使用(Usering)

Step1

在你的root build.gradle中添加:

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

在你的app build.gradle中添加:

	dependencies {
	        implementation 'com.github.Jay-huangjie:FunnelView:v1.4'
	}

Step2

如果你只需要简单展示,只需两步即可使用:

  1. 数据源继承IFunnelData接口
  2. 调用setChartData方法将数据源设置进去即可 注意:绘制的顺序是从下往上,所以如果你希望你的数据源是从上往下排列,需要调用Collections.reverse(List<?> list);方法将集合结果反转

xml属性表(Attribute table):

属性 字段
lineWidth 线的长度
lineStoke 线的粗细
lineColor 线的颜色,如果不设置默认跟随梯形的颜色
lineTextSpace 字与线的间距
lastLineOffset 最下方线的偏移量,最下方线的长度=偏移量* 2
totalHeight 每个梯形的目标高度,当高度设置为具体的精确值时此值会失效,每个梯形高度会按照固定高度等分
funnelLineStoke 每个梯形之间线的粗细
funnelLineColor 每个梯形之间线的颜色
labelColor 描述文字的颜色
labelSize 描述文字的大小
hasLabel 是否需要描述文字 默认打开

api使用(Advanced use)

自定义描述文字

参考CustomLabelActivity,有两种实现方式:

  1. 先实现CustomLabelCallback接口,该接口会返回一个描述文字辅助类LabelHelper,可以使用该类获取画笔画布自行绘制文字或者使用内部的api来绘制
  2. 如果对自定义View熟悉或者需要实现api没有覆盖到的功能,可以从该类中调用get系列的方法获取需要的画布元素来接管描述文字的绘制,其中的坐标已经都计算好了,可以直接使用
  3. 如果对自定义View不太熟悉的可以使用build方法来构建需要绘制的元素,示例如下:
funnelView.addCustomLabelCallback(new CustomLabelCallback() {
            @Override
            public void drawText(LabelHelper mHelper, int index) {
                FunnelData mData = data.get(index);
                mHelper.build(
                        mHelper.getBuild()
                        .setFirstHalfText(mData.label+":")
                        .setFirstHalfTextStyle(mData.color)
                        .setCenterHalfText(mData.num)
                        .setCenterHalfTextStyle(Color.parseColor("#333333"),true)
                        .setFooterHalfText("个")
                        .setFooterTextStyle(Color.parseColor("#333333"))
                );
            }
        });

效果见自定义描述文字效果图

api最多支持3种文字的组合,每个组合支持设置不同的颜色和粗细,最后把它们连接到一起,注意一定要设置颜色,不然颜色默认为透明

注意这是在循环中调用此接口绘制,所以会返回一个下标用于获取指定的数据源

关闭描述文字:调用setHasLabel方法关闭

自定义宽度策略

参考CustomHalfWidthActivity,通过实现HalfWidthCallback接口即可。该接口会返回当前下面一个梯形的新增宽度,总梯形个数以及当前绘制的下标。 返回结果为每一次变化的宽度,类似于一个动画插值器,可以精确控制每个阶段不同的返回值来实现不一样的效果。

通过每次逐渐等比例增加halfWidth的宽度,即可实现一个由大变小的漏斗,注意halfWidth不能为负,并且每次返回的结果需要比lastLineOffset大,这样才能保证线的长度不会为负数,不会绘制絮乱。

更新日志(Update log)

2019/2/25
第一稳定版开发完成

2019/7/1
添加隐藏描述文字功能

2019/12/2
添加自定义描述文字Api

常见问题

编译不过可尝试将gradle版本调低,本demo为最新版

结束语(End)

开源不易,如果对你有帮助的话,请给我颗小星星噢(^_^)

About

一个漂亮的自定义漏斗图View,支持定义描述,颜色,自动适配高度以及自定义宽度策略

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages