Related articles:

Android declarative UI frame Litho exploration — Basic use Android declarative UI frame Litho exploration — MountSpec use Android declarative UI frame Litho exploration — two data types

Litho uses Yoga, another open source project from Facebook. Yoga is a layout engine that spans iOS, Android, and Windows platforms, and is compatible with Flexbox layout.

So as long as you’re familiar with the Flexbox layout, there’s basically no pressure to do UI layout with Litho.

If you are familiar with Flutter development, you will feel some deja vu when you use Litho. The Row and Column properties in Litho are almost identical to the Row and Column properties in Flutter.

I wanted to write a little sample code, but felt like there was nothing to write. The following link is the Playground on Yoga’s website. Yogalayout.com/playground through which you can visualize the adjustment of the UI, building layout you need. The corresponding Litho code can be generated at the same time

Build UI visually online:

Directly generated Litho code:

The FrameLayout effect in Android can be implemented with the positionType(ABSOLUTE) property in Flexbox:

    @OnCreateLayout
    fun createLayout(c: ComponentContext): Component {
        return Column.create(c)
            .child(

                SolidColor.create(c)
                    .color(Color.MAGENTA)
                    .widthDip(100f)
                    .heightDip(100f)
            )
            .child(
                Text.create(c)
                    .text("FrameLayout")
                    .marginDip(YogaEdge.TOP, 30f)
                    .positionType(YogaPositionType.ABSOLUTE)
            )
            .build();
    }
Copy the code

Operation effect:

The Nuggets usually post some of their own. Those of you who can’t wait can go directly to the blog apkdv.com/preliminary… To view