鴻蒙OS 組件與布局XML創(chuàng)建布局

XM L聲明布局的方式更加簡便直觀。每一個 Component 和 ComponentContainer 對象大部分屬性都支持在 XML 中進行設置，它們都有各自的 XML 屬性列表。某些屬性僅適用于特定的組件，例如：只有Text支持“text_color”屬性，但不支持該屬性的組件如果添加了該屬性，該屬性則會被忽略。具有繼承關(guān)系的組件子類將繼承父類的屬性列表，Component 作為組件的基類，擁有各個組件常用的屬性，比如：ID、布局參數(shù)等。

ID

ohos:id="$+id:text"

在 XML 中使用此格式聲明一個對開發(fā)者友好的 ID，它會在編譯過程中轉(zhuǎn)換成一個常量。尤其在 DependentLayout 布局中，組件之間需要描述相對位置關(guān)系，描述時要通過 ID 來指定對應組件。

布局中的組件通常要設置獨立的 ID，以便在程序中查找該組件。如果布局中有不同組件設置了相同的 ID，在通過 ID 查找組件時會返回查找到的第一個組件，因此盡量保證在所要查找的布局中為組件設置獨立的 ID 值，避免出現(xiàn)與預期不符合的問題。

布局參數(shù)

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

與代碼中設置組件的寬度和高度類似，在 XML 中它們的取值可以是：

• 具體的數(shù)值：10（以像素為單位）、10vp（以屏幕相對像素為單位）。
• MATCH_PARENT：表示組件大小將擴展為父組件允許的最大值，它將占據(jù)父組件方向上的剩余大小，在 XML 中用“match_parent”表示。
• MATCH_CONTENT：表示組件大小與它的內(nèi)容占據(jù)的大小范圍相適應，在 XML 中用數(shù)值“match_content”表示。

更多的組件屬性列表可參考組件的 XML 屬性文檔。

創(chuàng)建XML布局文件

1. 在 DevEco Studio 的 “Project” 窗口，打開 “entry > src > main > resources > base”，右鍵點擊“base”文件夾，選擇“New > Directory”，命名為“l(fā)ayout”。

圖1 設置 Directory 名稱

1. 右鍵點擊“l(fā)ayout”文件夾，選擇“New > File”，命名為“first_layout.xml”。

圖2 設置File名稱

修改XML布局文件

打開新創(chuàng)建的 first_layout.xml 布局文件，修改其中的內(nèi)容，對布局和組件的屬性和層級進行描述。

<?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) { 
                // 此處添加按鈕被點擊需要執(zhí)行的操作
            } 
        });
    }
}