「码动四季·开源同行」HarmonyOS应用开发：常见布局/Ability

常见布局概述每种布局都根据自身特点提供LayoutConfig供子Component设定布局属性和参数通过指定布局属性可以对子Component在布局中的显示效果进行约束。例如“width”、“height”是最基本的布局属性它们指定了组件的大小。布局分类线性布局DirectionalLayout权重也是一种百分比布局。先计算父布局中可利用空间之和父布局可分配区域父布局宽度-所有固定长度或者宽度大小 再计算百分比?xml version1.0 encodingutf-8? DirectionalLayout xmlns:ohoshttp://schemas.huawei.com/res/ohos ohos:heightmatch_parent ohos:widthmatch_parent ohos:orientationvertical Button ohos:height0vp ohos:width100vp ohos:text点我1 ohos:text_size35fp ohos:text_color#FFFFFF ohos:text_alignmentcenter ohos:background_element#21A8FD ohos:weight2/ Button ohos:height0vp ohos:width100vp ohos:text点我2 ohos:text_size35fp ohos:text_color#FFFFFF ohos:text_alignmentcenter ohos:background_element#FF0000 ohos:weight1/ Image ohos:heightmatch_content ohos:widthmatch_content ohos:image_src$media:girl/ /DirectionalLayout综合案例电话拨号界面?xml version1.0 encodingutf-8? DirectionalLayout xmlns:ohoshttp://schemas.huawei.com/res/ohos ohos:heightmatch_parent ohos:widthmatch_parent ohos:orientationvertical Text ohos:height50vp ohos:width200vp ohos:text_size20fp ohos:top_margin30vp ohos:layout_alignmenthorizontal_center ohos:background_element$graphic:text_empty/ DirectionalLayout ohos:heightmatch_content ohos:widthmatch_parent ohos:alignmenthorizontal_center ohos:orientationhorizontal ohos:top_margin30vp Button ohos:height70vp ohos:width70vp ohos:text1 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ Button ohos:height70vp ohos:width70vp ohos:text2 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ Button ohos:height70vp ohos:width70vp ohos:text3 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ /DirectionalLayout DirectionalLayout ohos:heightmatch_content ohos:widthmatch_parent ohos:alignmenthorizontal_center ohos:orientationhorizontal ohos:top_margin10vp Button ohos:height70vp ohos:width70vp ohos:text4 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ Button ohos:height70vp ohos:width70vp ohos:text5 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ Button ohos:height70vp ohos:width70vp ohos:text6 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ /DirectionalLayout DirectionalLayout ohos:heightmatch_content ohos:widthmatch_parent ohos:alignmenthorizontal_center ohos:orientationhorizontal ohos:top_margin10vp Button ohos:height70vp ohos:width70vp ohos:text7 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ Button ohos:height70vp ohos:width70vp ohos:text8 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ Button ohos:height70vp ohos:width70vp ohos:text9 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ /DirectionalLayout DirectionalLayout ohos:heightmatch_content ohos:widthmatch_parent ohos:alignmenthorizontal_center ohos:orientationhorizontal ohos:top_margin10vp Button ohos:height70vp ohos:width70vp ohos:text* ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ Button ohos:height70vp ohos:width70vp ohos:text0 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ Button ohos:height70vp ohos:width70vp ohos:text# ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:background_element$graphic:button_state/ /DirectionalLayout Button ohos:height50vp ohos:width200vp ohos:textCALL ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter ohos:top_margin50vp ohos:background_element$graphic:text_empty ohos:layout_alignmenthorizontal_center/ /DirectionalLayout相对布局DependentLayout核心找基准位置在相对布局中组件的位置是相对其他组件而言的代码示例?xml version1.0 encodingutf-8? DependentLayout xmlns:ohoshttp://schemas.huawei.com/res/ohos ohos:heightmatch_parent ohos:widthmatch_parent Text ohos:id$id:text1 ohos:height100vp ohos:width100vp ohos:textTEXT1 ohos:text_size20fp ohos:background_element#21A8FD/ Text ohos:id$id:text2 ohos:height100vp ohos:width100vp ohos:textTEXT2 ohos:text_size20fp ohos:background_element#FF0000 ohos:right_of$id:text1 / Text ohos:height100vp ohos:width100vp ohos:textTEXT3 ohos:text_size20fp ohos:background_element#00FF00 ohos:below$id:text2 ohos:left_margin100vp / /DependentLayout格子布局TableLayout行数和列数两个属性。如果塞入元素过多行数自动失效再加一行。对齐方式alignment_type值align_contents(页边距对齐)Margin alignmentalign_edges(边界对齐)boundary alignment页边距对齐是按照上一个组件的相对边界边界对齐是跟上一个组件对齐其他布局StackLayout堆叠布局、AdaptiveBoxLayout自适应盒子布局代码示例?xml version1.0 encodingutf-8? TableLayout xmlns:ohoshttp://schemas.huawei.com/res/ohos ohos:heightmatch_parent ohos:widthmatch_parent ohos:orientationhorizontal ohos:row_count3 ohos:column_count3 ohos:alignment_typealign_edges Text ohos:height50vp ohos:width50vp ohos:background_element#FF0000 ohos:text1 ohos:text_size35fp ohos:text_color#000000 ohos:left_margin50vp ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#00FF00 ohos:text2 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#0000FF ohos:text3 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#FFFF00 ohos:text4 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#FF00FF ohos:text5 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#FF0000 ohos:text6 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#00FF00 ohos:text7 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#0000FF ohos:text8 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#FFFF00 ohos:text9 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ Text ohos:height50vp ohos:width50vp ohos:background_element#0000FF ohos:text10 ohos:text_size35fp ohos:text_color#000000 ohos:text_alignmentcenter/ /TableLayout绝对布局PositionLayout可以指定组件的具体位置。自适应布局AdaptiveBoxLayout指定一行的范围。屏幕范围小每行就展示一个屏幕范围大就展示多个底层还不是太稳定。组件和布局的包含关系布局可以理解为是一个容器可以容纳组件和其他布局并规定他们如何进行显示。组件在未被添加到布局中时 既无法显示也无法交互因此一个用户界面至少包含一个布局。Java UI框架提供了一些标准布局功能的容器它们继承自ComponentContainer一般以“Layout”结尾如DirectionalLayout、DependentLayout等。组件树在一个界面中最外层是一定是布局在布局里面可以有组件也可以有其他布局。所以布局可以理解为是多个组件形成的那个整体。AbilityAbility概述Ability是应用所具备能力的抽象也是应用程序的重要组成部分。一个应用可以具备多种能力即可以包含多个 AbilityHarmonyOS支持应用以Ability为单位进行部署。Ability分类FAFeature AbilityPAParticle Ability每种类型为开发者提供了不同的模板以便实现不同的业务功能。Feature AbilityFAFA支持Page Ability简单理解就是手机应用中的一个界面。一个界面就是一个FA。Page模板是FA唯一支持的模板用于提供与用户交互的能力。一个Page实例可以包含一组相关页面每个页面用 一个AbilitySlice实例表示。Particle AbilityPAFA是有有界面的而Particle AbilityPA是无界面的简单理解就是可以运行在后台的一个服务。PA支持Service Ability和Data Ability1Service模板 用于提供后台运行任务的能力。2Data模板 用于对外部提供统一的数据访问抽象。一般是跟数据相关的比如如果我们要运行访问数据库。那么就可以用 PA中的Data模板。Feature AbilityFA页面FA和切片之间的关系页面中如何添加多个切片页面之间的跳转想要学习跳转首先要知道一个知识点就是意图表示我跳转的时候跳到哪里以及携带什么参数进行跳转Intent概述Intent是对象之间传递信息的载体。 例如当一个Ability需要启动另一个Ability时或者一个AbilitySlice需要导航到另一个AbilitySlice时可以通过 Intent指定启动的目标同时携带相关数据。Intent的构成元素包括Operation与ParametersOperation 表示要跳转的目的地Parameters 跳转时所携带的数据详解练习在第一个界面中给Intent添加用户名zhangsan和用户等级V8。在第二个界面中通过Intent中的键获取到对应的值。代码示例//第一个界面中的代码 public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { Button button; Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); button (Button) findComponentById(ResourceTable.Id_text_button); button.setClickedListener(this); } Override public void onActive() { super.onActive(); } Override public void onForeground(Intent intent) { super.onForeground(intent); } Override public void onClick(Component component) { if(component button){ //跳转页面 //明确要跳转的页面 Intent i new Intent(); Operation operation new Intent.OperationBuilder() .withDeviceId()//本机 .withBundleName(com.example.myapplication)//哪个应用 .withAbilityName(com.example.myapplication.Second_Ability)//哪个界面 .build(); i.setOperation(operation); i.setParam(username,zhangsan); i.setParam(userLevel,V8); startAbility(i); } } } //第二个界面中的代码 public class Second_AbilitySlice extends AbilitySlice { Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_second_); Text text (Text) findComponentById(ResourceTable.Id_text_helloworld); //通过键获取对应的值 String username intent.getStringParam(username); String userLevel intent.getStringParam(userLevel); //并把值设置到文本中 text.setText(username --- userLevel); } Override public void onActive() { super.onActive(); } Override public void onForeground(Intent intent) { super.onForeground(intent); } }页面跳转的所有情况同一个页面中不同切片之间的跳转无参有参有返回结果不同页面中主切片跟主切片之间的跳转无参有参有返回结果不同页面中主切片跟非主切片之间的跳转无参有参有返回结果代码示例同一个页面中不同切片之间的跳转无参有参有返回结果 public class MainAbilitySlice extends AbilitySlice { Button but1; Button but2; Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); but1 (Button) findComponentById(ResourceTable.Id_but1); but2 (Button) findComponentById(ResourceTable.Id_but2); but1.setClickedListener(this::onClick); but2.setClickedListener(this::onClick); } Override public void onActive() { super.onActive(); } Override public void onForeground(Intent intent) { super.onForeground(intent); } public void onClick(Component component) { if (component but1) { //跳转页面 //创建一个意图对象。 Intent i new Intent(); //创建意图的参数对象。 Operation operation new Intent.OperationBuilder() .withDeviceId()//本机 .withBundleName(com.example.myapplication5)//哪个应用 .withAbilityName(com.example.myapplication5.MainAbilitySecond)//哪个界面 .build(); i.setOperation(operation); startAbility(i); }else if(component but2){ //跳转页面 //创建一个意图对象。 Intent i new Intent(); //创建意图的参数对象。 Operation operation new Intent.OperationBuilder() .withAction(abilitysecond) .build(); i.setOperation(operation); startAbility(i); } } }不同页面的跳转 public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { Button but1; Button but2; Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); but1 (Button) findComponentById(ResourceTable.Id_but1); but2 (Button) findComponentById(ResourceTable.Id_but2); but1.setClickedListener(this); but2.setClickedListener(this); } Override public void onClick(Component component) { if(component but1){ //就要跳转到第二个页面中的主要子界面中 //创建意图对象 Intent i new Intent(); Operation operation new Intent.OperationBuilder() .withDeviceId() //本机 .withBundleName(com.example.jumpapplication6)//跳转到哪个应用上 .withAbilityName(com.example.jumpapplication6.SecondAbility)//哪个页面 .build(); i.setOperation(operation); startAbility(i); }else if(component but2){ //就要跳转到第二个页面中的其他子界面中 //创建意图对象 Intent i new Intent(); Operation operation new Intent.OperationBuilder() .withAction(secondabilityslicenomain) .build(); i.setOperation(operation); startAbility(i); } } }