Android—facebook/litho框架超实用的入门干货

可能很多人不知道litho是什么，我这里简单说一下litho就是用代码写布局。嗯，就是那么简单。或许你会问为什么用代码来写呢 我
xml用的挺好也方便，至于这些问题 我都不会回答（坏笑） 说了是干货所以肯定以代码为主 所以这些介绍我能省就省了。其实网上有很多大神从框架层面介绍了litho的好处和作用，可以解答这些问题。读完之后就知道litho的好处啦。但可惜的是介绍litho用法的文章却是少之又少（可能是因为litho算是比较新颖的框架  而大神忙着研究框架和源码吧）

既然是入门 本章涉及的内容就不会太深 主要就是实现一个简单的listView和item的点击事件而已。可能有些人会觉得这太简单了，我下个demo一看不就懂了吗。我可以告诉你，你看了demo可能也不知道怎么实现(知道了的求放过，只能说明你很厉害)原因有两点：
1.因为litho有点像编写AIDL时Android自动会生成一个Binder 类，如果你不知道这点 那么也就无法继续下去了。
2.又类似于Dagger  代码老是变红 让你觉得你的代码是错的（这个就很烦）
好废话不多说 下面就开始吧（其实已经说了好多废话）

litho的官方gitbub   
https://github.com/facebook/litho
除了demo里面还有官方的文档的url哦（其实我做的工作就是将文档中的一部分整理出来告诉你罢了）

想使用facebook的litho第一步很简单自然是导包啦

// Litho
implementation 'com.facebook.litho:litho-core:0.21.0'
implementation 'com.facebook.litho:litho-widget:0.21.0'
compileOnly 'com.facebook.litho:litho-annotations:0.21.0'
annotationProcessor 'com.facebook.litho:litho-processor:0.21.0'
// SoLoader
implementation 'com.facebook.soloader:soloader:0.5.1'
// For integration with Fresco
implementation 'com.facebook.litho:litho-fresco:0.21.0'
// For testing
testImplementation 'com.facebook.litho:litho-testing:0.21.0'
//下面是可选的库
// Sections
implementation 'com.facebook.litho:litho-sections-core:0.21.0'
implementation 'com.facebook.litho:litho-sections-widget:0.21.0'
compileOnly 'com.facebook.litho:litho-sections-annotations:0.21.0'
annotationProcessor 'com.facebook.litho:litho-sections-processor:0.21.0'

Jetbrains全家桶1年46，售后保障稳定

 我们在写列表效果的时候也会用到所以也先导入啦！！！  第一步完成
这里需要注意的是我的support都是27.1.1 因为写26时 会有错误的提示 那还是按照他的提示改成新的吧
implementation &＃8216;com.android.support:appcompat-v7:27.1.1&＃8217;
implementation &＃8216;com.android.support:recyclerview-v7:27.1.1&＃8217;

第二步 初始化litho
写一个SampleApplication继承Application并在onCreate()当中初始化SoLoader.init(this, false);
当然SampleApplication的名字你可以自己取啦

public class SampleApplication extends Application{
@Override
public void onCreate() {
super.onCreate();
System.out.println("App oncreate");
SoLoader.init(this, false);
}
}

需要注意的是一定要在xml中将你定义的Application引入哦！！当然这些都很简单 小心点就是了
第二步也完成啦

第三步 开始实现一个简单页面

@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));
}

这样一个简单的Hello World就出来啦   
从这里可以看出我们要初始化一个控件并没有依赖xml，而是通过代码&＃8221;new&＃8221;出来的。

那么有一个item总不会只有一个TextView 可能有2个TextView或者ImageView等等 这样的话我们就需要定义一个类去慢慢的编写出想要的item布局了。
首先我们定义一个类 叫ListItemSpec  这个名字很重要我等下会说 先附上ListItemSpec的代码

@LayoutSpec
public class ListItemSpec {
@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
return Column.create(c)
.paddingDip(ALL, 16)
.backgroundColor(Color.WHITE)
.child(
Text.create(c)
.text("Hello world")
.textSizeSp(40))
.child(
Text.create(c)
.text("Litho tutorial")
.textSizeSp(20))
.build();
}
}

类似效果

