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

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

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

可能很多人不知道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 ‘com.android.support:appcompat-v7:27.1.1’
implementation ‘com.android.support:recyclerview-v7:27.1.1’

第二步 初始化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，而是通过代码”new”出来的。

那么有一个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就不报红了吧。

其实理解了上面这个”自动生成的规则后 再看demo就会明白了 该去找什么类 为什么 demo中的ListItem死活找不到”
这样的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<Integer> child1 = DataDiffSection.<Integer>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<Integer> generateData(int count) {
        final List<Integer> data = new ArrayList<>(count);
        for (int i = 0; i < count; 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点极大优化了列表的性能。