手把手教你Android Facebook Litho UI框架---（一）入门篇

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

运行程序，你将显示下面的滚动列表

好了今天咱们的教程就到这里啦，接下来我会发布第二篇