第11天 | 鴻蒙App開發實戰,相對佈局

相對佈局DependentLayout,也是比較常用的一個佈局管理器,在它裡面,元件的排列方式是相對於其他同級元件或者父元件的位置進行佈局。

相對同級元件

元件B神,想躲在元件A卡的

後邊

時,在B神

中用end_of屬性指定A卡的身份id即可。你將end_of理解成追尾就好,也就是說,如果想讓B在A的尾部,可在元件B神中,用end_of屬性指定元件A的id名稱,程式碼如下:

執行虛擬機器之後,效果如下圖所示:

第11天 | 鴻蒙App開發實戰,相對佈局

有在尾部的end_of,就有在前面的start_of,還有在左邊的

left_of等等,更多用於指定相對位置的屬性,如下表所示:

屬性名稱

中文描述

取值

取值說明

使用案例

left_of

將右邊緣與另一個子元件的左邊緣對齊

引用

僅可引用DependentLayout中包含的其他元件的id。

說明

left_of與start_of、end_of屬性有衝突,不建議一起使用。在“水平佈局方向為從左到右”時,left_of會與start_of屬性衝突;在“水平佈局方向為從右到左”時,left_of會與end_of屬性衝突。

同時配置時,start_of、end_of優先順序高於left_of屬性。

ohos:left_of=“$id:component_id”

right_of

將左邊緣與另一個子元件的右邊緣對齊

引用

僅可引用DependentLayout中包含的其他元件的id。

說明

right_of與start_of、end_of屬性有衝突,不建議一起使用。在“水平佈局方向為從左到右”時,right_of會與end_of屬性衝突;在“水平佈局方向為從右到左”時,right_of會與start_of屬性衝突。

同時配置時,start_of、end_of優先順序高於right_of屬性。

ohos:right_of=“$id:component_id”

start_of

將結束邊與另一個子元件的起始邊對齊

引用

僅可引用DependentLayout中包含的其他元件的id。

說明

start_of與left_of、right_of屬性有衝突,不建議一起使用。在“水平佈局方向為從左到右”時,start_of會與left_of屬性衝突;在“水平佈局方向為從右到左”時,start_of會與right_of屬性衝突。

同時配置時,start_of優先順序高於left_of、right_of屬性。

ohos:start_of=“$id:component_id”

end_of

將起始邊與另一個子元件的結束邊對齊

引用

僅可引用DependentLayout中包含的其他元件的id。

說明

end_of與left_of、right_of屬性有衝突,不建議一起使用。在“水平佈局方向為從左到右”時,end_of會與right_of屬性衝突;在“水平佈局方向為從右到左”時,end_of會與left_of屬性衝突。

同時配置時,end_of優先順序高於left_of、right_of屬性。

ohos:end_of=“$id:component_id”

above

將下邊緣與另一個子元件的上邊緣對齊

引用

僅可引用DependentLayout中包含的其他元件的id

ohos:above=“$id:component_id”

below

將上邊緣與另一個子元件的下邊緣對齊

引用

僅可引用DependentLayout中包含的其他元件的id

ohos:below=“$id:component_id”

align_baseline

將子元件的基線與另一個子元件的基線對齊

引用

僅可引用DependentLayout中包含的其他元件的id

ohos:align_baseline=“$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_top

將上邊緣與另一個子元件的上邊緣對齊

引用

僅可引用DependentLayout中包含的其他元件的id

ohos:align_top=“$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_bottom

將底邊與另一個子元件的底邊對齊

引用

僅可引用DependentLayout中包含的其他元件的id

ohos:align_bottom=“$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_top

將上邊緣與父元件的上邊緣對齊

boolean型別

可以直接設定true/false,也可以引用boolean資源。

ohos:align_parent_top=“true”

ohos:align_parent_top=“$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_bottom

將底邊與父元件的底邊對齊

boolean型別

可以直接設定true/false,也可以引用boolean資源。

ohos:align_parent_bottom=“true”

ohos:align_parent_bottom=“$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”

center_in_parent

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

boolean型別

可以直接設定true/false,也可以引用boolean資源。

ohos:center_in_parent=“true”

ohos:center_in_parent=“$boolean:true”

horizontal_center

將子元件保持在父元件水平方向的中心

boolean型別

可以直接設定true/false,也可以引用boolean資源。

ohos:horizontal_center=“true”

ohos:horizontal_center=“$boolean:true”

vertical_center

將子元件保持在父元件垂直方向的中心

boolean型別

可以直接設定true/false,也可以引用boolean資源。

ohos:vertical_center=“true”

ohos:vertical_center=“$boolean:true”

2。 相對父級元件

內部元件相對於外部元件的位置,如內部元件A在外部元件B的左上角,將align_parent_top設定為True即可。

元件的位置佈局可以進行組合,形成處於左上角、左下角、右上角、右下角的佈局。

第11天 | 鴻蒙App開發實戰,相對佈局

程式碼示例如下所示:

執行虛擬機器之後的效果如下圖所示:

第11天 | 鴻蒙App開發實戰,相對佈局

好了,想對佈局的內容就說到這了,你自己多試試其他屬性,看看效果。我寫下一篇其他佈局去了。

對了,記得關注我,賺大發。

一個當了10年技術總監的老傢伙,分享多年的程式設計經驗。想學程式設計的朋友,關注我,你就賺到了。我愛分享Python、前端、Java和App方面的乾貨了。趕緊來圍觀啊!!!