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点极大优化了列表的性能。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/234545.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...