代码很简单 就这么多 那么我们解释一下其中可能看不懂或者一些注意的东西
其中Column.create(c)可以理解为 自定义一个View 类似上面的Text.create(context) 就是一个TextView 只不过TextView的定义
Litho已经帮我们实现了名字叫Text 那么我们定义的这个View就是2个TextView组成的 没有名字自然是用Column来实现，如果你想要ImageView和TestView结合 自然类似如此的写法来组成（ImageView是Image.create）。.paddingDip、.backgroundColor这些自然是边距和背景色。
其实看到这里有小伙伴们有疑惑 如果我想要更复杂的item怎么办呢。 那现阶段可能干货确实比较少，而我也并不可能列出所有api一一解释，所以有需求的小伙伴们可以进入官网来查看，好在他们的api名字和xml中相差无几，其实试试也就知道了。
那么简单的自定义控件就完成啦 其中代码中的注解@LayoutSpec 和 @OnCreateLayout很重要 别写漏了
现在我们将MianActivity中的HelloWord替换成我们自定义的控件吧

@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();
final Component component1 = ListItem.create(context)
.color(Color.WHITE)
// .title("Hello, world!")
// .subtitle("Litho tutorial")
.build();
setContentView(LithoView.create(context, component1));//将其替换成component1
}

写到这里相信可能已经有小伙伴出现各种问题了。有人会问 你定义了一个ListItemSpec类却没用 这里用了一个ListItem.create还报红了你是不是不小心写错啦。这里我说明一下，这里我并没有写错 你也没有看错了 就是ListItem.create(context)。那么这个
ListItem哪里来的呢。其实这里就是我上面说像AIDL自动生成的类啦 你写了ListItemSpec里面加了一些注解那么litho就会自动帮你生成ListItem类（暂时可以这么理解 具体框架的实现机制这里就不做说明了），当然这并不是说所有的类都可以这样生成的，有2点需要注意的事情：
1.类名后面必须要以Spec结尾 不然会报错哦
2.注解不要忘记啦
那还有些小伙伴说 我这个类都没有错啊 也是这样写了 可是为什么ListItem.create(context)没法import呢 需要import那个包呢。其
实这里的ListItem是不需要import可能代码会报红 但是运行一下就好了（在吐槽下 这个好烦）所以在敲下面的.color(Color.WHITE)的方法时都是要像txt文本一样敲代码了 提示都没（这个好烦）。 然后就你运行成功之后发现ListItem就不报红了吧。

其实理解了上面这个&＃8221;自动生成的规则后 再看demo就会明白了 该去找什么类 为什么 demo中的ListItem死活找不到&＃8221;
这样的item就结束了吗 是不是还缺少了什么重要的东西。 没错 就是数据啦 上面的ListItemSpec类中text和textSizeSp都是写死的
那么如何传递数据呢 其实也很简单 还要借助注解的力量
在ListItemSpec类的onCreateLayout参数中加入@Prop String title

@LayoutSpec
public class ListItemSpec {
@OnCreateLayout
static Component onCreateLayout(ComponentContext c,
@Prop String title,) {
return Column.create(c)
.paddingDip(ALL, 16)
.backgroundColor(Color.WHITE)
.child(
Text.create(c)
.text(title)//这样title就不是死数据了 其他的也类似这种写法
.textSizeSp(40))
.child(
Text.create(c)
.text(title)
.textSizeSp(20))
.build();
}
}
//这是mainActivity的 别和上面看成一个类哦
@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();
final Component component1 = ListItem.create(context)
.color(Color.WHITE)
.title("Hello, world!") //这里的title会传入定义的@Prop String title当中 注解和名字都不能错哦
// .subtitle("Litho tutorial")
.build();
setContentView(LithoView.create(context, component1));//将其替换成component1
}

那么数据也可以正常的传入了 最后的就是点击事件了，既然是item的点击事件 那就先吧布局变成list的吧

@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();
final Component component1 = ListItem.create(context)
.color(Color.WHITE)
.title("Hello, world!") //这里的title会传入定义的@Prop String title当中 注解和名字都不能错哦
// .subtitle("Litho tutorial")
.build();
final Component component2 =
RecyclerCollectionComponent.create(context)
.disablePTR(true)
.section(ListSection.create(new SectionContext(context)).build())
.build();
setContentView(LithoView.create(context, component2));//将其替换成component2
}

