The original

Litho, as a high-performance UI engine, has a relatively high learning curve, but there are very few materials available in China (most of them are “Hello Word” tutorials copied from each other). In foreign countries, there are not many tutorials except Litho’s own documents. These tutorials are also written while I’m learning. If there is any misunderstanding, please correct me.

What is the Litho

Litho is a declarative framework for building efficient user interfaces (UIs) on Android. But different from previous UI frameworks, its underlying is Yoga, which converts UI that does not need to interact to Drawable to render views, through Yoga to complete asynchronous or synchronous (customized according to the scene) measurement and calculation of component layout, to achieve a flat layout. Speed up UI rendering

Update: 2020 09-09 16:17

For example, “Compose” is now in its early stages, so I can only tell you what the difference is.

  • Both are declarative UIs (look at Flutter if you don’t know what declarative UI is)
  • Both toFlexboxTo create the layout (Column,Row), resulting in a lower-level layout that reduces recursive calls at rendering time.
Thanks for pointing it out in the comments section, because I've seen a lot of code like this before (anko). Compose is an early wheel for Google, but its traditional View architecture is quite different.Copy the code

Difference:

  • ComposeThe bottom layer is drawn by Canvas,It should be a reference to Flutter(Blind guessing is probably to make it easier for Android developers to switch to Flutter development).LithoThe ground floor is owned by the familyYoga
  • When the UI of traditional Android page is very complex and the view level is deep, it is inevitable that the time in Measure and Layout will be too long. whileLithoWith asynchronous Layout, Measure and Layout are done in the asynchronous thread, while UI thread only needs to complete drawing. Due to the asynchronous layout, the FPS is very stable in the UI.
  • Views that are not interactive are automatically converted to Drawable, so the layout is flatter.
  • Traditional RecyclerView recycles according to ItemType. If there are 10 itemtypes, 10 itemtypes will be cached. That is, there are itemTypes that are only used once. whileLithoBefore Compoent collects it, it is split into text, iAMGE, etc., and reassembled as needed. Reduced memory footprint.

Here’s a comparison of the same UI with Litho’s layout boundary in the traditional Android way: Litho:Traditional way:

You can see that the image and the TextView and Litho in the figure above ended up drawing a Drawable.

In Litho, you use components to build the UI instead of interacting directly with the traditional Android view. A component is essentially a function that accepts immutable inputs (called property props) and returns a component hierarchy that describes the user interface.

If you had experience with Flutter, Litho was developed in a similar way

The rest of the tutorial will go through the code

Basic configuration

gradle


apply plugin: 'kotlin-kapt'

dependenciesadd// Litho
    implementation 'com. Facebook. Litho: litho - core: 0.37.1'
    implementation 'com. Facebook. Litho: litho - widget: 0.37.1'
    kapt 'com. Facebook. Litho: litho - processor: 0.37.1'
    // SoLoader
    implementation 'com. Facebook. Soloader: soloader: 0.9.0'
    // For integration with Fresco
    implementation 'com. Facebook. Litho: litho - fresco ": 0.37.1'
    // Sections
    implementation 'com. Facebook. Litho: litho - sections - the core: 0.37.1'
    implementation 'com. Facebook. Litho: litho - sections - widget: 0.37.1'
    compileOnly 'com. Facebook. Litho: litho - sections - annotations: 0.37.1'
    kapt 'com. Facebook. Litho: litho - sections - processor: 0.37.1'
Copy the code

Initialize the SoLoader.Litho dependency that SoLoader uses to load the underlying layout engine Yoga

SoLoader.init(this.false);
Copy the code

Using the Base Component

Component Specs

The view unit in Litho is called Component, which can be intuitively translated as Component

Components fall into two types: Layout Spec: Combines other components into a specific Layout. This is the equivalent of ViewGroup on Android.

Mount Spec: Can render View or Drawable components. Now, let’s look at the overall Layout Spec structure:

Component class name must end with Spec or an error will be reported

/** * Component Spec is just a normal Java class with some special annotations. * Component specs are completely stateless, with no class members. * use@PropAnnotated parameters automatically become part of the component builder. * /
@LayoutSpec // Combine other components into a specific layout. This is the equivalent of ViewGroup on Android
class MainLithoViewSpec {
    / * * *@OnCreateLayoutAnnotated methods must have ComponentContext followed by their first argument *@PropAnnotated parameter list. The annotation handler validates the parameter list and other constraints in the API at build time. * /
    @OnCreateLayout
    fun onCreateLayout(
        context: ComponentContext,
        @Prop color: Int,
        @Prop title: String
    ): Component {
        return Column.create(context)
            .paddingDip(YogaEdge.ALL, 16f)
            .backgroundColor(Color.DKGRAY)
            .child(
                Text.create(context).text(title)
                    .textColor(color)
                    .textSizeDip(25f)
            )
            .child(
                Text.create(context).text("That's the subtitle.")
                    .textColor(Color.GREEN)
                    .textSizeDip(16f)
            )
            .build()

    }
}
Copy the code

Used in an Activity

...override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val c = ComponentContext(this);

        val component2 = MainLithoView.create(c).color(Color.WHITE).title("This is a Title.").build()
        
        val component = MainLithoViewSpec.onCreateLayout(c, Color.WHITE, "This is a Title.")
        // Instead of using XML, use Litho's ComponentsetContentView(LithoView.create(c, component)); }...Copy the code

Operation effect:The component Spec class generates a ComponentLifecycle subclass at compile time with the same Spec name but without the Spec suffix. For example, the MainLithoViewSpec class generates a MainLithoView class.

The only API exposed for the generated class is Create (…). Method, which returns the corresponding Component.Builder for the @props declared in the spec class. At runtime, all component instances of a particular type share the same ComponentLifecycle reference. This means there is only one spec instance per component type, not each component instance.

MountSpec is more complex than Layout Spec and has its own life cycle, which will be covered separately in the next article.

My own understanding is that LayoutSpec allows you to use some of the official components to build the UI, but there are only a limited number of official components that cannot implement all of the UI design. That’s where MountSpec comes in. MountSpec converts the View on Android into a Litho compliant Component.

I am also a beginner of Litho, and I will keep up with some new experiences in using Litho. Basically, I will write in my blog at will. The Nuggets usually post some of their own. Those of you who can’t wait can go directly to the blog www.apkdv.com/android-hig… To view

A Litho Discussion on Two Data Types of Android Declarative UI FrameworkMountSpec