文章目錄

• 一、Ability 與 Slice 簡介
• 二、Ability 中使用純代碼繪制布局及 UI 組件
• 三、Ability 中使用純代碼繪制布局及 UI 組件代碼示例
• 四、GitHub 地址

一、Ability 與 Slice 簡介

---

與 Android 相似組件類比 :

Ability 功能與 Android 中的 Activity 類似 , 相當于界面窗口 ;

AbilitySlice 功能與 Android 中的 Fragment 類似 , 相當于界面中的某一塊布局 ;

Ability 與 AbilitySlice 對應關系 : 一個 Ability 窗口中可以有 零個或多個 AbilitySlice ;

在創建一個 工程或 Module 后 , 系統會自動生成一個 Ability MainAbility , 在 MainAbility 中默認使用了一個 AbilitySlice AbilitySlice ;

生成的 Ability 代碼示例 : 在該 Ability 中默認使用了 AbilitySlice ;

package com.example.stacklayut;import com.example.stacklayut.slice.MainAbilitySlice; import ohos.aafwk.ability.Ability; import ohos.aafwk.content.Intent;public class MainAbility extends Ability {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setMainRoute(MainAbilitySlice.class.getName());} }

生成的 AbilitySlice 代碼示例 : AbilitySlice 在 onStart( ) 加載一個布局文件 , 顯示該布局文件 , 同時可以使用代碼對該布局文件中的 UI 組件進行各種操作 ; 其中 ResourceTable.Layout_ability_main 代表的就是 ability_main.xml 布局文件 ;

public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);} }

二、Ability 中使用純代碼繪制布局及 UI 組件

---

在 Ability 中不使用 AbilitySlice , 直接使用代碼繪制組件 , 或使用布局文件 ;

使用代碼繪制組件 :

使用代碼繪制組件時 , 先要創建一個根布局 , 然后向根 布局中添加 UI 組件 ;

創建布局 : 創建線性布局 DirectionalLayout , 并設置線性布局方向 , 水平 / 垂直 ;

// 創建線性布局, 傳入當前界面 Ability 對象DirectionalLayout directionalLayout = new DirectionalLayout(this);// 設置水平方向directionalLayout.setOrientation(Component.HORIZONTAL);

配置布局屬性 : 配置布局的寬高屬性 , 需要創建布局配置對象 , DirectionalLayout.LayoutConfig 類型的對象 , 設置該布局填充整個父容器 , 寬高都設置成 DirectionalLayout.LayoutConfig.MATCH_PARENT ;

// 配置上述線性布局// 創建布局配置對象 , DirectionalLayout.LayoutConfig , 構造函數中傳入寬高設置DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_PARENT,DirectionalLayout.LayoutConfig.MATCH_PARENT);// 將布局配置對象設置給布局對象directionalLayout.setLayoutConfig(layoutConfig);

設置布局背景顏色 : 先創建 ShapeElement 對象 , 設置其顏色為綠色 , 最后將背景設置給布局 ;

// 設置布局背景顏色// 創建背景元素ShapeElement shapeElement = new ShapeElement();// 設置綠色shapeElement.setRgbColor(new RgbColor(0x00, 0xFF, 0x00));// 將背景設置給布局directionalLayout.setBackground(shapeElement);

創建 Text 組件并配置其布局屬性 : 創建 DirectionalLayout.LayoutConfig 對象 , 用于作為 Text 組件的布局配置 , 這里直接設置布局大小 800 x 800 ;

// 創建 Text 文本組件Text text = new Text(this);// 創建布局配置對象 , DirectionalLayout.LayoutConfig , 構造函數中傳入寬高設置 , 這里設置成 800 x 800DirectionalLayout.LayoutConfig textLayoutConfig = new DirectionalLayout.LayoutConfig(800, 800);// 將布局配置對象設置給布局對象text.setLayoutConfig(textLayoutConfig);

