手把手教你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

運行程序，你將顯示下面的滾動列表

好了今天咱們的教程就到這裏啦，接下來我會發布第二篇