代码创建布局

开发如下图所示界面，需要添加一个Text组件和Button组件。由于两个组件从上到下依次居中排列，可以选择使用竖向的DirectionalLayout布局来放置组件。

图1 开发样例图 img

代码创建布局需要在AbilitySlice中分别创建组件和布局，并将它们进行组织关联。

创建组件

  1. 声明组件

    Button button = new Button(getContext());

  2. 设置组件大小

    button.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT);button.setHeight(ComponentContainer.LayoutConfig.MATCH_CONTENT);

  3. 设置组件属性

    button.setText("My name is Button.");button.setTextSize(50);

创建布局并使用

  1. 声明布局

    DirectionalLayout directionalLayout = new DirectionalLayout(getContext());

  2. 设置布局大小

    directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);

  3. 设置布局属性

    directionalLayout.setOrientation(Component.VERTICAL);

  4. 将组件添加到布局中（视布局需要对组件设置布局属性进行约束）

    directionalLayout.addComponent(button);

  5. 将布局添加到组件树中

    setUIContent(directionalLayout);

示例代码如下：

public class ExampleAbilitySlice extends AbilitySlice {    @Override    public void onStart(Intent intent) {        super.onStart(intent);        // 声明布局        DirectionalLayout directionalLayout = new DirectionalLayout(getContext());        // 设置布局大小        directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);        directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);        // 设置布局属性        directionalLayout.setOrientation(Component.VERTICAL);        directionalLayout.setPadding(32, 32, 32, 32);
        Text text = new Text(getContext());        text.setText("My name is Text.");        text.setTextSize(50);        text.setId(100);        // 为组件添加对应布局的布局属性        DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);        layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER;        text.setLayoutConfig(layoutConfig);
        // 将Text添加到布局中        directionalLayout.addComponent(text);
        // 类似的添加一个Button        Button button = new Button(getContext());        layoutConfig.setMargins(0, 50, 0, 0);        button.setLayoutConfig(layoutConfig);        button.setText("My name is Button.");        button.setTextSize(50);        ShapeElement background = new ShapeElement();        background.setRgbColor(new RgbColor(0, 125, 255));        background.setCornerRadius(25);        button.setBackground(background);        button.setPadding(10, 10, 10, 10);        button.setClickedListener(new Component.ClickedListener() {            @Override            // 在组件中增加对点击事件的检测            public void onClick(Component component) {                // 此处添加按钮被点击需要执行的操作            }        });        directionalLayout.addComponent(button);
        // 将布局作为根布局添加到视图树中        super.setUIContent(directionalLayout);    }}

根据以上步骤创建组件和布局后的界面显示效果如图1所示。其中，代码示例中为组件设置了一个按键回调，在按键被按下后，应用会执行自定义的操作。

在代码示例中，可以看到设置组件大小的方法有两种：

  • 通过setWidth/setHeight直接设置宽高。
  • 通过setLayoutConfig方法设置布局属性来设定宽高。

这两种方法的区别是后者还可以增加更多的布局属性设置，例如：使用“alignment”设置水平居中的约束。另外，这两种方法设置的宽高以最后设置的作为最终结果。它们的取值一致，可以是以下取值：

  • 具体以像素为单位的数值。
  • MATCH_PARENT：表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小。
  • MATCH_CONTENT：表示组件大小与它内容占据的大小范围相适应。

results matching ""

    No results matching ""