設置 Text 組件背景 : 創建 ShapeElement 對象作為 Text 組件的背景 ;

// 設置組件背景顏色// 創建背景元素ShapeElement textShapeElement = new ShapeElement();// 設置綠色textShapeElement.setRgbColor(new RgbColor(0xFF, 0xFF, 0xFF));// 設置給 Text 組件text.setBackground(textShapeElement);

設置 Text 組件文字相關屬性 : 設置文本顏色 , 字體大小 , 顯示文本內容 , 對齊方式 ;

// 設置文字顯示// 設置文字顏色text.setTextColor(Color.RED);// 設置文字大小text.setTextSize(50);// 設置顯示的文本text.setText("代碼創建的 Text 組件");// 設置對齊方式 , 居中text.setTextAlignment(TextAlignment.CENTER);

將 Text 組件添到布局中 :

// 將組件添加到布局中directionalLayout.addComponent(text);

Ability 界面顯示該布局 :

// Ability 顯示上述創建的布局super.setUIContent(directionalLayout);

三、Ability 中使用純代碼繪制布局及 UI 組件代碼示例

---

下面的示例就是使用代碼繪制組件的示例 :

package com.example.abilitycode;import com.example.abilitycode.slice.MainAbilitySlice; import ohos.aafwk.ability.Ability; import ohos.aafwk.content.Intent; import ohos.agp.colors.RgbColor; import ohos.agp.components.Component; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.Text; import ohos.agp.components.element.ShapeElement; import ohos.agp.utils.Color; import ohos.agp.utils.TextAlignment;public class MainAbility extends Ability {@Overridepublic void onStart(Intent intent) {super.onStart(intent);//super.setMainRoute(MainAbilitySlice.class.getName());// 使用代碼生成 UI 布局與組件// 創建線性布局, 傳入當前界面 Ability 對象DirectionalLayout directionalLayout = new DirectionalLayout(this);// 設置水平方向directionalLayout.setOrientation(Component.HORIZONTAL);// 配置上述線性布局// 創建布局配置對象 , DirectionalLayout.LayoutConfig , 構造函數中傳入寬高設置DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_PARENT,DirectionalLayout.LayoutConfig.MATCH_PARENT);// 將布局配置對象設置給布局對象directionalLayout.setLayoutConfig(layoutConfig);// 設置布局背景顏色// 創建背景元素ShapeElement shapeElement = new ShapeElement();// 設置綠色shapeElement.setRgbColor(new RgbColor(0x00, 0xFF, 0x00));// 將背景設置給布局directionalLayout.setBackground(shapeElement);// 創建 Text 文本組件Text text = new Text(this);// 創建布局配置對象 , DirectionalLayout.LayoutConfig , 構造函數中傳入寬高設置 , 這里設置成 800 x 800DirectionalLayout.LayoutConfig textLayoutConfig = new DirectionalLayout.LayoutConfig(800, 800);// 將布局配置對象設置給布局對象text.setLayoutConfig(textLayoutConfig);// 設置組件背景顏色// 創建背景元素ShapeElement textShapeElement = new ShapeElement();// 設置綠色textShapeElement.setRgbColor(new RgbColor(0xFF, 0xFF, 0xFF));// 設置給 Text 組件text.setBackground(textShapeElement);// 設置文字顯示// 設置文字顏色text.setTextColor(Color.RED);// 設置文字大小text.setTextSize(50);// 設置顯示的文本text.setText("代碼創建的 Text 組件");// 設置對齊方式 , 居中text.setTextAlignment(TextAlignment.CENTER);// 將組件添加到布局中directionalLayout.addComponent(text);// Ability 顯示上述創建的布局super.setUIContent(directionalLayout);} }

運行效果 :

四、GitHub 地址

---

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

ListContainer 組件示例 Module :https://github.com/han1202012/HarmonyHelloWorld/tree/master/abilitycode

總結

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

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