DependentLayout是什么

DependentLayout是依賴布局，每個(gè)組件可以指定相對(duì)于其他同級(jí)元素的位置，或者指定相對(duì)于父組件的位置。(類似Android的相對(duì)布局)

DependentLayout 學(xué)習(xí)應(yīng)該從3點(diǎn)著手? 1 自身屬性2相對(duì)與其它同級(jí)控件進(jìn)行布局 3 相對(duì)父組件進(jìn)行布局

?DependentLayout的自有XML屬性

屬性名稱	中文描述	取值	取值說明	使用案例
alignment	對(duì)齊方式	left	表示左對(duì)齊。	可以設(shè)置取值項(xiàng)如表中所列，也可以使用“|”進(jìn)行多項(xiàng)組合。 ohos:alignment="top|left" ohos:alignment="left"
		top	表示頂部對(duì)齊。
		right	表示右對(duì)齊。
		bottom	表示底部對(duì)齊。
		horizontal_center	表示水平居中對(duì)齊。
		vertical_center	表示垂直居中對(duì)齊。
		center	表示居中對(duì)齊。

DependentLayout的自有XML屬性??alignment

1 右邊對(duì)齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="right"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>

?效果圖

2 底部對(duì)齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="bottom"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>

效果圖

3 居中

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>

效果圖?

4 右下角

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="right|bottom"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>

效果圖

DependentLayout所包含組件可支持的XML屬

2 相對(duì)其他同級(jí)控件 的屬性有

left_of? ：? ?將右邊緣與另一個(gè)子組件的左邊緣對(duì)齊
right_of? ：? 將左邊緣與另一個(gè)子組件的右邊緣對(duì)齊
start_of? ?： 將結(jié)束邊與另一個(gè)子組件的起始邊對(duì)齊?? ?
end_of? ?： 將起始邊與另一個(gè)子組件的結(jié)束邊對(duì)齊?? ?
above? ?： 將下邊緣與另一個(gè)子組件的上邊緣對(duì)齊
below? ? ：將上邊緣與另一個(gè)子組件的下邊緣對(duì)齊
align_baseline ：? ?將子組件的基線與另一個(gè)子組件的基線對(duì)齊
align_left? ? ? ?： 將左邊緣與另一個(gè)子組件的左邊緣對(duì)齊
align_top? ? ? ?： 將上邊緣與另一個(gè)子組件的上邊緣對(duì)齊
align_right? ? ： 將右邊緣與另一個(gè)子組件的右邊緣對(duì)齊
align_bottom? ?：? 將底邊與另一個(gè)子組件的底邊對(duì)齊
align_start? ? ： 將起始邊與另一個(gè)子組件的起始邊對(duì)齊

將右邊緣與另一個(gè)子組件的左邊緣對(duì)齊2.1 left_of

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:horizontal_center="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:left_of="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>

效果圖

2.2 right_of

將左邊緣與另一個(gè)子組件的右邊緣對(duì)齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:horizontal_center="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:right_of="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>

?效果圖：

?2.3 below?

將上邊緣與另一個(gè)子組件的下邊緣對(duì)齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:below="$id:button1"ohos:top_margin="20fp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

例如下圖Android 在java 的下面

2.4?align_right

將右邊緣與另一個(gè)子組件的右邊緣對(duì)齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="300fp"ohos:background_element="#ddd333"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:align_right="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>

效果圖

其他的幾種情況類似

3 相對(duì)父類組件進(jìn)行布局的屬性有

align_parent_left?? ?將左邊緣與父組件的左邊緣對(duì)齊
align_parent_top?? ?將上邊緣與父組件的上邊緣對(duì)齊
align_parent_right?? ?將右邊緣與父組件的右邊緣對(duì)齊
align_parent_bottom 將底邊與父組件的底邊對(duì)齊
align_parent_start?? ?將起始邊與父組件的起始邊對(duì)齊?? ?
align_parent_end?? ?將結(jié)束邊與父組件的結(jié)束邊對(duì)齊

3.1 align_parent_right 將右邊緣與父組件的右邊緣對(duì)齊

? ?它的作用和align_parent_end 作用相同

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_right="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

3.2?align_parent_left?將左邊緣與父組件的左邊緣對(duì)齊

?它的作用和align_parent_start?作用相同

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_left="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

3.3?align_parent_top?將上邊緣與父組件的上邊緣對(duì)齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_top="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

3.4?align_parent_bottom?

將底邊與父組件的底邊對(duì)齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_bottom="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

3.5 center_in_parent

將子組件保持在父組件的中心

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:center_in_parent="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

把所有的屬性都試了一遍，會(huì)Android開發(fā)的話，這個(gè)就簡(jiǎn)單多了，屬性上基本都一樣。

HarmonyOS UI開發(fā) TableLayout(表格布局) 的使用

HarmonyOS UI開發(fā) AdaptiveBoxLayout(自適應(yīng)盒子布局) 的使用

HarmonyOS UI開發(fā) PositionLayout(位置布局) 的使用

HarmonyOS UI開發(fā) TableLayout(表格布局) 的使用

HarmonyOS UI開發(fā) DirectionalLayout(定向布局) 的使用???????

總結(jié)

以上是生活随笔為你收集整理的HarmonyOS UI开发 DependentLayout(依赖布局) 的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。