HarmonyOS应用开发入门
1 HarmonyOS应用的代码结构
1.1 页面(FA)和薄片(Slice)
1.1.1 什么是Ability
Ability是应用所具备能力的抽象，也是应用程序的重要组成部分。
1.1.2 FA (Feature Ability或Page Ability)
FA本质上就是一个页面，表示一个业务，主要用于与用户交互。一个FA实例可以包含一到多个在业务上高度相关的薄片，其中每个薄片用一个AbilitySlice实例表示。
__________________________
|FA |
| ______________ |
| |AbilitySlice | |
| | ______________ |
| | |AbilitySlice | |
| | | ______________ |
| | | |AbilitySlice | |
| | | | | |
| | | | | |
| |__| | | |
| | | | |
| |__| | |
| | | |
| |______________| |
| |
|__________________________|
如果你熟悉Android的话：
_______________________
HarmonyOS | Android
_____________|_________
FA | Activity
AbilitySlice | Layout
_____________|_________
1.1.3 AA (Atomic Ability)
AA支持Service模板和Data模板：
- Service模板用于提供运行后台任务的能力；
- Data模板用于对外部提供统一的数据访问抽象。
1.2 工程结构
以Hello工程为例：
2 FA和AbilitySlice的生命周期
例程：Lifecycle
...\Lifecycle\entry\src\main\resources\base\layout\ability_main.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent"> <ScrollView ohos:height="match_parent" ohos:width="match_parent" ohos:rebound_effect="true"> <Text ohos:id="$+id:txt" ohos:height="match_content" ohos:width="match_parent" ohos:multiple_lines="true" ohos:text_size="24fp" ohos:text_alignment="horizontal_center" /> </ScrollView> </DirectionalLayout>
...\Lifecycle\entry\src\main\java\com\minwei\lifecycle\slice\MainAbilitySlice.java
public class MainAbilitySlice extends AbilitySlice { private Text text = null; @Override public void onStart(Intent intent) { ... text = (Text)findComponentById(ResourceTable.Id_txt); text.append("onStart()"); } @Override public void onActive() { ... text.append("\nonActive()"); } @Override public void onInactive() { text.append("\nonInactive()"); } @Override public void onBackground() { text.append("\nonBackground()"); } @Override public void onForeground(Intent intent) { ... text.append("\nonForeground()"); } @Override public void onStop() { text.append("\nonStop()"); } }
运行效果如下图所示：
3 在多个AbilitySlice之间切换
从第一页切到第二页：
present(new SecondaryAbilitySlice(), new Intent().setParam("param", "来自第一页的参数"));
从第二页切回第一页：
present(new MainAbilitySlice(), new Intent());
例程：JumpSlice
com.minwei.jumpslice右键
New
Ability
Empty Page Ability(Java)
Page Name: SecondaryAbility
...\JumpSlice\entry\src\main\resources\base\layout\ability_main.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:txtTitle" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_main" ohos:text="第一页：点击“跳转”进入第二页" ohos:text_size="20fp" /> <Text ohos:id="$+id:txtParam" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_main" ohos:text="向第二页传递参数" ohos:text_size="24fp" /> <Button ohos:id="$+id:btn" ohos:height="match_content" ohos:width="match_content" ohos:text="跳转" ohos:text_size="28fp" ohos:text_color="#ff0000" /> </DirectionalLayout>
...\JumpSlice\entry\src\main\resources\base\layout\ability_secondary.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:txtTitle" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_secondary" ohos:text="第二页：点击“返回”回到第一页" ohos:text_size="20fp" /> <Text ohos:id="$+id:txtParam" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_secondary" ohos:text_size="24fp" /> <Button ohos:id="$+id:btn" ohos:height="match_content" ohos:width="match_content" ohos:text="返回" ohos:text_size="28fp" ohos:text_color="#0000ff" /> </DirectionalLayout>
...\JumpSlice\entry\src\main\java\com\minwei\jumpslice\slice\MainAbilitySlice.java
public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { ... findComponentById(ResourceTable.Id_btn) .setClickedListener(new ClickedListener() { @Override public void onClick(Component component) { present(new SecondaryAbilitySlice(), new Intent().setParam("param", "来自第一页的参数")); } }); } ... }
...\JumpSlice\entry\src\main\java\com\minwei\jumpslice\slice\SecondaryAbilitySlice.java
public class SecondaryAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { ... ((Text)findComponentById(ResourceTable.Id_txtParam)).setText( intent.getStringParam("param")); findComponentById(ResourceTable.Id_btn) .setClickedListener(new ClickedListener() { @Override public void onClick(Component component) { present(new MainAbilitySlice(), new Intent()); } }); } ... }
运行效果如下图所示：
4 在多个FA之间切换
从第一页切到第二页：
Intent intent = new Intent(); intent.setOperation(new OperationBuilder() .withDeviceId("") .withBundleName("com.minwei.jumppage") .withAbilityName("com.minwei.jumppage.SecondaryAbility") .build()); startAbility(intent.setParam("param", "来自第一页的参数"));
从第二页切回第一页：
terminateAbility();
例程：JumpPage
com.minwei.jumppage右键
New
Ability
Empty Page Ability(Java)
Page Name: SecondaryAbility
...\JumpPage\entry\src\main\resources\base\layout\ability_main.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:txtTitle" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_main" ohos:text="第一页：点击“跳转”进入第二页" ohos:text_size="20fp" /> <Text ohos:id="$+id:txtParam" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_main" ohos:text="向第二页传递参数" ohos:text_size="24fp" /> <Button ohos:id="$+id:btn" ohos:height="match_content" ohos:width="match_content" ohos:text="跳转" ohos:text_size="28fp" ohos:text_color="#ff0000" /> </DirectionalLayout>
...\JumpPage\entry\src\main\resources\base\layout\ability_secondary.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:txtTitle" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_secondary" ohos:text="第二页：点击“返回”回到第一页" ohos:text_size="20fp" /> <Text ohos:id="$+id:txtParam" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_secondary" ohos:text_size="24fp" /> <Button ohos:id="$+id:btn" ohos:height="match_content" ohos:width="match_content" ohos:text="返回" ohos:text_size="28fp" ohos:text_color="#0000ff" /> </DirectionalLayout>
...\JumpPage\entry\src\main\java\com\minwei\jumppage\slice\MainAbilitySlice.java
public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { ... findComponentById(ResourceTable.Id_btn) .setClickedListener(new ClickedListener() { @Override public void onClick(Component component) { Intent intent = new Intent(); intent.setOperation(new OperationBuilder() .withDeviceId("") .withBundleName("com.minwei.jumppage") .withAbilityName("com.minwei.jumppage.SecondaryAbility") .build()); startAbility(intent.setParam("param", "来自第一页的参数")); } }); } ... }
...\JumpPage\entry\src\main\java\com\minwei\jumppage\slice\SecondaryAbilitySlice.java
public class SecondaryAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { ... ((Text)findComponentById(ResourceTable.Id_txtParam)).setText( intent.getStringParam("param")); findComponentById(ResourceTable.Id_btn) .setClickedListener(new ClickedListener() { @Override public void onClick(Component component) { terminateAbility(); } }); } ... }
运行效果如下图所示：
5 按钮组件(Button)
按钮组件的布局描述：
<Button
ohos:id="$+id:btn"
ohos:width="match_content"
ohos:height="match_content"
ohos:left_padding="50vp"
ohos:right_padding="50vp"
ohos:top_padding="10vp"
ohos:bottom_padding="10vp"
ohos:layout_alignment="horizontal_center"
ohos:background_element="#22b14c"
ohos:text="启动"
ohos:text_size="60vp"
ohos:text_color="#ffffff"
/>
例程：Button
...\Button\entry\src\main\resources\base\layout\ability_main.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical" ohos:background_element="#000000"> <Button ohos:id="$+id:btn" ohos:width="match_content" ohos:height="match_content" ohos:left_padding="30vp" ohos:right_padding="30vp" ohos:top_padding="10vp" ohos:bottom_padding="10vp" ohos:background_element="#22b14c" ohos:text="启动" ohos:text_size="40fp" ohos:text_color="#ffffff" /> </DirectionalLayout>
...\Button\entry\src\main\java\com\minwei\button\slice\MainAbilitySlice.java
public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { ... Button button = (Button)findComponentById(ResourceTable.Id_btn); button.setClickedListener(new ClickedListener() { @Override public void onClick(Component component) { if (button.getText().equals("启动")) { button.setText("停止"); ((ShapeElement)button.getBackgroundElement()) .setRgbColor(new RgbColor(255, 0, 0)); } else { button.setText("启动"); ((ShapeElement)button.getBackgroundElement()) .setRgbColor(new RgbColor(34, 177, 76)); } } }); } ... }
运行效果如下图所示：
6 方向布局(DirectionalLayout)
6.1 垂直布局
布局中的组件沿垂直方向，从上到下依次排列，可指定其水平方向的对齐方式。
<DirectionalLayout ... ohos:orientation="vertical" - 垂直向 ...> <Button ... ohos:layout_alignment="left" - 左对齐 ... /> <Button ... ohos:layout_alignment="horizontal_center" - 水平中 ... /> <Button ... ohos:layout_alignment="right" - 右对齐 ... /> </DirectionalLayout>
6.2 水平布局
布局中的组件沿水平方向，从左到右依次排列，可指定其垂直方向的对齐方式。
<DirectionalLayout ... ohos:orientation="horizontal" - 水平向 ...> <Button ... ohos:layout_alignment="top" - 顶对齐 ... /> <Button ... ohos:layout_alignment="vertical_center" - 垂直中 ... /> <Button ... ohos:layout_alignment="bottom" - 底对齐 ... /> </DirectionalLayout>
例程：DirectionalLayout
...\DirectionalLayout\entry\src\main\resources\base\layout\ability_main.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical" ohos:background_element="#000000"> <Button ohos:height="match_content" ohos:width="match_content" ohos:padding="$ohos:float:button_radius" ohos:layout_alignment="left" ohos:background_element="#00a2e8" ohos:text="左对齐" ohos:text_size="30fp" ohos:text_color="#ffffff" /> <Button ohos:height="match_content" ohos:width="match_content" ohos:padding="$ohos:float:button_radius" ohos:layout_alignment="horizontal_center" ohos:background_element="#ff7f27" ohos:text="水平中" ohos:text_size="30fp" ohos:text_color="#ffffff" /> <Button ohos:height="match_content" ohos:width="match_content" ohos:padding="$ohos:float:button_radius" ohos:layout_alignment="right" ohos:background_element="#22b14c" ohos:text="右对齐" ohos:text_size="30fp" ohos:text_color="#ffffff" /> </DirectionalLayout>
...\DirectionalLayout\entry\src\main\resources\base\layout\ability_horizontal.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="horizontal" ohos:background_element="#000000"> <Button ohos:height="match_content" ohos:width="match_content" ohos:padding="$ohos:float:button_radius" ohos:layout_alignment="top" ohos:background_element="#00a2e8" ohos:text="顶对齐" ohos:text_size="30fp" ohos:text_color="#ffffff" /> <Button ohos:height="match_content" ohos:width="match_content" ohos:padding="$ohos:float:button_radius" ohos:layout_alignment="vertical_center" ohos:background_element="#ff7f27" ohos:text="垂直中" ohos:text_size="30fp" ohos:text_color="#ffffff" /> <Button ohos:height="match_content" ohos:width="match_content" ohos:padding="$ohos:float:button_radius" ohos:layout_alignment="bottom" ohos:background_element="#22b14c" ohos:text="底对齐" ohos:text_size="30fp" ohos:text_color="#ffffff" /> </DirectionalLayout>
...\DirectionalLayout\entry\src\main\java\com\minwei\directionallayout\slice\MainAbilitySlice.java
public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); } ... }
或
public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_horizontal); } ... }
运行效果如下图所示：
7 通用对话框(CommonDialog)
通用对话框可以在当前界面弹出一个对话框，该对话框置顶于所有界面元素之上，屏蔽其它控件的交互能力，因此通用对话框一般用于提示一些非常重要的内容或警告信息。比如为了防止用户误删重要数据，可以在删除前弹出一个确认删除的通用对话框，让用户有机会取消删除操作。
7.1 文本按钮
CommonDialog commonDialog = new CommonDialog(this); commonDialog.setTitleText("警告"); commonDialog.setContentText("您真的要删除所选内容吗？"); DisplayAttributes displayAttributes = DisplayManager .getInstance().getDefaultDisplay(this) .get().getAttributes(); commonDialog.setSize( (int)(displayAttributes.width * 0.9), (int)(displayAttributes.height * 0.2)); commonDialog.setAutoClosable(true); commonDialog.setButton(0, "确定", new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { commonDialog.destroy(); } }); commonDialog.setButton(1, "取消", new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { commonDialog.destroy(); } }); commonDialog.show();
7.2 图像按钮
CommonDialog commonDialog = new CommonDialog(this); commonDialog.setTitleText("警告"); commonDialog.setContentText("您真的要删除所选内容吗？"); DisplayAttributes displayAttributes = DisplayManager .getInstance().getDefaultDisplay(this) .get().getAttributes(); commonDialog.setSize( (int)(displayAttributes.width * 0.9), (int)(displayAttributes.height * 0.2)); commonDialog.setAutoClosable(true); commonDialog.setImageButton(0, ResourceTable.Media_ok, new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { commonDialog.destroy(); } }); commonDialog.setImageButton(1, ResourceTable.Media_cancel, new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { commonDialog.destroy(); } }); commonDialog.show();
7.3 自定义布局
CommonDialog commonDialog = new CommonDialog(this); commonDialog.setContentCustomComponent( LayoutScatter.getInstance(this).parse( ResourceTable.Layout_common_dialog, null, false)); commonDialog.setSize(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT); commonDialog.setAutoClosable(true); commonDialog.getContentCustomComponent() .findComponentById(ResourceTable.Id_btnOk) .setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { commonDialog.destroy(); } }); commonDialog.getContentCustomComponent() .findComponentById(ResourceTable.Id_btnCancel) .setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { commonDialog.destroy(); } }); commonDialog.show();
例程：CommonDialog
...\CommonDialog\entry\src\main\resources\base\media\warning.jpg
...\CommonDialog\entry\src\main\resources\base\media\ok.png
...\CommonDialog\entry\src\main\resources\base\media\cancel.png
...\CommonDialog\entry\src\main\resources\base\layout\ability_main.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:txtTextButton" ohos:height="match_content" ohos:width="match_content" ohos:text="文本按钮" ohos:text_size="40vp" /> <Text ohos:id="$+id:txtImageButton" ohos:height="match_content" ohos:width="match_content" ohos:text="图像按钮" ohos:text_size="40vp" /> <Text ohos:id="$+id:txtCustomLayout" ohos:height="match_content" ohos:width="match_content" ohos:text="自定义布局" ohos:text_size="40vp" /> </DirectionalLayout>
...\CommonDialog\entry\src\main\resources\base\layout\common_dialog.xml
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_content" ohos:width="match_content"> <Text ohos:height="match_content" ohos:width="match_parent" ohos:top_padding="5vp" ohos:bottom_padding="5vp" ohos:background_element="#ff7f27" ohos:text="警告" ohos:text_size="24vp" ohos:text_color="#ffffff" ohos:text_alignment="horizontal_center" /> <DirectionalLayout ohos:height="match_content" ohos:width="match_content" ohos:left_margin="10vp" ohos:top_margin="10vp" ohos:right_margin="10vp" ohos:alignment="center" ohos:orientation="horizontal"> <Image ohos:height="match_content" ohos:width="match_content" ohos:image_src="$media:warning" /> <Text ohos:height="match_content" ohos:width="match_content" ohos:left_margin="10vp" ohos:text="您真的要删除所选内容吗？" ohos:text_size="20vp" /> </DirectionalLayout> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:left_margin="10vp" ohos:top_margin="10vp" ohos:right_margin="10vp" ohos:bottom_margin="12vp" ohos:alignment="center" ohos:orientation="horizontal"> <Button ohos:id="$+id:btnOk" ohos:height="120px" ohos:width="295px" ohos:background_element="$media:ok" /> <Button ohos:id="$+id:btnCancel" ohos:height="120px" ohos:width="447px" ohos:left_margin="20vp" ohos:background_element="$media:cancel" /> </DirectionalLayout> </DirectionalLayout>
...\CommonDialog\entry\src\main\java\com\minwei\commondialog\slice\MainAbilitySlice.java
public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { ... findComponentById(ResourceTable.Id_txtTextButton) .setClickedListener(component -> { CommonDialog commonDialog = new CommonDialog(this); commonDialog.setTitleText("警告"); commonDialog.setContentText("您真的要删除所选内容吗？"); DisplayAttributes displayAttributes = DisplayManager .getInstance().getDefaultDisplay(this) .get().getAttributes(); commonDialog.setSize( (int)(displayAttributes.width * 0.9), (int)(displayAttributes.height * 0.2)); commonDialog.setAutoClosable(true); commonDialog.setButton(0, "确定", new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { commonDialog.destroy(); } }); commonDialog.setButton(1, "取消", new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { commonDialog.destroy(); } }); commonDialog.show(); }); findComponentById(ResourceTable.Id_txtImageButton) .setClickedListener(component -> { CommonDialog commonDialog = new CommonDialog(this); commonDialog.setTitleText("警告"); commonDialog.setContentText("您真的要删除所选内容吗？"); DisplayAttributes displayAttributes = DisplayManager .getInstance().getDefaultDisplay(this) .get().getAttributes(); commonDialog.setSize( (int)(displayAttributes.width * 0.9), (int)(displayAttributes.height * 0.2)); commonDialog.setAutoClosable(true); commonDialog.setImageButton(0, ResourceTable.Media_ok, new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { commonDialog.destroy(); } }); commonDialog.setImageButton(1, ResourceTable.Media_cancel, new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { commonDialog.destroy(); } }); commonDialog.show(); }); findComponentById(ResourceTable.Id_txtCustomLayout) .setClickedListener(component -> { CommonDialog commonDialog = new CommonDialog(this); commonDialog.setContentCustomComponent( LayoutScatter.getInstance(this).parse( ResourceTable.Layout_common_dialog, null, false)); commonDialog.setSize(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT); commonDialog.setAutoClosable(true); commonDialog.getContentCustomComponent() .findComponentById(ResourceTable.Id_btnOk) .setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { commonDialog.destroy(); } }); commonDialog.getContentCustomComponent() .findComponentById(ResourceTable.Id_btnCancel) .setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { commonDialog.destroy(); } }); commonDialog.show(); }); } ... }
运行效果如下图所示：
