sanyuankexie / flexml Goto Github PK

🚀基于Litho的Android高性能动态业务容器。

License: Apache License 2.0

Java 23.24% Kotlin 65.97% CSS 1.04% JavaScript 8.61% HTML 1.14%

flexbox litho dynamic android homepage high-performance layout kotlin template-engine mvc business-container glide lightweight multiple-styles expression-language feed realtime-preview view kotlin-android facebook

flexml's Introduction

Flexml

0 注意

Gbox已经被重命名为Flexml！MacOS用户请一定使用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 app，playground 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强大的开源生态，所以这是可行的。

facebook litho在iOS上的等价物是facebook AsyncDisplayKit（现在又叫Texture）。
el完全满足google j2objc项目的代码转制要求。

剩下的就是时间问题。

5 关于开源

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

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

flexml's People

Contributors

Stargazers

Watchers

Forkers

forksource lwugang bytetwo fanfanxiaozu qq545057627 zjw-swun selfimprw zhl2962 minuit-z 99kyuu ccgchen spysoos jiankehtt chis123 callmeli wangb123 cheihchiu peiboning wangzhen90 czy779509408 radiatewsg zxxcos hellovass neacy suninus ushuaia hanhailong daemon1993 gubaojian dudukee syznist boboasboy ironmantony goldtest 4amosiper linecutfeng beryl1122 jhanay pessonljxpd highbuilding junerver linchangjian yannisyao kyson yuanyang1991 cheikh-wang hyserge sulindu galihuotui liftting zouxiaodong coofee xymelon

flexml's Issues

关于Banner指示器位置的问题

Banner的指示器在RecyclerView中位置会变动，比如定位在底部，列表滑动几下后，指示器就会跑到banner的中间

能说说怎么通过插件调试吗？

能说说怎么通过插件调试吗？另外，能说说项目中各个模块的具体功能或通途吗？
除了插件还需要额外安装其他App吗？希望能简短的说一下过程，谢谢

疑问：出于什么考虑把Banner里 viewpager2修改切换速度的代码去掉了？

/Users/ko/Library/Java/JavaVirtualMachines/azul-1.8.0_322/Contents/Home/bin/java -Xmx64m -Xss256k -XX:ParallelGCThreads=1 -Dfile.encoding=UTF-8 -jar /Users/ko/Library/Application Support/Google/AndroidStudio2021.1/plugins/intellij-plugin/lib/handshake.jar --server.port=8080 --package.focus=/Users/ko/dingding/Flexml/playground/src/main/assets/layout/http/package.json

The stack size specified is too small, Specify at least 384k
Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit.

关于Text显示富文本包含超链接的问题

Text显示富文本包含超链接时，点击超链接会跳转到手机浏览器。希望框架内部能首先响应点击

解决Scroller中没法处理点击事件

package com.guet.flexbox.litho.factories

internal object ToScroller : ToComponent<Component.Builder<*>>(),
        HorizontalScrollSpec.OnInterceptTouchListener,
        VerticalScrollSpec.OnInterceptTouchListener {

    private fun onInterceptTouchEvent(view: ViewGroup, event: MotionEvent?): Boolean {
        view.requestDisallowInterceptTouchEvent(event?.action == MotionEvent.ACTION_MOVE)
        return when (event?.action) {
            MotionEvent.ACTION_MOVE -> true
            else -> false
        }
    }

    override fun onInterceptTouch(nestedScrollView: HorizontalScrollView, event: MotionEvent?): Boolean {
     
        return onInterceptTouchEvent(nestedScrollView, event)
    }

    override fun onInterceptTouch(nestedScrollView: NestedScrollView, event: MotionEvent?): Boolean {
        return onInterceptTouchEvent(nestedScrollView, event)
    }
}