Litho的使用–基本使用及加载网络图片

Litho是Facebook推出的一套高效构建Android UI的声明式框架，主要目的是提升RecyclerView复杂列表的滑动性能和降低内存占用。详见Litho的原理
以及Litho官网，这里记录下我自己对Litho的基本使用。

Litho的配置

这里采用官网上的kotlin配置：
Module的build.gradle添加：

apply plugin: 'kotlin-kapt'

dependencies {// ...// Lithoimplementation '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'kapt  'com.facebook.litho:litho-processor:0.21.0'// SoLoaderimplementation 'com.facebook.soloader:soloader:0.5.1'// For integration with Frescoimplementation 'com.facebook.litho:litho-fresco:0.21.0'// For testingtestImplementation 'com.facebook.litho:litho-testing:0.21.0'//下面是可选的库// Sectionsimplementation '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'kapt  'com.facebook.litho:litho-sections-processor:0.21.0'
}

project的build.gradle添加

repositories {jcenter()
}

Litho的Hello World

首先在自定义的Application的onCreate方法中添加

SoLoader.init(this, false)

然后就可以使用Litho了

class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)val cc = ComponentContext(this)setContentView(LithoView.create(this,getTextView(cc)))}/*** 获取TextView*/private fun getTextView(cc: ComponentContext): Component? {return Text.create(cc).textColorRes(R.color.colorPrimary).text("Hello World!").textSizeDip(50f).build()}
}

明显看出来是React的UI风格，与kotlin、flutter写界面有异曲同工之处。由于kotlin的简洁性，可以将抽出一个工具Litho.kt，网上已经有轮子，拿来直接用，这里就不贴出来了，详见demo。简化后的代码，如下：

    /*** 获取TextView*/private fun getTextView(cc: ComponentContext): Component? {return text(cc) {textColorRes(R.color.colorPrimary)text("Hello World!")textSizeDip(50f)}.build()}

当然Litho并不是这样用的，Litho类似dragger2一样，可以通过注解apt的形式生成我们需要的布局，两种方式：@LayoutSpec和@MountSpec，首先看一下@LayoutSpec

LayoutSpec

话不多说，直接上代码：

@LayoutSpec
object LayoutComponentSpec {@OnCreateLayoutfun onCreateLayout(c: ComponentContext): Component {return column(c) {paddingDip(YogaEdge.ALL, 8f)children {text {text("title")textColorRes(R.color.colorPrimary)textSizeDip(28f)}text {text("content")textColorRes(R.color.colorAccent)textSizeDip(16f)}}}}
}

Build之后就会生成一个LayoutComponent类，和之前的Text一样使用

     val layoutComponent = LayoutComponent.create(cc).build()setContentView(LithoView.create(this,layoutComponent))

这个时候，打开开发者设置里的显示布局，可以清晰的看出来，浑然一体。

本文只是对Litho的简单使用，原理和属性，请移步官网。

MountSpec

Mount Specs 定义了一个可以渲染 View 或 drawable 的组件.
Mount Specs 组件的生命周期如下所示：

在布局计算之前运行 @OnPrepare 一次。
在布局计算期间选择性运行 @OnMeasure 。
在布局计算之后运行 @OnBoundsDefined 一次。
在组件挂接到宿主 View 之前运行 @OnCreateMountContent 。
在组件挂接到宿主 View 之前运行 @OnMount 。
在组件挂接到宿主 View 后运行 @OnBind 。
在将组件从宿主 View 分离之前运行 @OnUnbind 。
在组件从宿主 View 分离后，选择性运行 @OnUnmount 。
还是以例子为主：

@MountSpec(poolSize = 12, canPreallocate = true)
object GlideImageSpec {private val TAG = "GlideImageSpec"/*** 在组件挂接到宿主 View 之前运行*/@OnCreateMountContentinternal fun onCreateMountContent(c: Context): ImageView {val imageView = ImageView(c)imageView.scaleType = ImageView.ScaleType.CENTER_CROPreturn imageView}/*** 在布局计算之前运行*/@OnPrepareinternal fun onPrepare(context: ComponentContext, @Prop imageUrl: String, load: Output<RequestBuilder<Drawable>>) {Log.d(TAG, "onPrepare: $imageUrl")val requestBuilder = Glide.with(context.androidContext).load(imageUrl)val apply = requestBuilder.apply(RequestOptions())load.set(apply)}/*** 在组件挂接到宿主 View 之前运行*/@OnMountinternal fun onMount(context: ComponentContext, imageView: ImageView, @FromPrepare load: RequestBuilder<Drawable>) {Log.d(TAG, "onMount: load:$load")load.into(imageView)}
}

主要是一个以Glide加载网络图片的组件，下面我们看一下使用，并对Component添加点击事件：

@LayoutSpec
object ImageViewComponentSpec {@OnCreateLayoutfun onCreateLayout(c: ComponentContext, @Prop title: String, @Prop content: String,@Prop imgUrl: String, @Prop click: String): Component {return column(c){paddingDip(YogaEdge.ALL, 16f)backgroundColor(Color.WHITE)child(text(c){text(title)textSizeSp(40f)})child(text(c){text(content)textSizeSp(20f)})//GlideImage加载网络图片child(GlideImage.create(c).widthDip(200f).heightDip(200f).imageUrl(imgUrl).build())//添加点击事件clickHandler(ImageViewComponent.onClick(c, click))}}/*** 注解点击事件的回调*/@OnEvent(ClickEvent::class)fun onClick(c: ComponentContext, @FromEvent view: View, @Param someProp: String) {Toast.makeText(c.applicationContext, "click:$someProp", Toast.LENGTH_SHORT).show()}
}

代码很简单，GlideImage的使用一目了然，不用再解释，添加点击事件也和android注解方式添加类似。主要是通过EventHandler这个事件控制器，下篇Litho下拉刷新和上拉加载也会遇到这个类，会稍微介绍一下，自己有兴趣也可以看一下源码，并不是很复杂。
同样使用，也很简单：

  //内容+图片(加载网络)的Component，并添加点击事件val imageViewComponent = ImageViewComponent.create(cc).title("title").content("content").click("here").imgUrl("http://pic37.nipic.com/20140113/8800276_184927469000_2.png").build()setContentView(LithoView.create(this,imageViewComponent))

好了，本篇介绍一下Litho的基本使用，下篇介绍一下日常操作：Litho中的RecycleView。
附上demo地址：LithoDemo