Facebook出品的Android声明式开源新框架Litho文档翻译-LayoutSpecs

2017-04-28 Comentarios Android知识

欢迎转载,转载请标明出处.
英文原文文档地址: Litho-doc

参考

Layout Specs


Layout Spec在逻辑上等同于Android的View的组合.它简单的把一些已经存在的component组合到一个不可变的布局树中.

实现一个layout spec非常简单:你只需要写一个标注为@OnCreateLayout的方法,并且让它返回一个不可变的ComponentLayout对象的树.

让我们从一个简单的例子开始:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@LayoutSpec
public class MyComponentSpec {
  @OnCreateLayout
  static ComponentLayout onCreateLayout(
      ComponentContext c,
      @Prop int color,
      @Prop String title) {
      return Row.create(c)
          .alignItems(CENTER)
          .child(
              SolidColor.create(c)
                  .colorRes(color)
                  .withLayout()
                  .widthDip(40)
                  .heightDip(40))
          .child(
              Text.create(c)
                  .text(title)
                  .textSizeRes(R.dimen.my_text_size)
                  .withLayout()
                  .flexGrow(1f))
          .build();
  }
}

正如你所见,layout spec类使用@LayoutSpec注释.

用@OnCreateLayout注释标注的方法必须以ComponentContext作为第一个参数,并且在它后面有以@Prop标注的其他参数.注释处理器将会在编译的时候对它们和其他API的不变性进行验证.

在上面的示例中,布局树中有一个根容器,容器中有两个水平堆叠(Row.create)且垂直居中(Align.CENTER)的子节点.

第一个子节点是一个SolidColor component,它拥有一个colorRes的Prop和40dp的宽和高.

1
2
3
4
5
SolidColor.create(c)
    .uri(imageUri)
    .withLayout()
    .width(40)
    .height(40)

第二个子节点是一个Text Component,它拥有一个名叫text的prop,并且使用grow(1f)填充了Myconponent中的剩余的水平空间(等同于Android LinearLayout中的layoutWeight).文字大小实在my_text_size尺寸文件中定义的.

1
2
3
4
5
Text.create(c)
    .text(title)
    .textSizeRes(R.dimen.my_text_size)
    .withLayout()
    .grow(1f)

你可以查看完整的Yoga文档来获取所有框架开放出的布局特性.




回到导航页




#Android #实用库 #Litho