ohos:end_of="id:component_id" below 将上边缘与另一个子组件的下边缘对齐 引用 仅可引用DependentLayout中包含的其他组件的id ohos:below="id:component_id" align_left 将左边缘与另一个子组件的左边缘对齐 引用 仅可引用DependentLayout中包含的其他组件的id。 说明
- align_left与align_start、align_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_left会与align_start属性冲突;在“水平布局方向为从右到左”时,align_left会与align_end属性冲突。
- 同时配置时,align_start、align_end优先级高于align_left属性。
ohos:align_left="id:component_id" align_right 将右边缘与另一个子组件的右边缘对齐 引用 仅可引用DependentLayout中包含的其他组件的id。 说明
- align_right与align_start、align_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_right会与align_end属性冲突;在“水平布局方向为从右到左”时,align_right会与align_start属性冲突。
- 同时配置时,align_start、align_end优先级高于align_right属性。
ohos:align_right="id:component_id" align_start 将起始边与另一个子组件的起始边对齐 引用 仅可引用DependentLayout中包含的其他组件的id。 说明
- align_start与align_left、align_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_start会与align_left属性冲突;在“水平布局方向为从右到左”时,align_start会与align_right属性冲突。
- 同时配置时,align_start优先级高于align_left、align_right属性。
ohos:align_start="$id:component_id" align_end 将结束边与另一个子组件的结束边对齐 引用 仅可引用DependentLayout中包含的其他组件的id。 说明
- align_end与align_left、align_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_end会与align_right属性冲突;在“水平布局方向为从右到左”时,align_end会与align_left属性冲突。
- 同时配置时,align_end优先级高于align_left、align_right属性。
ohos:align_end="$id:component_id" align_parent_left 将左边缘与父组件的左边缘对齐 boolean类型 可以直接设置true/false,也可以引用boolean资源。 说明
- align_parent_left与align_parent_start、align_parent_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_left会与align_parent_start属性冲突;在“水平布局方向为从右到左”时,align_parent_left会与align_parent_end属性冲突。
- 同时配置时,align_parent_start、align_parent_end优先级高于align_parent_left属性。
ohos:align_parent_left="true" ohos:align_parent_left="boolean:true" align_parent_right 将右边缘与父组件的右边缘对齐 boolean类型 可以直接设置true/false,也可以引用boolean资源。 说明
- align_parent_right与align_parent_start、align_parent_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_right会与align_parent_end属性冲突;在“水平布局方向为从右到左”时,align_parent_right会与align_parent_start属性冲突。
- 同时配置时,align_parent_start、align_parent_end优先级高于align_parent_right属性。
ohos:align_parent_right="true" ohos:align_parent_right="boolean:true" align_parent_start 将起始边与父组件的起始边对齐 boolean类型 可以直接设置true/false,也可以引用boolean资源。 说明
- align_parent_start与align_parent_left、align_parent_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_start会与align_parent_left属性冲突;在“水平布局方向为从右到左”时,align_parent_start会与align_parent_right属性冲突。
- 同时配置时,align_parent_start优先级高于align_parent_left、align_parent_right属性。
ohos:align_parent_start="true" ohos:align_parent_start="$boolean:true" align_parent_end 将结束边与父组件的结束边对齐 boolean类型 可以直接设置true/false,也可以引用boolean资源。 说明
- align_parent_end与align_parent_left、align_parent_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_end会与align_parent_right属性冲突;在“水平布局方向为从右到左”时,align_parent_end会与align_parent_left属性冲突。
- 同时配置时,align_parent_end优先级高于align_parent_left、align_parent_right属性。
ohos:align_parent_end="true" ohos:align_parent_end="boolean:true" horizontal_center 将子组件保持在父组件水平方向的中心 boolean类型 可以直接设置true/false,也可以引用boolean资源。 ohos:horizontal_center="true" ohos:horizontal_center="boolean:true"
排列方式
DependentLayout的排列方式是相对于其他同级组件或者父组件的位置进行布局。
相对于同级组件的对齐
- 根据位置对齐 left_of、right_of、start_of、end_of、above和below均相对于同级组件的不同位置进行对齐。例如left_of对齐方式,即将右边缘与同级组件的左边缘对齐,对齐后位于同级组件的左侧。其他几种对齐方式遵循的逻辑与此相同,需要注意的是start_of和end_of会跟随当前布局起始方向变化。 以上几种不同对齐方式的效果如下图所示:
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="500vp"
ohos:width="500vp"
ohos:background_element="#EDEDED">
<Text
ohos:id="$+id:text_center"
ohos:height="210vp"
ohos:width="210vp"
ohos:background_element="#878787"
ohos:center_in_parent="true"
ohos:text="center"
ohos:text_alignment="center"
ohos:text_size="20fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_left"
ohos:height="match_content"
ohos:width="match_content"
ohos:left_of="$id:text_center"
ohos:background_element="#FF9912"
ohos:padding="8vp"
ohos:text="left_of"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_right"
ohos:height="match_content"
ohos:width="match_content"
ohos:right_of="$id:text_center"
ohos:background_element="#FF9912"
ohos:padding="8vp"
ohos:text="right_of"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_above"
ohos:height="match_content"
ohos:width="match_content"
ohos:above="$id:text_center"
ohos:background_element="#FF9912"
ohos:padding="8vp"
ohos:text="above"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_below"
ohos:height="match_content"
ohos:width="match_content"
ohos:below="$id:text_center"
ohos:background_element="#FF9912"
ohos:padding="8vp"
ohos:text="below"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
</DependentLayout>
复制
- 根据边对齐
align_left、 align_right、 align_top、 align_bottom、 align_start和align_end都是与同级组件的相同边对齐。例如align_left对齐方式,即将当前组件与同级组件的左边缘对齐。其他几种对齐方式遵循的逻辑与此相同,需要注意的是align_start和align_end会跟随当前布局起始方向变化。
以上几种不同对齐方式的效果如下图所示:
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="500vp"
ohos:width="500vp"
ohos:background_element="#EDEDED">
<Text
ohos:id="$+id:text_center"
ohos:height="210vp"
ohos:width="210vp"
ohos:background_element="#878787"
ohos:center_in_parent="true"
ohos:text="center"
ohos:text_alignment="center"
ohos:text_size="20fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_top"
ohos:height="match_content"
ohos:width="match_content"
ohos:align_top="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:text="align_top"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_bottom"
ohos:height="match_content"
ohos:width="match_content"
ohos:align_bottom="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:text="align_bottom"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_left"
ohos:height="match_content"
ohos:width="match_content"
ohos:align_left="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:text="align_left"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_right"
ohos:height="match_content"
ohos:width="match_content"
ohos:align_right="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:text="align_right"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
</DependentLayout>
复制
- 组合属性对齐方式
在逻辑不冲突的情况下,开发者可以组合使用多种对齐方式来进行布局。以下为一些常用的对齐方式效果图
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="500vp"
ohos:width="500vp"
ohos:background_element="#EDEDED">
<Text
ohos:id="$+id:text_center"
ohos:height="210vp"
ohos:width="210vp"
ohos:background_element="#878787"
ohos:center_in_parent="true"
ohos:text="center"
ohos:text_alignment="center"
ohos:text_size="20fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_left_and_above"
ohos:height="match_content"
ohos:width="100vp"
ohos:left_of="$id:text_center"
ohos:above="$id:text_center"
ohos:background_element="#FF9912"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="left_of and above"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_left_and_below"
ohos:height="match_content"
ohos:width="100vp"
ohos:left_of="$id:text_center"
ohos:below="$id:text_center"
ohos:background_element="#FF9912"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="left_of and below"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_right_and_above"
ohos:height="match_content"
ohos:width="100vp"
ohos:right_of="$id:text_center"
ohos:above="$id:text_center"
ohos:background_element="#FF9912"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="right_of and above"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_right_and_below"
ohos:height="match_content"
ohos:width="100vp"
ohos:right_of="$id:text_center"
ohos:below="$id:text_center"
ohos:background_element="#FF9912"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="right_of and below"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_top_and_left"
ohos:height="match_content"
ohos:width="100vp"
ohos:align_top="$id:text_center"
ohos:left_of="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_top and left"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_top_and_right"
ohos:height="match_content"
ohos:width="100vp"
ohos:align_top="$id:text_center"
ohos:right_of="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_top and right"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_bottom_and_left"
ohos:height="match_content"
ohos:width="100vp"
ohos:align_bottom="$id:text_center"
ohos:left_of="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_bottom and left"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_bottom_and_right"
ohos:height="match_content"
ohos:width="100vp"
ohos:align_bottom="$id:text_center"
ohos:right_of="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_bottom and right"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_left_and_above"
ohos:height="match_content"
ohos:width="100vp"
ohos:align_left="$id:text_center"
ohos:above="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_left and above"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_left_and_below"
ohos:height="match_content"
ohos:width="100vp"
ohos:align_left="$id:text_center"
ohos:below="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_left and below"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_right_and_above"
ohos:height="match_content"
ohos:width="100vp"
ohos:align_right="$id:text_center"
ohos:above="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_right and above"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:id="$+id:text_align_right_and_below"
ohos:height="match_content"
ohos:width="100vp"
ohos:align_right="$id:text_center"
ohos:below="$id:text_center"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_right and below"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
</DependentLayout>
复制
相对于父级组件的对齐
- 单个属性对齐方式
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="500vp"
ohos:width="500vp"
ohos:background_element="#878787">
<Text
ohos:height="100vp"
ohos:width="match_content"
ohos:align_parent_left="true"
ohos:background_element="#FF9912"
ohos:padding="12vp"
ohos:multiple_lines="true"
ohos:text="align_parent_left"
ohos:text_alignment="vertical_center"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:align_parent_right="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_parent_right"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:align_parent_top="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_parent_top"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:align_parent_bottom="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_parent_bottom"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:center_in_parent="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="center_in_parent"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:horizontal_center="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="horizontal_center"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:vertical_center="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="vertical_center"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
</DependentLayout>
复制
- 组合属性对齐方式
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="500vp"
ohos:width="640vp"
ohos:background_element="#878787">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:center_in_parent="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="center_in_parent"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="190vp"
ohos:align_parent_left="true"
ohos:align_parent_top="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_parent_left and align_parent_top"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="190vp"
ohos:align_parent_left="true"
ohos:align_parent_bottom="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_parent_left and align_parent_bottom"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="190vp"
ohos:align_parent_right="true"
ohos:align_parent_top="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_parent_right and align_parent_top"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="190vp"
ohos:align_parent_right="true"
ohos:align_parent_bottom="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="align_parent_right and align_parent_bottom"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="190vp"
ohos:horizontal_center="true"
ohos:align_parent_top="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="horizontal_center and align_parent_top"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="190vp"
ohos:horizontal_center="true"
ohos:align_parent_bottom="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="horizontal_center and align_parent_bottom"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="190vp"
ohos:vertical_center="true"
ohos:align_parent_left="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="vertical_center and align_parent_left"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
<Text
ohos:height="match_content"
ohos:width="190vp"
ohos:vertical_center="true"
ohos:align_parent_right="true"
ohos:background_element="#228B22"
ohos:padding="8vp"
ohos:multiple_lines="true"
ohos:text="vertical_center and align_parent_right"
ohos:text_size="18fp"
ohos:text_color="#FFFFFF"/>
</DependentLayout>
复制
场景示例
使用DependentLayout可以轻松实现内容丰富的布局。
源码示例:
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:background_element="$graphic:color_background_gray_element">
<Text
ohos:id="$+id:text1"
ohos:width="match_parent"
ohos:height="match_content"
ohos:text_size="25fp"
ohos:top_margin="15vp"
ohos:left_margin="15vp"
ohos:right_margin="15vp"
ohos:background_element="$graphic:color_gray_element"
ohos:text="Title"
ohos:text_weight="1000"
ohos:text_alignment="horizontal_center"
/>
<Text
ohos:id="$+id:text2"
ohos:width="match_content"
ohos:height="120vp"
ohos:text_size="10fp"
ohos:background_element="$graphic:color_gray_element"
ohos:text="Catalog"
ohos:top_margin="15vp"
ohos:left_margin="15vp"
ohos:right_margin="15vp"
ohos:bottom_margin="15vp"
### 文末
技术是没有终点的,也是学不完的,最重要的是活着、不秃。
零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。
最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力,一定要自律,杜绝“三天打鱼两天晒网”,到最后白忙活一场。
高度自律的同时,要保持耐心,不抛弃不放弃,切勿自怨自艾,每天给自己一点点鼓励,学习的劲头就会很足,不容易犯困。
技术学到手后,找工作的时候一定要好好准备一份简历,不要无头苍蝇一样去海投简历,容易“竹篮打水一场空”。好好的准备一下简历,毕竟是找工作的敲门砖。
拿到面试邀请后,在面试的过程中一定要大大方方,尽力把自己学到的知识舒适地表达出来,不要因为是自学就不够自信,给面试官一个好的印象,面试成功的几率就会大很多,加油吧,骚年!
**开源分享:https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**