文章目錄

• 一、創建 XML 布局文件
• 二、XML 布局文件中添加子組件
• 三、創建 Ability
• 四、配置 Ability
• 五、Ability 加載布局文件
• 六、完整代碼及效果展示
• 四、GitHub 地址

一、創建 XML 布局文件

---

在 src\main\resources\base\layout 目錄下 , 創建布局文件 ;

右鍵點擊 layout 目錄 , 在彈出的菜單中選擇 " New / Layout Resource File " 選項 ;

在彈出的對話框中 , 輸入布局文件名稱 , 以及選擇布局類型 , 目前只能生成線性布局 DirectionalLayout 布局 ;

設置完布局文件名稱以及布局類型后 , 點擊 " Finish " 完成創建 ;

生成如下布局文件 , 在該布局文件中自動添加了線性布局 DirectionalLayout 作為根布局 ;

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"></DirectionalLayout>

設置線性布局屬性 : 給線性布局 DirectionalLayout 添加 ohos:alignment 屬性 , 該屬性的作用是設置該線性布局中的子組件的對齊方式 ,

如設置 ohos:alignment=“center” 屬性 , 則該線性布局下的子組件都會居中顯示 ;

二、XML 布局文件中添加子組件

---

添加 Text 子組件 , 并為子組件添加必要的屬性 ;

標識屬性 : ohos:id="$+id:text" , 為該組件設置標識 text , 在 Java 代碼中可以通過該 id 標識獲取 XML 布局中定義的組件 ; 其中 + 號作用是如果該 id 不存在則生成 id 常量 , 如果該 id 存在則使用已存在的常量 ; 在 Java 代碼中可以通過該生成的常量來獲取該組件 ;

寬高屬性 : 寬度充滿父容器 ohos:width=“match_parent” ; 高度包裹內容 ohos:height=“match_content” ;

文字內容屬性 : 這是 Text 組件獨有的屬性 , ohos:text=“自定義布局 Text 組件” , 顯示 " 自定義布局 Text 組件 " 文字 ;

文字字體大小屬性 : 這是 Text 組件獨有的屬性 , ohos:text_size=“100” ;

文本對齊方式屬性 : 這是 Text 組件獨有的屬性 , ohos:text_alignment=“center” 居中 ;

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"ohos:alignment="center"><Textohos:id="$+id:text"ohos:width="match_parent"ohos:height="match_content"ohos:text="自定義布局 Text 組件"ohos:text_size="100"ohos:text_alignment="center"/></DirectionalLayout>

三、創建 Ability

---

右鍵點擊想要創建 Ability 的包名 , 選擇 New / Ability / Empty Page Ability ( Java ) 選項 ;

在彈出的對話框中輸入 Ability 類名 , 點擊 Finish 按鈕 ;

四、配置 Ability

---

創建完成后 , 會在 config.json 中的 “abilities” 標簽下添加如下 Ability 配置 :

{"orientation": "unspecified","visible": true,"name": "com.example.abilityxml.MyAbility","icon": "$media:icon","description": "$string:myability_description","label": "abilityxml","type": "page","launchType": "standard"}

orientation 設置方向 , 橫屏 / 豎屏 ;

name 設置完整的包名.類名 ;

icon 設置窗口圖標 ;

description 設置描述字符串 ;

type 設置當前的 Ability 類型 ;

launchType 設置啟動模式 ;

設置該 Ability 為啟動 Ability , 將 config.json 中該 Ability 配置放在 “abilities”: [] 標簽中第一個 , 按照如下配置 , 自定義的 com.example.abilityxml.MyAbility 就是應用啟動后顯示的第一個 Ability ;

"abilities": [{"orientation": "unspecified","visible": true,"name": "com.example.abilityxml.MyAbility","icon": "$media:icon","description": "$string:myability_description","label": "abilityxml","type": "page","launchType": "standard"},{"orientation": "unspecified","visible": true,"name": "com.example.abilityxml.MainAbility","icon": "$media:icon","description": "$string:mainability_description","label": "AbilityXml","type": "page","launchType": "standard"}]

五、Ability 加載布局文件

---

Ability 中加載布局文件 , 在 onStart 中調用 super.setUIContent ( ) 方法 , 設置加載的布局文件 ID , 代碼如下 :

package com.example.abilityxml;import com.example.abilityxml.slice.MyAbilitySlice; import ohos.aafwk.ability.Ability; import ohos.aafwk.content.Intent;public class MyAbility extends Ability {@Overridepublic void onStart(Intent intent) {super.onStart(intent);//super.setMainRoute(MyAbilitySlice.class.getName());// 顯示自定義的 mylayout.xml 布局文件super.setUIContent(ResourceTable.Layout_mylayout);} }

六、完整代碼及效果展示

---

Ability 代碼 :

package com.example.abilityxml;import com.example.abilityxml.slice.MyAbilitySlice; import ohos.aafwk.ability.Ability; import ohos.aafwk.content.Intent;public class MyAbility extends Ability {@Overridepublic void onStart(Intent intent) {super.onStart(intent);//super.setMainRoute(MyAbilitySlice.class.getName());// 顯示自定義的 mylayout.xml 布局文件super.setUIContent(ResourceTable.Layout_mylayout);} }

布局文件代碼 :

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"ohos:alignment="center"><Textohos:id="$+id:text"ohos:width="match_parent"ohos:height="match_content"ohos:text="自定義布局 Text 組件"ohos:text_size="100"ohos:text_alignment="center"/></DirectionalLayout>

config.json 配置文件代碼 :

{"app": {"bundleName": "com.example.harmony","vendor": "example","version": {"code": 1,"name": "1.0"},"apiVersion": {"compatible": 3,"target": 4,"releaseType": "Beta1"}},"deviceConfig": {},"module": {"package": "com.example.abilityxml","name": ".MyApplication","deviceType": ["phone"],"distro": {"deliveryWithInstall": true,"moduleName": "abilityxml","moduleType": "feature"},"abilities": [{"orientation": "unspecified","visible": true,"name": "com.example.abilityxml.MyAbility","icon": "$media:icon","description": "$string:myability_description","label": "abilityxml","type": "page","launchType": "standard"},{"orientation": "unspecified","visible": true,"name": "com.example.abilityxml.MainAbility","icon": "$media:icon","description": "$string:mainability_description","label": "AbilityXml","type": "page","launchType": "standard"}]} }

效果展示 :

四、GitHub 地址

---

GitHub 主應用 : https://github.com/han1202012/HarmonyHelloWorld

Ability 中使用 XML 布局文件示例 Module : https://github.com/han1202012/HarmonyHelloWorld/tree/master/abilityxml

總結

以上是生活随笔為你收集整理的【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。