Android端图表功能调研

竞品调研

Posted by JovenHe on January 26, 2019

本文内容是对竞品中的功能实现的调研,包括竞品的逆向、开源功能的总结分析,并给出方案进行汇报。

虽然最终由于功能上并未彻底照搬竞品,而是有相当大的扩展,所以未采用Android原生实现功能,而是以前端H5进行实现,但这个分析流程还是比较值得记录一下的。

严重声明 本文的意图只有一个就是通过分析app学习更多的逆向技术,如果有人利用本文知识和技术进行非法操作进行牟利,带来的任何法律责任都将由操作者本人承担,和本文作者无任何关系,最终还是希望大家能够秉着学习的心态阅读此文。

邮件汇报与博客文章还是有很大区别的,平时写博客时,读者是渴望学习的人,他们会仔细学习,我们要把分析过程从一开始到结尾进行一步步分析,最后得出结论,让读者有清晰的顺序感。但在邮件汇报过程中,读者是同事,大部分是领导,他们不一定会听你慢慢分析得出结论的,所以需要在开头就要写出根据哪一方面的分析,得出结论,并给出相应的措施,然后在进行一步步分析来举证。

各位:

经过近期对BDP移动端APP的研究以及对几个比较有名的安卓原生图表库的研究,我认为小鹿金数的移动端app的开发可以使用以下思路:

1. 开发上:使用Android开源图表库或反编译BDP的图表相关代码,其中各有优劣 具体可以参考下面的详细研究

2. 难点:Android开源图表与现有的BDP源码都没有达到即刻上手使用的地步,需要优化

3. 开发顺序: 先根据功能集成相关工具,例如第三方分享需要申请第三方平台账号,后期才能只专注于接口与样式改进

4. 近期进度: 已能根据反编译得到的图表库简单生成图表,但详细使用还有待摸索

经过对BDP的分析发现:

1.BDP是通过Android原生实现的图表功能,并不是使用H5

2.BDP主要功能为图表库,其他都是开源可用的组件

3.使用BDP反编译图表源码的话,存在某些代码逻辑不清,没有使用文档等问题,需要时间摸索使用

使用开源图表库的研究发现:

1. 已有的开源图表库可定制性强,样式很多,但缺少BDP中的几款图表,而且需要时间优化显示效果

2. 不管是在Github,还是在其他博客上都有丰富的使用说明文档,在使用上门槛较BDP低很多。

分析过程

图表实现方式

BDP布局边界.png 微信页面布局边界.png
   

打开手机的开发者选项中显示布局边界后,通过与微信中的一篇文章对比,可以看到BDP的页面是一个个View组成的,换言之,它是通过Android原生实现的图表功能,并不是使用H5。

反编译查看模块结构

jadx打开Apk文件

反编译后项目结构.png

分析可得

主要功能为图表库,其他都是开源可用的组件

Android做原生图表:

1.使用Android开源图表库

使用最为广泛的有hellocharts-androidMPAndroidChart

这两个图表库我都用过,但在初始展示上很简陋,但可定制性强,同样想要达到BDP中展示的页面效果需要很长时间的图表优化,修改代码,时间上可能太长。

2.反编译BDP的图表相关代码

反编译后的图表相关代码的类名,方法名未被混淆,但其使用起来有两个问题:

-1.部分方法中的代码在反编译后 出现JADX WARNING

需要根据jadx生成的伪代码,结合方法名与smali汇编语言,反推出原代码。

-2.BDP图表的使用问题

虽说图表相关代码未被混淆,但图表使用的代码被混淆了,在使用上需要分析整个app的相关使用代码来找出使用方法,Android开源图表库相关使用文档全面,所以在使用上处于弱势

BDP图表样式主要分为以下几类:

表格样式图表

表格图.png

柱状图(普通柱状图与堆积柱状图)

柱状图.png

饼状图(饼图与环形图)

饼状图.png

线图(曲线图与折线图)

漏斗图

漏斗图.png

热力地图

地图热点.png

混合图(折线图 + 柱状图)

词频图

词频图.png

使用Android开源图表库来实现图表功能

hellocharts-android与MPAndroidChart都含有柱状图、饼状图 、线图,混合图,除此之外还含有气泡图、雷达图等多种类型的图表,但并不包含漏斗图、热力地图、词频图这几个。

如果要实现漏斗图、热力地图、词频图这几个图表,可能还需要在开源图表库的基础上修改增加图表,也有可能导入其他能实现这几个图表的库。

反编译BDP的图表相关代码

在反编译出BDP的图表代码后,引入我自己的项目,但编译过程存在一些JADX WARNING,而且反编辑得到的代码是根据smali汇编码得到的,在某些逻辑上过于接近汇编,经常陷入死循环,我只能根据对代码的理解和工具生成的伪代码来重写相关代码。

现已根据代码简单实现了线图与柱状图:

已实现柱状图.png 已实现曲线图.png
   

可以看到虽然图表样式比较简陋,但已经可以根据反编译得到的源码实现图表功能了,只是还需要多熟悉源码中的图表相关方法。

在实现其他图表的时候仍未确定源码是否运行通,仍需优化源码中的某些方法。

总结

如果只是单纯复现BDP中的图表功能,我还是比较倾向于使用反编译得到的BDP源码,比较有迹可循。

如果要在BDP的基础上增加更多的图表,也可以引入其他的开源图表库来进行实现。

当然如果表格以外某些功能上和BDP有较大出入,并不是简单的复用图表,在一定程度上还会有定制化,或者和网页端有一定联系,那可以考虑使用其他方案实现。