共计 14418 个字符,预计需要花费 37 分钟才能阅读完成。
作者:韩茹
公司:程序咖(北京)科技有限公司
鸿蒙巴士专栏作家
DirectionalLayout 是 Java UI 中的一种重要组件布局,用于将一组组件 (Component) 依照程度或者垂直方向排布,可能不便地对齐布局内的组件。该布局和其余布局的组合,能够实现更加丰盛的布局形式。
DirectionalLayout 示意图
一、反对的 XML 属性
DirectionalLayout 的共有 XML 属性继承自:Component
属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 |
---|---|---|---|---|
id | 控件 identity,用以辨认不同控件对象,每个控件惟一 | integer 类型 | 仅可用于配置控件的 id。 | ohos:id=”$+id:component_id” |
theme | 款式 | 援用 | 仅可援用 pattern 资源。 | ohos:theme=”$pattern:button_pattern” |
width | 宽度,必填项 | float 类型,match_parent,match_content | ohos:width=”20″ ohos:width=”10vp” ohos:width=”$float:size_value” |
|
height | 高度,必填项 | float 类型,match_parent,match_content | ohos:height=”20″ ohos:height=”20vp” ohos:height=”$float:size_value” |
|
min_width | 最小宽度 | float 类型 | ohos:min_width=”20″ ohos:min_width=”20vp” ohos:min_width=”$float:size_value” |
|
min_height | 最小高度 | float 类型 | ohos:min_height=”20″ ohos:min_height=”20vp” ohos:min_height=”$float:size_value” |
|
alpha | 透明度 | float 类型 | 取值范畴在 0~1。 | ohos:alpha=”0.86″ ohos:alpha=”$float:value” |
enabled | 是否启用 | boolean 类型 | ohos:enabled=”true” ohos:enabled=”$boolean:true” |
|
visibility | 可见性 | visible,invisible,hide | ohos:visibility=”visible” | |
padding | 内间距 | float 类型 | ||
margin | 外边距 | float 类型 |
DirectionalLayout 的自有 XML 属性见下表:详见官网文档:
属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 | ||
---|---|---|---|---|---|---|
orientation | 子布局排列方向 | horizontal | 示意程度方向布局。 | ohos:orientation=”horizontal” | ||
vertical | 示意垂直方向布局。 | ohos:orientation=”vertical” | ||||
alignment | 对齐形式 | left | 示意左对齐。 | 能够设置取值项如表中所列,也能够应用“\ | ”进行多项组合。ohos:alignment=”top\ | left” ohos:alignment=”left” |
top | 示意顶部对齐。 | |||||
right | 示意右对齐。 | |||||
bottom | 示意底部对齐。 | |||||
horizontal_center | 示意程度居中对齐。 | |||||
vertical_center | 示意垂直居中对齐。 | |||||
center | 示意居中对齐。 | |||||
start | 示意靠起始端对齐。 | |||||
end | 示意靠完结端对齐。 | |||||
total_weight | 所有子视图的权重之和 | float 类型 | 能够间接设置浮点数值,也能够援用 float 浮点数资源。 | ohos:total_weight=”2.5″ ohos:total_weight=”$float:total_weight” |
DirectionalLayout 所蕴含组件可反对的 XML 属性见下表:
表 2 DirectionalLayout 所蕴含组件可反对的 XML 属性
属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 | ||
---|---|---|---|---|---|---|
ayout_alignment | 对齐形式 | left | 示意左对齐。 | 能够设置取值项如表中所列, 也能够应用“\ |
”进行多项组合。 ohos:layout_alignment=”top” ohos:layout_alignment=”top\ |
left” |
top | 示意顶部对齐。 | |||||
right | 示意右对齐。 | |||||
bottom | 示意底部对齐。 | |||||
horizontal_center | 示意程度居中对齐。 | |||||
vertical_center | 示意垂直居中对齐。 | |||||
center | 示意居中对齐。 | |||||
weight | 比重 | float 类型 | 能够间接设置浮点数值,也能够援用 float 浮点数资源。 | ohos:weight=”1″ ohos:weight=”$float:weight” |
二、排列形式
DirectionalLayout 的排列方向(orientation)分为程度(horizontal)或者垂直(vertical)方向。应用 orientation 设置布局内组件的排列形式,默认为垂直排列。
- 垂直排列
垂直方向排列三个按钮,成果如下:
<img src=”https://img.chengxuka.com/WX20210601-175801@2x.png/mark” alt=”WX20210601-175801@2x” style=”zoom:50%;” />
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal">
<!--
ohos:orientation="vertical",垂直排列
ohos:orientation="horizontal",程度排列
-->
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:margin="20vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:margin="20vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 2"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:margin="20vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
新增一个 graphic 文件,color_cyan_element.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#FFC0CB"/>
</shape>
- 程度排列
程度方向排列三个按钮,成果如下:
只须要批改下面的 DirectionalLayout 布局中的 ohos:orientation
属性即可:由 vertical
改为horizontal
。
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal">
<!--
ohos:orientation="vertical",垂直排列
ohos:orientation="horizontal",程度排列
-->
要留神:
DirectionalLayout 不会主动换行,其子组件会依照设定的方向顺次排列,若超过布局自身的大小,超出布局大小的局部将不会被显示,例如:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal">
<!--
ohos:orientation="vertical",垂直排列
ohos:orientation="horizontal",程度排列
-->
<Button
ohos:width="100vp"
ohos:height="40vp"
ohos:margin="20vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="100vp"
ohos:height="40vp"
ohos:margin="20vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 2"/>
<Button
ohos:width="100vp"
ohos:height="40vp"
ohos:margin="20vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
还是之前的代码,咱们将 Button 的宽度由 80 调整为 100,成果如下:
三、对齐形式
DirectionalLayout 中的组件应用 layout_alignment 管制本身在布局中的对齐形式,当对齐形式与排列形式方向统一时,对齐形式不会失效,如设置了程度方向的排列形式,则左对齐、右对齐将不会失效。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="500vp"
ohos:width="300vp"
ohos:background_element="#FFDEAD"
ohos:orientation="vertical"
>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 2"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
默认成果如下:
<img src=”https://img.chengxuka.com/WX20210601-181803@2x.png/mark” alt=”WX20210601-181803@2x” style=”zoom:50%;” />
当初是垂直方向的布局,3 个按钮呈纵向排列,那么咱们能够通过 layout_alignment
属性来设置他们的对齐形式就是横向上的,所以无效的属性值是:left,right,horizontal_center,center。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="500vp"
ohos:width="300vp"
ohos:background_element="#FFDEAD"
ohos:orientation="vertical"
>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:layout_alignment="left"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:layout_alignment="horizontal_center"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 2"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:layout_alignment="right"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
效果图:
<img src=”https://img.chengxuka.com/WX20210601-182140@2x.png/mark” alt=”WX20210601-182140@2x” style=”zoom:50%;” />
如果是程度方向的布局,3 个按钮呈横向排列,那么咱们能够通过 layout_alignment
属性来设置他们的对齐形式就是纵向上的,所以无效的属性值是:top,bottom,vertical_center,center。
效果图:
<img src=”https://img.chengxuka.com/WX20210601-182701@2x.png/mark” alt=”WX20210601-182701@2x” style=”zoom:50%;” />
设置对齐形式后:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="500vp"
ohos:width="350vp"
ohos:background_element="#FFDEAD"
ohos:orientation="horizontal"
>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:layout_alignment="top"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:layout_alignment="vertical_center"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 2"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:layout_alignment="center"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
<Button
ohos:width="80vp"
ohos:height="40vp"
ohos:text_size="16fp"
ohos:layout_alignment="bottom"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 4"/>
</DirectionalLayout>
效果图:
<img src=”https://img.chengxuka.com/WX20210601-182613@2x.png/mark” alt=”WX20210601-182613@2x” style=”zoom:50%;” />
在 DirectionLayout 上应用 alignment 属性,也能够管制外面的内容的对齐形式:
<?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:orientation="vertical"
ohos:alignment="bottom|right"
>
<Text
ohos:height="200vp"
ohos:width="200vp"
ohos:background_element="#ff00ff"
/>
<Text
ohos:height="200vp"
ohos:width="200vp"
ohos:background_element="#ffff00"
/>
</DirectionalLayout>
效果图:
<img src=”https://img.chengxuka.com/WX20210602-104916@2x.png/mark” alt=”WX20210602-104916@2x” style=”zoom:50%;” />
写个例子,画个五饼:其实这个例子应用 DependentLayout 布局,特地容易实现,然而此处为了练习,咱们用 DirectionLayout 布局实现。
<img src=”https://img.chengxuka.com/WX20210602-111113@2x.png/mark” alt=”WX20210602-111113@2x” style=”zoom:50%;” />
示例代码:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:orientation="vertical">
<!-- 下面两个饼 -->
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal"
>
<Text
ohos:width="80vp"
ohos:height="80vp"
ohos:background_element="$media:binggan"
ohos:layout_alignment="left"
/>
<DirectionalLayout
ohos:height="match_content"
ohos:weight="1"
ohos:width="0vp"
ohos:orientation="vertical">
<Text
ohos:width="80vp"
ohos:height="80vp"
ohos:background_element="$media:binggan"
ohos:layout_alignment="right"
/>
</DirectionalLayout>
</DirectionalLayout>
<!-- 两头的饼 -->
<DirectionalLayout
ohos:height="0vp"
ohos:width="match_parent"
ohos:weight="1"
ohos:alignment="center"
ohos:orientation="vertical">
<Text
ohos:width="80vp"
ohos:height="80vp"
ohos:background_element="$media:binggan"
/>
</DirectionalLayout>
<!-- 上面两个饼 -->
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal"
>
<Text
ohos:width="80vp"
ohos:height="80vp"
ohos:background_element="$media:binggan"
ohos:layout_alignment="left"
/>
<DirectionalLayout
ohos:height="match_content"
ohos:weight="1"
ohos:width="0vp"
ohos:alignment="bottom|right"
ohos:orientation="vertical">
<Text
ohos:width="80vp"
ohos:height="80vp"
ohos:background_element="$media:binggan"
/>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
四、权重
权重(weight)就是按比例来调配组件占用父组件的大小,在程度布局下计算公式为:
父布局可调配宽度 = 父布局宽度 - 所有子组件 width 之和;
组件宽度 = 组件 weight/ 所有组件 weight 之和 * 父布局可调配宽度;
理论应用过程中,倡议应用 width= 0 来按比例调配父布局的宽度,1:1:1 成果如下:
代码:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal">
<Button
ohos:width="0vp"
ohos:height="20vp"
ohos:weight="1"
ohos:top_margin="20vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="0vp"
ohos:height="20vp"
ohos:weight="1"
ohos:top_margin="20vp"
ohos:background_element="$graphic:color_gray_element"
ohos:text="Button 2"/>
<Button
ohos:width="0vp"
ohos:height="20vp"
ohos:weight="1"
ohos:top_margin="20vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
新增一个 graphic 文件:color_gray_element.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#878787"/>
</shape>
权重的例子,效果图如下:
<img src=”https://img.chengxuka.com/WX20210602-103744@2x.png/mark” alt=”WX20210602-103744@2x” style=”zoom:50%;” />
示例代码:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:orientation="vertical">
<!--
上半局部:程度的 DirectionalLayout
-->
<DirectionalLayout
ohos:width="match_parent"
ohos:height="0vp"
ohos:weight="1"
ohos:orientation="horizontal"
>
<Text
ohos:width="0vp"
ohos:height="match_parent"
ohos:weight="1"
ohos:background_element="#59D887"
ohos:text_alignment="center"
ohos:text="1"
ohos:text_size="28fp"
/>
<Text
ohos:width="0vp"
ohos:height="match_parent"
ohos:weight="1"
ohos:background_element="#88558D"
ohos:text_alignment="center"
ohos:text="2"
ohos:text_size="28fp"
/>
<Text
ohos:width="0vp"
ohos:height="match_parent"
ohos:weight="1"
ohos:background_element="#FCCF20"
ohos:text_alignment="center"
ohos:text="3"
ohos:text_size="28fp"
/>
<Text
ohos:width="0vp"
ohos:height="match_parent"
ohos:weight="1"
ohos:background_element="#6C8CE0"
ohos:text_alignment="center"
ohos:text="4"
ohos:text_size="28fp"
/>
</DirectionalLayout>
<!--
下半局部:垂直的 DirectionalLayout
-->
<DirectionalLayout
ohos:width="match_parent"
ohos:height="0vp"
ohos:weight="1"
ohos:orientation="vertical"
>
<Text
ohos:width="match_parent"
ohos:height="0vp"
ohos:weight="1"
ohos:background_element="#59D887"
ohos:text_alignment="center"
ohos:text="a"
ohos:text_size="28fp"
/>
<Text
ohos:width="match_parent"
ohos:height="0vp"
ohos:weight="1"
ohos:background_element="#88558D"
ohos:text_alignment="center"
ohos:text="b"
ohos:text_size="28fp"
/>
<Text
ohos:width="match_parent"
ohos:height="0vp"
ohos:weight="1"
ohos:background_element="#FCCF20"
ohos:text_alignment="center"
ohos:text="c"
ohos:text_size="28fp"
/>
<Text
ohos:width="match_parent"
ohos:height="0vp"
ohos:weight="1"
ohos:background_element="#6C8CE0"
ohos:text_alignment="center"
ohos:text="d"
ohos:text_size="28fp"
/>
</DirectionalLayout>
</DirectionalLayout>
利用文本组件实现一个标题栏和具体内容的界面。
<img src=”https://img.chengxuka.com/WX20210602-091458@2x.png/mark” alt=”WX20210602-091458@2x” style=”zoom:50%;” />
源码示例:
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:background_element="$graphic:color_light_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:top_padding="10vp"
ohos:bottom_padding="10vp"
ohos:background_element="$graphic:background_text"
ohos:text="Title"
ohos:text_weight="1000"
ohos:text_alignment="horizontal_center"/>
<Text
ohos:id="$+id:text2"
ohos:width="match_parent"
ohos:height="640vp"
ohos:text_size="25fp"
ohos:background_element="$graphic:background_text"
ohos:text="Content"
ohos:top_margin="15vp"
ohos:left_margin="15vp"
ohos:right_margin="15vp"
ohos:bottom_margin="15vp"
ohos:text_alignment="center"
ohos:below="$id:text1"
ohos:text_font="serif"/>
<Button
ohos:id="$+id:button1"
ohos:width="100vp"
ohos:height="match_content"
ohos:text_size="15fp"
ohos:background_element="$graphic:background_text"
ohos:text="Previous"
ohos:right_margin="15vp"
ohos:bottom_margin="15vp"
ohos:padding="5vp"
ohos:below="$id:text2"
ohos:left_of="$id:button2"
ohos:text_font="serif"/>
<Button
ohos:id="$+id:button2"
ohos:width="100vp"
ohos:height="match_content"
ohos:text_size="15fp"
ohos:background_element="$graphic:background_text"
ohos:text="Next"
ohos:right_margin="15vp"
ohos:bottom_margin="15vp"
ohos:padding="5vp"
ohos:align_parent_end="true"
ohos:below="$id:text2"
ohos:text_font="serif"/>
</DependentLayout>
color_light_gray_element.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#EDEDED"/>
</shape>
background_text.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="30"/>
<solid
ohos:color="#C0C0C0"/>
</shape>
更多内容:
1、社区:鸿蒙巴士 https://www.harmonybus.net/
2、公众号:HarmonyBus
3、技术交换 QQ 群:714518656
4、视频课:https://www.chengxuka.com