1.什么是Litho战坤？
Litho是Facebook推出的一套高效構建Android UI 的聲明式框架，主要 目的是提升RecyclerView復雜列表的滑動性能和降低內(nèi)存的使用问麸。
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()方法中創(chuàng)建一個 ComponentContext 桂对，然后再創(chuàng)建一個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組件的蕉斜。
上面的組件如何發(fā)揮作用呢逾柿，我們來看看下面的代碼
final Component component = Text.create(context)
.text("Hello World")
.textSizeDip(50)
.build();
Text是facebook組件包com.facebook.litho.widget里面的組件.它有很多屬性，例如 text（設置文本內(nèi)容）和textSize(設置字體大小)宅此，你可以像我上面寫的那樣設置机错，這些特征都是來之React術語啟發(fā)中的props。
然后將Text組件作為單個子組件加入到LithoView中父腕。
然后編譯弱匪，運行App，你會得到以下內(nèi)容
4.自定義垂直顯示組件
我們來寫一個帶有標題和內(nèi)容垂直顯示的組件璧亮。在這里你可以學到自定義組件的知識萧诫。并可以做出簡單的垂直顯示的頁面
我們現(xiàn)在來創(chuàng)建一個ListItemSpec 的類，并在類上面加入@LayoutSpec注解枝嘶，如下：
注意：沒命名一個組件類名帘饶，需要加Spec結尾，我實際上的組件名是ListItem
@LayoutSpec
public class ListItemSpec {
@OnCreateLayout
static Component onCreateLayout(ComponentContext context) {
return Column.create(context)
.paddingDip(YogaEdge.ALL, 16) //內(nèi)間隙
.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添加的數(shù)量沒有限制竞阐。
由于Litho是使用Yoga提茁，可以添加flexbox屬性來設置子項的布局：
paddingDip 是用來設置內(nèi)間隙的，YogaEdge.ALL屬性是四周都設置相同長度的值,paddingDip(YogaEdge.ALL, 16) 表示上下左右都設置為16馁菜。當然YogaEdge還有其他的屬性茴扁，如：LEFT 、TOP汪疮、RIGHT峭火、BOTTOM、START智嚷、END卖丸、HORIZONTAL、VERTICAL
backgroundColor 是設置垂直布局的背景顏色
寫好以上組件后盏道，還不能調(diào)用稍浆，因為注解還沒有生成代碼。我們需要在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 類名猾漫，并生成 你的組件名和與你的規(guī)范相同包的類。這些類都將自動填寫Litho所需的所有方法感凤。除了這些規(guī)范外悯周，注解處理器還會生成其他的方法（例如Text的textSize或者backgroundColor方法）。
然后我們運行陪竿，你就可以看到下面的內(nèi)容
5.自定義垂直可以滾動的組件
要創(chuàng)建滾動的組件队橙，我們還以繼續(xù)向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是創(chuàng)建子組件
Children.Builder builder = Children.create();
//這里我們創(chuàng)建32個子組件,讓屏幕沾滿可以滾動
for (int i = 0; i < 32; i++) {
builder.child(
SingleComponentSection.create(context)
.key(String.valueOf(i)) //每個子組件的key
//加入我們上面創(chuàng)建的垂直標題和內(nèi)容組件
.component(ListItem.create(context)
.build()
)
);
}
return builder.build();
}
}
SingleComponentSection是核心部分捐康，是sections用于渲染單個組件，ListSectionSpec描述了具有32個子節(jié)的節(jié)庸蔼，每個子節(jié)負責呈現(xiàn)ListItem解总。然后我們就可以將這一部分用RecyclerCollectionComponent顯示我們的列表。RecyclerCollectionComponent是將一個節(jié)作為道具姐仅，并呈現(xiàn)一個RecyclerView花枫，其中包含該節(jié)輸出的任何UI，它還管理UI的更新和更改掏膏，例如刷新數(shù)據(jù)和執(zhí)行從尾部提取劳翰，我們這里沒有使用任何數(shù)據(jù)獲取，所以不需要刷新馒疹。
然后 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));
}
}
注意是調(diào)用ListSection腥刹，而不是ListSectionSpec
運行程序马胧，你將顯示下面的滾動列表
