在之前的章節(jié)中我使用的是Java 代碼構(gòu)建UI界面，從本節(jié)開始殉挽，將使用XML構(gòu)建UI界面箱锐。
使用XML構(gòu)建UI（默認(rèn)你已經(jīng)會(huì)在項(xiàng)目中創(chuàng)建XML布局文件）界面相對(duì)Java代碼構(gòu)建的好處是：結(jié)構(gòu)清晰误甚，代碼簡(jiǎn)潔宪萄。
DirectionalLayout（單一方向排列布局）是Java UI的一種重要的組件布局，用于將一組組件按照水平或垂直方向排布屎债，能夠方便地對(duì)齊布局內(nèi)的組件仅政。與Android中的線性布局相似∨杈裕可以通過設(shè)置orientation屬性來控制組件的排列方式圆丹，默認(rèn)為垂直排列。
<?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:background_element="#FFCCCCCC"
ohos:orientation="vertical">
<Text
ohos:id="$+id:txtOne"
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="20vp"
ohos:margin="20vp"
ohos:text_size="30vp"
ohos:text_color="#FFFFFFFF"
ohos:background_element="#FFFF00FF"
ohos:text="我是第一個(gè)"/>
<Text
ohos:id="$+id:txtTwo"
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="20vp"
ohos:margin="20vp"
ohos:text_size="30vp"
ohos:text_color="#FFFFFFFF"
ohos:background_element="#FFFF00FF"
ohos:text="我是第二個(gè)"/>
<Text
ohos:id="$+id:txtThird"
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="20vp"
ohos:margin="20vp"
ohos:text_size="30vp"
ohos:text_color="#FFFFFFFF"
ohos:background_element="#FFFF00FF"
ohos:text="我是第三個(gè)"/>
</DirectionalLayout>
將上面代碼中的ohos:orientation="vertical"換成ohos:orientation="horizontal"然后運(yùn)行查看效果如下所示躯喇。
DirectionalLayout布局中的組件不會(huì)自動(dòng)換行辫封，會(huì)按照設(shè)定的方向依次排列，若超出布局本身大小玖瘸，超出布局大小的部分將不會(huì)顯示秸讹。我們將上面示例代碼中的Text組件寬度設(shè)定為400vp檀咙，然后運(yùn)行效果如下所示雅倒，我們可以看到，第三個(gè)Text組件顯示了一部分弧可。
DirectionalLayout中的組件使用layout_alignment控制自身在布局中的對(duì)齊方式蔑匣，當(dāng)對(duì)齊方式與排列方式一致時(shí)，對(duì)齊方式不會(huì)生效棕诵，如布局為水平方法排列裁良，則其下組件左對(duì)齊、右對(duì)齊將不會(huì)生效校套。因?yàn)椴季种锌梢郧短撞季謥碡S富UI樣式价脾，我們可以使用這個(gè)方式來演示一下對(duì)齊樣式。
<?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="0vp"
ohos:weight="2"
ohos:margin="10vp"
ohos:background_element="#FFDDDDDD"
ohos:orientation="vertical">
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text_size="20vp"
ohos:text_color="#FFFFFFFF"
ohos:layout_alignment="left"
ohos:background_element="#FFFF00FF"
ohos:text="左對(duì)齊"/>
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text_size="20vp"
ohos:text_color="#FFFFFFFF"
ohos:layout_alignment="horizontal_center"
ohos:background_element="#FFFF00FF"
ohos:text="水平方向居中"/>
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text_size="20vp"
ohos:text_color="#FFFFFFFF"
ohos:layout_alignment="right"
ohos:background_element="#FFFF00FF"
ohos:text="右對(duì)齊"/>
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text_size="20vp"
ohos:text_color="#FFFFFFFF"
ohos:layout_alignment="center"
ohos:background_element="#FFFF00FF"
ohos:text="垂直與水平方向都居中"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="0vp"
ohos:margin="10vp"
ohos:weight="1"
ohos:background_element="#FFCCCCCC"
ohos:orientation="horizontal">
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text_size="20vp"
ohos:text_color="#FFFFFFFF"
ohos:layout_alignment="top"
ohos:background_element="#FFFF00FF"
ohos:text="頂部對(duì)齊"/>
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text_size="20vp"
ohos:text_color="#FFFFFFFF"
ohos:layout_alignment="vertical_center"
ohos:background_element="#FFFF00FF"
ohos:text="垂直方向居中"/>
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text_size="20vp"
ohos:text_color="#FFFFFFFF"
ohos:layout_alignment="bottom"
ohos:background_element="#FFFF00FF"
ohos:text="底部對(duì)齊"/>
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:padding="10vp"
ohos:margin="10vp"
ohos:text_size="20vp"
ohos:text_color="#FFFFFFFF"
ohos:layout_alignment="center"
ohos:background_element="#FFFF00FF"
ohos:text="垂直與水平方向都居中"/>
</DirectionalLayout>
</DirectionalLayout>
在上面代碼中我們看到兩個(gè)DirectionalLayout子布局中有
ohos:weight="1"屬性笛匙，這個(gè)屬性就是設(shè)置組件在布局中的權(quán)重侨把，按照比例來分配組件占用父組件的大小犀变。
DirectionalLayout布局需要掌握的知識(shí)點(diǎn)也就這么多，接下來再說說題外話秋柄。
設(shè)置UI顯示界面問題
我們使用XML方式構(gòu)建UI获枝，在AbilitySlice中設(shè)置界面入口的時(shí)候，一般會(huì)報(bào)錯(cuò)骇笔，找不到布局文件省店。官方推薦使用Build -> Build App(s)/Hap(s) > Build Debug Hap(s)重新編譯一次即可。
