DirectionalLayout線性佈局
今天我們介紹一下DirectionalLayout線性佈局,帶好小本本我們開始今天的課程了。
DirectionalLayout佈局
DirectionalLayout是Java UI中的重要佈局,主要是用於將一組元件(Component)按照水平或者垂直方向排布,能夠很方便的對其佈局內的所有元件,同時也可以和其他佈局進行組合,實現更加豐富的佈局方式。
DirectionalLayout的所有共有屬性是繼承自:Component基礎元件
DirectionalLayout示意圖
DirectionalLayout自有的佈局屬性如下:
alignment屬性:表示在自有的XML屬性,其中包括對齊方式,有左對齊、右對齊、水平居中對齊、垂直居中對齊等方式horizontal_center、垂直居中對齊vertical_center等方式。可以設定取值項如表中所列,也可以使用“|”進行多項組合。ohos:alignment="top|left" 或者ohos:alignment="left"
orientation屬性:是表示子佈局的排列方向,其中有兩個重要的屬性,一個是水平方向 horizontal,一個是垂直方向vertical。示例如下:水平方向:ohos:orientation="horizontal" 垂直方向:ohos:orientation="vertical"
total_weight權重:所有子檢視的權重之和,可以直接設定浮點數值,也可以引用float浮點數資源。ohos:total_weight="2.5"ohos:total_weight="$float:total_weight"
layout_alignment對齊方式:表示DirectionalLayout所包含的可支援的XML屬性。其中對其方式有左對齊、頂部對齊、水平居中對齊、垂直居中對齊等。可以設定取值項如表中所列,也可以使用“|”進行多項組合。ohos:layout_alignment="top" ohos:layout_alignment="top|left"
weight權重:權重(weight)就是按比例來分配元件佔用父元件的大小,在水平佈局下計算公式為:
父佈局可分配寬度=父佈局寬度-所有子元件width之和;
元件寬度=元件weight/所有元件weight之和*父佈局可分配寬度;
實際使用過程中,建議使用width=0來按比例分配父佈局的寬度,1:1:1效果如下:
案例一:排列方向
DirectionalLayout的排列方向(orientation)分為水平(horizontal)或者垂直(vertical)方向。使用orientation設定佈局內元件的排列方式,預設為垂直排列。
案例二:權重
權重(weight)就是按比例來分配元件佔用父元件的大小
以上就是這一期的鴻蒙系統DirectionalLayout線性佈局的介紹了,同學們趕緊去試試吧!
本文來自千鋒教育,轉載請註明出處。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2785613/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- HarmonyOS Java UI之DirectionalLayout佈局JavaUI
- Android入門教程 | UI佈局之LinearLayout 線性佈局AndroidUI
- Flutter線性佈局Row和ColumnFlutter
- 彈性佈局(伸縮佈局)
- flex彈性佈局 響應式佈局Flex
- [譯]在 Flutter 中如何設計線性佈局?Flutter
- flex佈局屬性Flex
- Flex-彈性佈局Flex
- display:flex 彈性佈局Flex
- CSS:彈性佈局(display:flex)CSSFlex
- flex彈性佈局 垂直居中Flex
- css之彈性佈局(flex)CSSFlex
- 彈性盒模型,flex佈局模型Flex
- flex 彈性佈局的基本操作Flex
- CSS3-彈性佈局篇CSSS3
- Android學習筆記之檔案分類和線性佈局Android筆記
- css佈局-float佈局CSS
- CSS佈局 --- 居中佈局CSS
- flex彈性佈局程式碼例項Flex
- 非佈局樣式-裝飾性屬性&CSS hackCSS
- 2020-12-17 html、css面試題3: 水平垂直居中,左右固定中間自適應 三欄佈局,靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局,IE中常見的相容性問題,清空陣列的方法HTMLCSS面試題陣列
- java:佈局方法(流佈局)Java
- qt 佈局---表單佈局QT
- 居中佈局、三欄佈局
- 一文搞懂flex(彈性盒佈局)Flex
- Android開發 - 檢視佈局屬性解析Android
- Flex彈性佈局(附超Q小demo)Flex
- 前端面試3:flex彈性盒佈局前端面試Flex
- 淺談Flex佈局的屬性及使用Flex
- CSS 佈局之水平居中佈局CSS
- 浮動佈局 和 flex佈局Flex
- CSS佈局之三欄佈局CSS
- CSS佈局 --- 自適應佈局CSS
- CSS佈局 --- 等寬&等高佈局CSS
- CSS經典佈局——聖盃佈局與雙飛翼佈局CSS
- 全域性性謀劃、戰略性佈局、整體性推進智慧技術
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- css--flex彈性佈局詳解和使用CSSFlex