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

Android —facebook/litho框架 超实用的入门干货可能很多人不知道litho是什么,我这里简单说一下litho就是用代码写布局。嗯,就是那么简单。或许你会问为什么用代码来写呢我xml用的挺好也方便,至于这些问题我都不会回答(坏笑)说了是干货所以肯定以代码为主所以这些介绍我能省就省了。其实网上有很多大神从框架层面介绍了litho的好处和作用,可以解答这些问题。读完之后就知道litho的好处啦。但可惜的是介绍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();
  }
}

类似效果

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

代码很简单 就这么多 那么我们解释一下其中可能看不懂或者一些注意的东西
其中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;
    }
}

实现的效果类似

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

至此列表页面也已经完成 最后来添加一下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账号...

(0)
blank

相关推荐

  • cocos2d-x3.0 lua学习(一个)

    cocos2d-x3.0 lua学习(一个)

  • pfx证书生成「建议收藏」

    pfx证书生成「建议收藏」第一步:打开linux创建一个文件夹第二步:opensslreq-newkeyrsa:2048-nodes-keyout0.key-x509-days365-out0.cer根据提示输入国家代码,省,城市,组织,单位,名称,邮箱第三步:opensslpkcs12-export-in0.cer-inkey0.key-outyoufilename.pfx根据提示输入密码两次,*使用的时候会提示输入密码…

  • JAVA保留两位小数_精确小数点后两位

    JAVA保留两位小数_精确小数点后两位这篇文章主要介绍了java使double类型保留两位小数的方法,大家参考使用吧mportjava.text.DecimalFormat;DecimalFormatdf=newDecimalFormat(“######0.00”);doubled1=3.23456doubled2=0.0;doubled3=2.0;df.format(d1);df.format(…

  • c语言头文件cstring,头文件 <string.h> <cstring> <string> 区别

    c语言头文件cstring,头文件 <string.h> <cstring> <string> 区别/**@filecstring*ThisisaStandardC++Libraryfile.Youshould@c\#includethisfile*inyourprograms,ratherthananyofthe@a*.himplementationfiles.**ThisistheC++versionoftheSt…

  • linux安装svn服务器_linux安装svn客户端

    linux安装svn服务器_linux安装svn客户端1.https://tortoisesvn.net/downloads.html网站下载2.安装的时候如果出现下图的报错打开这个网站https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=49062,会自动帮你下载下载完成后安装即可3.没有特殊需求则默认安装4.出现这个则安装成功MySQL安装…

  • modelsim-win64-10.4-se 下载、安装、破解全攻略(屡试不爽)

    modelsim-win64-10.4-se 下载、安装、破解全攻略(屡试不爽)本教程包括软件下载、破解文件下载、安装破解方法,助你一次成功。软件安装好了却不能用,想必大家都有过这样的痛苦和无奈。这款软件的破解花了我整整一个下午的时间,期间在网上找了各种方法尝试均以失败告终,差点让我放弃破解而着手去换操作系统。网上的方法多存在着疏漏和差错,所以这也是我写次教程的初衷,希望能帮到大家,少走弯路。本人使用系统声明:win864位专业版以及win1064位安装

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号