harmonyOS應用-DirectionalLayout佈局
阿新 • • 發佈：2020-12-27
技術標籤：harmonyos應用
一 概述
DirectionalLayout是Java UI中的一種重要元件佈局，用於將一組元件(Component)按照水平或者垂直方向排布，能夠方便地對齊佈局內的元件。該佈局和其他佈局的組合，可以實現更加豐富的佈局方式（類似android線性佈局）
二 排列方式
DirectionalLayout的排列方向（orientation）分為水平（horizontal）或者垂直（vertical）方向。使用orientation設定佈局內元件的排列方式，預設為垂直排列。
垂直排列：垂直方向排列的三個文字，效果顯示如下：
三個文字垂直佈局的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:orientation="vertical"> <Text ohos:id="$+id:text_1" ohos:width="200vp" ohos:height="50vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_harmonyos_element" ohos:text="text_1" ohos:text_size="50vp" /> <Text ohos:id="$+id:text_2" ohos:width="200vp" ohos:height="50vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_harmonyos2_element" ohos:text="text_2" ohos:text_size="50vp" /> <Text ohos:id="$+id:text_3" ohos:width="200vp" ohos:height="50vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_harmonyos1_element" ohos:text="text_3" ohos:text_size="50vp" /> </DirectionalLayout>
color_harmonyos_element.xml顏色佈局（命名不太規範O(∩_∩)O哈哈~諒解）
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#00FFFD"/>
</shape>
水平排列：
三個文字水平佈局的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:orientation="horizontal"> <Text ohos:id="$+id:text_1" ohos:width="200vp" ohos:height="50vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_harmonyos_element" ohos:text="text_1" ohos:text_size="50vp" /> <Text ohos:id="$+id:text_2" ohos:width="200vp" ohos:height="50vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_harmonyos2_element" ohos:text="text_2" ohos:text_size="50vp" /> <Text ohos:id="$+id:text_3" ohos:width="200vp" ohos:height="50vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_harmonyos1_element" ohos:text="text_3" ohos:text_size="50vp" /> </DirectionalLayout>
DirectionalLayout不會自動換行，其子元件會按照設定的方向依次排列，若超過佈局本身的大小，超出佈局大小的部分將不會被顯示，此佈局包含了三個文字，但由於DirectionalLayout不會自動換行，超出佈局大小的元件部分無法顯示。介面顯示如下：
<?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="horizontal">
<Text
ohos:id="$+id:text_1"
ohos:width="400vp"
ohos:height="50vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_harmonyos_element"
ohos:text="text_1"
ohos:text_size="50vp"
/>
<Text
ohos:id="$+id:text_2"
ohos:width="400vp"
ohos:height="50vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_harmonyos2_element"
ohos:text="text_2"
ohos:text_size="50vp"
/>
<Text
ohos:id="$+id:text_3"
ohos:width="400vp"
ohos:height="50vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_harmonyos1_element"
ohos:text="text_3"
ohos:text_size="50vp"
/>
</DirectionalLayout>
三 對齊方式
DirectionalLayout中的元件使用layout_alignment控制自身在佈局中的對齊方式，當對齊方式與排列方式方向一致時，對齊方式不會生效，如設定了水平方向的排列方式，則左對齊、右對齊將不會生效。常用的對齊引數
| 引數 | 作用 | 可搭配排列方式 |
|---|---|---|
| left | 左對齊 | 垂直排列 |
| top | 頂部對齊 | 水平排列 |
| right | 右對齊 | 垂直排列 |
| bottom | 底部對齊 | 水平排列 |
| horizontal_center | 水平方向居中 | 垂直排列 |
| vertical_center | 垂直方向居中 | 水平排列 |
| center | 垂直與水平方向都居中 | 水平/垂直排列 |
三種對齊方式的示例程式碼：
如果將root節點的ohos:orientation="vertical"修改ohos:orientation="horizontal"將不生效
<?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">
<Text
ohos:id="$+id:text_1"
ohos:width="200vp"
ohos:height="50vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:layout_alignment="left"
ohos:background_element="$graphic:color_harmonyos_element"
ohos:text="text_1"
ohos:text_size="50vp"
/>
<Text
ohos:id="$+id:text_2"
ohos:width="200vp"
ohos:height="50vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:layout_alignment="horizontal_center"
ohos:background_element="$graphic:color_harmonyos2_element"
ohos:text="text_2"
ohos:text_size="50vp"
/>
<Text
ohos:id="$+id:text_3"
ohos:width="200vp"
ohos:height="50vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:layout_alignment="right"
ohos:background_element="$graphic:color_harmonyos1_element"
ohos:text="text_3"
ohos:text_size="50vp"
/>
</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:height="match_parent"
ohos:width="match_parent"
ohos:orientation="horizontal">
<Text
ohos:id="$+id:text_1"
ohos:width="0"
ohos:height="50vp"
ohos:weight="1"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:layout_alignment="left"
ohos:background_element="$graphic:color_harmonyos_element"
ohos:text="text_1"
ohos:text_size="50vp"
/>
<Text
ohos:id="$+id:text_2"
ohos:width="0"
ohos:height="50vp"
ohos:weight="1"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:layout_alignment="horizontal_center"
ohos:background_element="$graphic:color_harmonyos2_element"
ohos:text="text_2"
ohos:text_size="50vp"
/>
<Text
ohos:id="$+id:text_3"
ohos:width="0"
ohos:height="50vp"
ohos:weight="1"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:layout_alignment="right"
ohos:background_element="$graphic:color_harmonyos1_element"
ohos:text="text_3"
ohos:text_size="50vp"
/>
</DirectionalLayout>
五 總結
DirectionalLayout 是常用的佈局之一，方向性主要是水平和垂直佈局，同時具有對齊特性，可以設定寬和高以及權重，與其他的元件組合豐富的介面