Litho学习--Hello World

1. 在build.gradle 文件中添加Litho依赖

dependencies {
    // ...
    // Litho
    implementation 'com.facebook.litho:litho-core:0.14.0'
    implementation 'com.facebook.litho:litho-widget:0.14.0'
    compileOnly 'com.facebook.litho:litho-annotations:0.14.0'
    annotationProcessor 'com.facebook.litho:litho-processor:0.14.0'
    
    // SoLoader
    implementation 'com.facebook.soloader:soloader:0.2.0'
    
    // For integration with Fresco
    implementation 'com.facebook.litho:litho-fresco:0.14.0'
    
    // For testing
    testImplementation 'com.facebook.litho:litho-testing:0.14.0'
    
}

再加入Sections部分的依赖:

dependencies {
    // Sections
    implementation 'com.facebook.litho:litho-sections-core:0.14.0'
    implementation 'com.facebook.litho:litho-sections-widget:0.14.0'
    compileOnly 'com.facebook.litho:litho-sections-annotations:0.14.0'
    annotationProcessor 'com.facebook.litho:litho-sections-processor:0.14.0'   
}

2. 初始化 SoLoader

Litho中依赖于SoLoader加载底层的布局引擎Yoga.

public class MyApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();

    SoLoader.init(this, false);
  }
}

3. 在Activity中加入Litho中预定义的Text组件

public class HelloLithoActivity extends AppCompatActivity {
    private static final String TAG = HelloLithoActivity.class.getSimpleName();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTitle(TAG);

        final ComponentContext c = new ComponentContext(this);

        final LithoView lithoView = LithoView.create(
                this /* context */,
                Text.create(c)
                        .text("Hello, World!")
                        .textSizeDip(50)
                        .build());

        setContentView(lithoView);
    }
}

解释:

LithoView 是用来渲染组件的 Android 中的 ViewGroup,它是 Litho 中的组件与 Android 系统中的 View 的桥梁。 例子中 Activity 的 contentView 设置成 LithoView ,LithoView 中展示了一个 Text 组件。

Text 是 Litho 中的一个核心组件,在这个包里,com.facebook.litho.widget
它有 text 和 textSize 属性,在 Litho 中叫做 Prop ,注意这里的 Text 组件是由一个叫做 TextSpec 的类生成的,同时生成了构造器方法用于初始化 Text 组件的属性。
Text 组件这里作为唯一的子组件添加到 LithoView 中,当然也可以一个根组件带着几个子组件的形式,待会会讲到,这样,一个 Hello World 就搞定了。

看到的效果如下:


Litho学习--Hello World_第1张图片
Hello World

你可能感兴趣的:(Litho学习--Hello World)