1.什么是Litho？
Litho是Facebook推出的一套高效构建Android UI 的声明式框架，主要 目的是提升RecyclerView复杂列表的滑动性能和降低内存的使用。
Litho是一套完全不同于Android的UI框架，他继承了Facebook一向的大胆风格，在Android采用React风格的UI。
2.入门
通过本篇学习，你将学到 （单组件显示 ，垂直布局显示，滚动列表显示） Hello World
首先我们在Android工程目录下app的 build.gradle中添加以下依赖：
dependencies {
// Litho
implementation 'com.facebook.litho:litho-core:0.33.0'
implementation 'com.facebook.litho:litho-widget:0.33.0'
annotationProcessor 'com.facebook.litho:litho-processor:0.33.0'
// SoLoader
implementation 'com.facebook.soloader:soloader:0.5.1'
// For integration with Fresco
implementation 'com.facebook.litho:litho-fresco:0.33.0'
// For testing
testImplementation 'com.facebook.litho:litho-testing:0.33.0'
annotationProcessor 'com.facebook.litho:litho-sections-processor:0.33.0'
}
allprojects {
repositories {
jcenter()
}
}
3.万能的Hello Wolrd
我们学任何语言都是从Hello World开始的，Litho也不例外。
首先，我们要在Application中初始化Litho
public class CFApp extends Application {
@Override
public void onCreate() {
super.onCreate();
//初始化Litho
SoLoader.init(this,false);
}
}
接下来我们就要开始写 Hello World 了：
在Activity的onCreate()方法中创建一个 ComponentContext ，然后再创建一个Text组件,如下代码：
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable 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));
}
}
LithoView相当于Android中ViewGroup,是容纳View（在Litho中称为组件）的容器，，上面这个就是用LithoView显示Text组件的。
上面的组件如何发挥作用呢，我们来看看下面的代码
final Component component = Text.create(context)
.text("Hello World")
.textSizeDip(50)
.build();
Text是facebook组件包com.facebook.litho.widget里面的组件.它有很多属性，例如 text（设置文本内容）和textSize(设置字体大小)，你可以像我上面写的那样设置，这些特征都是来之React术语启发中的props。
然后将Text组件作为单个子组件加入到LithoView中。
然后编译，运行App，你会得到以下内容
4.自定义垂直显示组件
我们来写一个带有标题和内容垂直显示的组件。在这里你可以学到自定义组件的知识。并可以做出简单的垂直显示的页面
我们现在来创建一个ListItemSpec 的类，并在类上面加入@LayoutSpec注解，如下：
注意：没命名一个组件类名，需要加Spec结尾，我实际上的组件名是ListItem
@LayoutSpec
public class ListItemSpec {
@OnCreateLayout
static Component onCreateLayout(ComponentContext context) {
return Column.create(context)
.paddingDip(YogaEdge.ALL, 16) //内间隙
.backgroundColor(Color.WHITE)//背景颜色
.child(//添加子布局
Text.create(context)
.text("Hello World")
.textSizeSp(40)
.build()
)
.child(
Text.create(context)
.text("Litho tutorial")
.textSizeSp(20)
)
.build();
}
}
上面中Column是垂直组件，用来垂直显示布局，通过child加入需要垂直显示的子组件，就构成了垂直显示的布局,而且该child添加的数量没有限制。
由于Litho是使用Yoga，可以添加flexbox属性来设置子项的布局：
paddingDip 是用来设置内间隙的，YogaEdge.ALL属性是四周都设置相同长度的值,paddingDip(YogaEdge.ALL, 16) 表示上下左右都设置为16。当然YogaEdge还有其他的属性，如：LEFT 、TOP、RIGHT、BOTTOM、START、END、HORIZONTAL、VERTICAL
backgroundColor 是设置垂直布局的背景颜色
写好以上组件后，还不能调用，因为注解还没有生成代码。我们需要在Android studio 中通过Build make projectl 来生成我们的组件代码。
然后将上次写的Hello World组件注释，写入我们的垂直组件 ListItem，记住，后面不带Spc哦。并将你的组件加入到LithoView中
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
final ComponentContext context = new ComponentContext(this);
//显示 Hello World
// final Component component = Text.create(context)
// .text("Hello World")
// .textSizeDip(50)
// .build();
//垂直组件，组件名是ListItem
final Component listItem = ListItem.create(context).build();
setContentView(LithoView.create(context, listItem));
}
}
在这里，Litho采用的是通过注解处理器来生成自定义的代码，它通过查找“你定义的组件名”+Spec 类名，并生成 你的组件名和与你的规范相同包的类。这些类都将自动填写Litho所需的所有方法。除了这些规范外，注解处理器还会生成其他的方法（例如Text的textSize或者backgroundColor方法）。
然后我们运行，你就可以看到下面的内容
5.自定义垂直可以滚动的组件
要创建滚动的组件，我们还以继续向app的 build.gradle中添加Sections依赖
dependencies {
....省略显示之前添加的依赖，不了解的话可以翻到 2.入门查看
// Sections
implementation 'com.facebook.litho:litho-sections-core:0.33.0'
implementation 'com.facebook.litho:litho-sections-widget:0.33.0'
compileOnly 'com.facebook.litho:litho-sections-annotations:0.33.0'
annotationProcessor 'com.facebook.litho:litho-sections-processor:0.33.0'
}
接下来我们准备写ListSectionSpec类，然后写以下代码
@GroupSectionSpec
public class ListSectionSpec {
@OnCreateChildren
static Children onCreateChildren(final SectionContext context) {
//children是创建子组件
Children.Builder builder = Children.create();
//这里我们创建32个子组件,让屏幕沾满可以滚动
for (int i = 0; i < 32; i++) {
builder.child(
SingleComponentSection.create(context)
.key(String.valueOf(i)) //每个子组件的key
//加入我们上面创建的垂直标题和内容组件
.component(ListItem.create(context)
.build()
)
);
}
return builder.build();
}
}
SingleComponentSection是核心部分，是sections用于渲染单个组件，ListSectionSpec描述了具有32个子节的节，每个子节负责呈现ListItem。然后我们就可以将这一部分用RecyclerCollectionComponent显示我们的列表。RecyclerCollectionComponent是将一个节作为道具，并呈现一个RecyclerView，其中包含该节输出的任何UI，它还管理UI的更新和更改，例如刷新数据和执行从尾部提取，我们这里没有使用任何数据获取，所以不需要刷新。
然后 build 项目，让它生成代码。
接着 修改Activity，将之前的垂直显示注释掉，加入滚动的垂直显示组件代码
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
final ComponentContext context = new ComponentContext(this);
//显示 Hello World
// final Component component = Text.create(context)
// .text("Hello World")
// .textSizeDip(50)
// .build();
//垂直组件，组件名是ListItem
// final Component listItem = ListItem.create(context).build();
//渲染可滚动的组件
final Component listScrollComponent = RecyclerCollectionComponent.create(context)
.disablePTR(true)
.section(
ListSection.create(
new SectionContext(context)
).build()
).build();
setContentView(LithoView.create(context, listScrollComponent));
}
}
注意是调用ListSection，而不是ListSectionSpec
运行程序，你将显示下面的滚动列表
