树叶云鸿蒙OS教程：鸿蒙OS 组件与布局XML创建布局

XM L声明布局的方式更加简便直观。每一个 Component 和 ComponentContainer 对象大部分属性都支持在 XML 中进行设置，它们都有各自的 XML 属性列表。某些属性仅适用于特定的组件，例如：只有Text支持“text_color”属性，但不支持该属性的组件如果添加了该属性，该属性则会被忽略。具有继承关系的组件子类将继承父类的属性列表，Component 作为组件的基类，拥有各个组件常用的属性，比如：ID、布局参数等。

ID

ohos:id="$+id:text"

在 XML 中使用此格式声明一个对开发者友好的 ID，它会在编译过程中转换成一个常量。尤其在 DependentLayout 布局中，组件之间需要描述相对位置关系，描述时要通过 ID 来指定对应组件。

布局中的组件通常要设置独立的 ID，以便在程序中查找该组件。如果布局中有不同组件设置了相同的 ID，在通过 ID 查找组件时会返回查找到的第一个组件，因此尽量保证在所要查找的布局中为组件设置独立的 ID 值，避免出现与预期不符合的问题。

布局参数

ohos:width="20vp"
ohos:height="10vp"

与代码中设置组件的宽度和高度类似，在 XML 中它们的取值可以是：

• 具体的数值：10（以像素为单位）、10vp（以屏幕相对像素为单位）。
• MATCH_PARENT：表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小，在 XML 中用“match_parent”表示。
• MATCH_CONTENT：表示组件大小与它的内容占据的大小范围相适应，在 XML 中用数值“match_content”表示。

更多的组件属性列表可参考组件的 XML 属性文档。

创建XML布局文件

1. 在 DevEco Studio 的 “Project” 窗口，打开 “entry > src > main > resources > base”，右键点击“base”文件夹，选择“New > Directory”，命名为“layout”。

图1 设置 Directory 名称

1. 右键点击“layout”文件夹，选择“New > File”，命名为“first_layout.xml”。

图2 设置File名称

修改XML布局文件

打开新创建的 first_layout.xml 布局文件，修改其中的内容，对布局和组件的属性和层级进行描述。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:padding="32">
    <Text
        ohos:id="$+id:text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="My name is Text."
        ohos:text_size="25vp"/>
    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="My name is Button."
        ohos:text_size="50"/>
</DirectionalLayout>

加载XML布局

在代码中需要加载 XML 布局，并添加为根布局或作为其他布局的子 Component。

@Override
public void onStart(Intent intent) {
    super.onStart(intent);
    // 加载XML布局作为根布局
    super.setUIContent(ResourceTable.Layout_first_layout);
    // 查找布局中组件
    Button button = (Button) findComponentById(ResourceTable.Id_button);
    if (button != null) {
        // 设置组件的属性
        ShapeElement background = new ShapeElement();
        background.setRgbColor(new RgbColor(0,125,255));
        background.setCornerRadius(25);
        button.setBackground(background);

        
        button.setClickedListener(new Component.ClickedListener() { 
            @Override 
            // 在组件中增加对点击事件的检测 
            public void onClick(Component Component) { 
                // 此处添加按钮被点击需要执行的操作
            } 
        });
    }
}