简要说明
Litho和Yoga都是基于Flexbox,Flexbox是一种布局模式,标准来自于前端CCS,可以理解为类似LinearLayout提供的一种布局规范。其中Litho底层依赖于Yoga部分模块,但是两者在原理上有一些区别。
Yoga
调用方式
<?xml version="1.0" encoding="utf-8" ?>
<YogaLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yoga="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
yoga:yg_alignItems="stretch"
>
<YogaLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/sample_children_background"
yoga:yg_marginHorizontal="10dp"
yoga:yg_marginTop="5dp"
yoga:yg_flexDirection="row"
yoga:yg_alignItems="center"
>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher"
yoga:yg_flex="0"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/child_1_text"
android:textColor="@color/children_text"
yoga:yg_flex="1"
yoga:yg_marginStart="8dp"
/>
</YogaLayout>
</YogaLayout>
从调用方式不难看出,Yoga本质还是提供了一种容器(ViewGroup),自定义了很多的属性,符合Flexbox规范。因此,Android原生Widget(TextView/ImageView)直接使用。
Litho
调用方式
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
final ComponentContext context = new ComponentContext(this);
final Component component = Text.create(context)
.text("Hello World")
.textSizeDip(50)
.build();
setContentView(LithoView.create(context, component));
}
对于Litho来说,它提供LithoView作为容器,所有的控件都是自定义的Component<T>。简单来说,内部使用的Widget(即Component<T>)跟Android原生的View并没有什么关系。Component<T>自定义了各种View属性(符合Flexbox规范)、布局方式、measure、layout,TouchEvent,以及绘制方式。
因为全套Widget都不是走的Android的View体系,因此它可以支持非主线程UI进行measure/layout的,以及一些特殊的优化,比如它提到的RecycleView的高效回收。
小结
UI框架归根结底有两种实现,一种是基于原生框架做封装,提供一种语法糖功能,一种是自己实现了整套引擎。Yoga属于第一种,Litho属于第二种。
支持Flexbox有什么好处?
只需要了解一种统一的规范,就可以很舒服的在前端、windows、android、ios做出统一风格的UI,而不用每个平台去学习各个平台自有的各种View,比如android RelativeLayout,ios AutoLayout,两者属性名字没有什么关联性。Yoga官网的各平台的demo就是对于同一种布局的不同的语言实现,非常的相似。
Yoga和Litho哪个好?
两者都支持Flexbox规范。
Yoga基于原生的框架实现,可以支持原生的控件,所以在支持Flexbox规范的基础上,可以实现更好的动画效果。
Litho为全套框架都是自定义,在布局效率、内存占用上可以比原生UI框架更高,但是缺点是目前提供功能有限,无法支持太高级的动画效果、手势。
因此对于已有的App,Yoga可能更适用于做一个试点功能引入,对于新的App,Litho可以作为新的View框架拿来做整套开发(可能会有坑)。
React Native跟前面两者有什么区别
其实React Native也是支持Flexbox的,React Native可以支持用JSX实现布局、Javascrpit实现所有的业务逻辑。底层是通过javascriptbridge实现对原生API的调用。所以它主要的开发语言是javascript,更好的支持跨平台,也容易热更新。
而Yoga、Litho是各个平台用原生的语言开发。
Yoga: 支持Flexbox、支持原生的Widget、跨平台,各个平台用原生语言。
Litho: 支持Flexbox、实现整套UI引擎、仅支持android。
Rn: 支持Flexbox、跨平台、主要用Javascript开发
如果有理解错误,欢迎斧正。