MENU

Android 声明式 UI 框架 Litho 初探 —— Layout

September 6, 2020 • Read: 115 • Android

Litho底层使用的是Yoga,Yoga是Facebook的另一个开源项目,它是一个跨iOS、Android、Windows平台在内的布局引擎,兼容Flexbox布局方式。

所以只要熟悉Flexbox布局,那么在使用Litho进行UI布局时基本毫无压力。

如果熟悉Flutter开发,那在使用Litho时,会有一些似曾相识的感觉,Litho中的 Row 与 Column 相关属性与Flutter中的 Row 与 Column 几乎无二。

本来想写一点示例代码,但是感觉没什么可写的。下面这个链接是Yoga 官网的playground。
https://yogalayout.com/playground
你可以通过它可视化的调整UI,构建你需要的layout。同时可以生成相应的Litho代码

在线可视化构建UI:

直接生成的Litho代码:

在 Flexbox 中可以通过 positionType(ABSOLUTE)属性来实现Android 中的 FrameLayout效果:

    @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();
    }

运行效果: