Skip to content

Latest commit

 

History

History
103 lines (88 loc) · 4.67 KB

README.md

File metadata and controls

103 lines (88 loc) · 4.67 KB
Raw

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）

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