我没有将原来的Component删除掉是因为让你们做个对比而已。 列表形式litho其实也已经帮我我们写好了使用
RecyclerCollectionComponent就可以了（这就是可选库里的东东哦），其中disablePTR(true)的意思就是静止刷新（PTR就是
PullToreFresh的缩写啦）
可以看到我这里使用了ListSection.create那么按照之前的逻辑肯定会有ListSectionSpc的类啦 代码都是由前面讲解的基础类所组成
就不在一一重复 需要注意的也已经用注释写上啦 直接上代码

@GroupSectionSpec
public class ListSectionSpec {
@OnCreateChildren
static Children onCreateChildren(final SectionContext c) {
Children.Builder builder = Children.create();
ListItem child = ListItem.create(c)
.color(Color.WHITE)
.title("Hello, world!")
.subtitle("Litho tutorial")
.build();
// for (int i = 0; i <32; i++) {
// builder.child(
// SingleComponentSection.create(c)
// .key(String.valueOf(i))
// //如果ListItemSpec定义了title color等属性 而这里不设置 直接将ListItem.create(c).build()
// //传入将会报空指针 而且错误难以排查
// .component(child));
// }
//和上面的效果一样
DataDiffSection.Builder child1 = DataDiffSection.create(c)
.data(generateData(32))
.renderEventHandler(ListSection.onRender(c));
builder.child(child1);
return builder.build();
}
@OnEvent(RenderEvent.class)
static RenderInfo onRender(final SectionContext c, @FromEvent Integer model) {
return ComponentRenderInfo.create()
.component(
ListItem.create(c)
.color(model % 2 == 0 ? Color.WHITE : Color.LTGRAY)
.title(model + ". Hello, world!")
.subtitle("Litho tutorial")
.build())
.build();
}
private static List generateData(int count) {
final List data = new ArrayList<>(count);
for (int i = 0; i data.add(i);
}
return data;
}
}

实现的效果类似

至此列表页面也已经完成 最后来添加一下item的点击事件吧

@LayoutSpec
public class ListItemSpec {
@OnCreateLayout
static Component onCreateLayout(ComponentContext c,
@Prop String title,) {
return Column.create(c)
.paddingDip(ALL, 16)
.backgroundColor(Color.WHITE)
.child(
Text.create(c)
.text(title)//这样title就不是死数据了 其他的也类似这种写法
.clickHandler(ListItem.onFaceClicked(c, title))) //添加点击事件 title是数据
.textSizeSp(40))
.child(
Text.create(c)
.text(title)
.textSizeSp(20))
.build();
}
//点击事件的回调
@OnEvent(ClickEvent.class)
static void onFaceClicked(
ComponentContext c,
@Param String face) { //@Param String face上面传递过来的数据 @Param注解很重要哦
Log.d("FacePileComponent", "Face clicked: " + face);
}
}

点击事件也添加完毕了
最后的最后就我个人意见来总结一下litho吧。
优点：
1.可定义性\可声明： 就是可以用api来定义你的ui，减少了xml的部分，而且布局和逻辑代码分别更为清晰了
2.异步布局：Litho可以在不阻塞UI线程的情况下提前测量和布局UI。
3.视图扁平化：Litho使用Yoga进行布局，并自动减少UI中包含的ViewGroup的数量。
4.细粒度回收：任何组件（如文本或图像）都可以在UI中的任何地方回收和重用。
缺点：
1.由于大部分利用了注解和自动生成的类，导致一旦代码出错就难以排查，因为不能马上定位到出错的地方，而需要你自己稍加分析
2.写代码是要编译一遍才会生成类 不然只能手打了
3.目前资源较少 遇到难题无法快速借鉴大神的解决方法或者思路

个人认为如果不是较为复杂的页面尤其是较为复杂的列表（item有gif动图或者短视频等等）暂时还不建议使用litho。毕竟
RecyclerView对于一般列表已经能够胜任。而且框架已经较为成熟。但是对于在性能方面有要求的app请务必使用litho，上面的优点中，尤其是第4点极大优化了列表的性能。