Skip to content

sanyuankexie/Flexml

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f3a76e9 · Dec 2, 2020
Feb 27, 2020
Feb 19, 2020
Dec 2, 2020
Jan 29, 2020
May 28, 2020
Sep 8, 2020
Aug 8, 2020
Aug 8, 2020
Oct 20, 2019
Dec 31, 2019
Feb 29, 2020
Feb 24, 2020
Feb 24, 2020
Oct 20, 2019
Oct 20, 2019
Feb 23, 2020

Repository files navigation

Flexml

0 注意

Gbox已经被重命名为FlexmlMacOS用户请一定使用0.3.1版本以上的插件。

1 适用的业务范围

在线上,对于某些适用于要求强展示、轻交互、高可配场景,我们有三种方案:

  • RN
  • WebView
  • RecyclerView

这三种方案各有各的问题。

使用RN时要占据整个Activity,而且Native和Js的通信损耗不可避。在另一边,WebView的情况则更加糟糕,需要lock主线程来加载webkit。所以这两种方案一般在这在二级、三级页面使用,如果在首页使用其实并不是非常理想。

那,RecyclerView呢?RecyclerView需要使用viewType来区分Holder,并且在每种Holder首次创建时都会执行预分配,最要命的是它还要测量布局,一下子测量那么多布局还是必须在主线程执行的操作,16ms的帧间隔只会让你铁掉帧。而且,如果我们基于viewType来实施动态化,那么Holder要怎么写?要写多少种viewType,样式有变怎么办?

什么!你说动态下发xml?Google:“想都别想,我用native API直接给你把路堵死,顺便还提升了我的性能”。

对于首页的feed流卡片、广告等,这些页面的逻辑本身就不强,而且往往也只是需要局部动态化,所以综合来看,RN和WebView硬着头皮上虽然还是能用的,但对性能的妥协就太大了,所以需要一个小型化的动态方案,并且在性能上达到极致。

2 简介

Flexml就是一个小型化的动态方案,专注于单View的动态化,它基于facebook的litho和google推荐的glide,可以这么说,它跟RN,还有点像...

但不同于传统的View的是,Flexml没有复杂的View层级,所以即使你在代码里套了1000层,它显示的可能也只有一个View。

Flexml使用Drawable直接将业务样式(文本、图片、圆角、颜色、边框等等)绘制在单个View之上,这将大大降低复杂布局在内存中的View数量(由N→1)。

你可以打开开发者模式查看View边界,这时往往只会看到一个View,除非是为了处理点击事件之类与View强相关的问题时才会自动的多生成一个VIew。

Flexml不使用任何非硬件加速的API,你看到的所有图像都是由硬件加速的API支持的,特别是在圆角处理上,不开玩笑几乎无敌。

  • 不是clipPath,我们有抗锯齿
  • 不是clipOutline,我们支持4个角设置不同的弧度并兼容api 19

但其原理也很简单,那就是使用Shader并配合Paint,在无圆角时直接drawRect,有相同圆角时使用drawRoundRect,在有不同的圆角时才使用drawPath,这种做法也是Android api 28中GradientDrawable实现圆角的做法。当然,我也将它们移植到了ColorDrawable和BitmapDrawable。

Flexml支持布局预加载,并且会在后台线程提前把布局测量好,不卡主线程。等需要显示的时候布局早已完成测量,会直接跳过measure环节直接就可以绘制,弯道超车完美解决16ms的vsync限制。

Flexml拥有良好的资源回收能力,它使用流行的Glide作为图片加载框架并结合litho的可见性感知api,能使你滑出屏幕的每一张图片都会被Glide有效回收。

Flexml提供一个playground appplayground app是一个集样例代码展示以及提供实时预览开发功能的app。

下面的截图,也是由Flexml绘制是直接从playground app中截取的,你可以在本仓库的release界面找到apk下载安装尝试,或者直接索取该布局的源码introduction/template.flexml

其实就连你在最开头看到的logo都是Flexml自绘制的,对应的源码在这logo/template.flexml

Flexml支持在真机上实时预览,为实现该功能,开发了Intellij(Android Studio)插件,配合playground app可以实时在真机上调试布局。

3 Wiki

集成、试用以及其他相关资料,请查看Github上的wiki页面

4 展望

未来,Flexml的目标是向iOS进军,在iOS设备上完成一套等价的SDK,得益于facebook和google强大的开源生态,所以这是可行的。

剩下的就是时间问题。

5 关于开源

Flexm使用kotlin开发,在Apache 2.0开源协议下发布,是一个完全基于开源软件实现的开源软件。由@LukeXeon维护。

Flexml是一个比较新的litho社区开源项目,有关其他其他facebook litho的社区开源项目,请在facebook的litho Community Showcase查找。