HarmonyOS 基礎之 UI 布局（一）
概述
華為鴻蒙系統是一款全新的面向全場景的分布式操作系統，基于 harmony 的應用開發也越來越廣泛。鴻蒙系統是否也能開發出像安卓平臺一樣絢麗多彩的應用 UI 界面呢?通過對 android UI 已有知識的回顧和最近 harmony 應用開發的學習研究，我總結了一篇UI框架開發文檔，記錄一些開發中可能遇到的小問題和有用的小技巧分享給大家。
常用布局
一、DirectionalLayout 布局
DirectionalLayout 布局即方向布局，該種分為兩種模式 ( vertical ) 垂直排列子元素，( horizontal ) 水平排列子元素。垂直排列子元素 height 的總和不得超過父元素否則會被截取，超過部分無法顯示。同理水平排列子元素 width 的總和如果超過父元素也會被截取。
水平排列和垂直排列通過設置 ohos:orientation 屬性定義，ohos:orientation = " vertical " 為垂直排列，ohos:orientation = " horizontal" 為水平排列;
1、垂直排列
- <?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">
- <Text
- ohos:text="$string:HelloWorld"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:background_element="#f54444"
- ohos:layout_alignment="horizontal_center"/>
- <Text
- ohos:text="$string:HelloWorld"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:background_element="#f54444"
- ohos:layout_alignment="horizontal_center"/>
- <Text
- ohos:text="$string:HelloWorld"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:background_element="#f54444"
- ohos:layout_alignment="horizontal_center"/>
- </DirectionalLayout>
如上代碼為垂直方向的三個textview布局，效果圖如下：
2、水平排列
- <?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="horizontal">
- <Text
- ohos:text="$string:HelloWorld"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:left_margin="10fp"
- ohos:background_element="#f54444"
- ohos:layout_alignment="horizontal_center"/>
- <Text
- ohos:text="$string:HelloWorld"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:left_margin="10fp"
- ohos:background_element="#f54444"
- ohos:layout_alignment="horizontal_center"/>
- <Text
- ohos:text="$string:HelloWorld"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:left_margin="10fp"
- ohos:background_element="#f54444"
- ohos:layout_alignment="horizontal_center"/>
- </DirectionalLayout>
如上代碼為水平方向的三個textview布局，效果圖如下：
3、對齊方式
DirectionalLayout 中的組件使用 layout_alignment 控制自身在布局中的對齊方式，當對齊方式與排列方式方向一致時，對齊方式不會生效具體見下表。
三種基本對齊方式：左對齊，右對齊，居中。分別對應 layout_alignment 屬性的
- ohos:layout_alignment=“left”
- ohos:layout_alignment=“horizontal_center”
- ohos:layout_alignment=“right”
布局展示的樣式為：
4、權重
權重( weight )就是按比例來分配組件占用父組件的大小，通過 ohos:weight 屬性來定義。布局計算公式為：組件寬度=組件weight/所有組件weight之和*父布局可分配寬度;如 ohos:weight 分別設置為 ohos:weight = “1”，ohos:weight = “2”，ohos:weight = "3"的三個空間，布局則分別占父空間的1/6 , 2/6 , 3/6 。
- <?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="horizontal">
- <Text
- ohos:text="TEST"
- ohos:weight="1"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:background_element="#f78731"/>
- <Text
- ohos:text="TEST"
- ohos:weight="2"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:background_element="#f54444"/>
- <Text
- ohos:text="TEST"
- ohos:weight="3"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="50"
- ohos:top_margin="30fp"
- ohos:background_element="#f78731"/>
- </DirectionalLayout>
以上代碼展示的布局效果圖如下：
二、DependentLayout 布局
DependentLayout 與 DirectionalLayout相比，擁有更多的排布方式，每個組件可以指定相對于其他同級元素的位置，或者指定相對于父組件的位置。
1、相對于同級組件的位置布局
2、相對于父組件的位置布局
DependentLayout 布局類似于 Android 的 RelativeLayout 比較靈活，具體怎么展示和調整組件布局可自行測試。
三、TableLayout 布局
TableLayout使用表格的方式劃分子組件, 也就是行和列的方式，TableLayout可配置表格的排列方式，行數和列數，以及組件的位置。
1、行列的設置
ohos:row_count 表示設置網格布局中行數，ohos:column_count 表示設置網格布局中的列數。如果沒有為子布局設置行列數，則自動繼承父布局的行數和列數。在網格布局中若子組件的數量超出列數設置，則會自動添加行數。比如設置一行，兩列，但是是三個子組件，行數設置失效，就會自動增加一行。如下設置三行兩列。則布局就是如下展示。
- <TableLayout
- ...
- ohos:row_count="3"
- ohos:column_count="2"
- />
2、設置對齊方式
通過屬性 ohos:alignment_type 來設置對齊方式，如下：
- <TableLayout
- ...
- ohos:alignment_type="align_contents">
- ...
- </TableLayout>
四、StackLayout
StackLayout 直接在屏幕上開辟出一塊空白的區域，添加到這個布局中的視圖都是以層疊的方式顯示，而它會把這些視圖默認放到這塊區域的左上角，第一個添加到布局中視圖顯示在最底層，最后一個被放在最頂層。上一層的視圖會覆蓋下一層的視圖。
- <?xml version="1.0" encoding="utf-8"?>
- <StackLayout
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:id="$+id:stack_layout"
- ohos:height="match_parent"
- ohos:width="match_parent">
- <Text
- ohos:id="$+id:text_blue"
- ohos:text_alignment="bottom|horizontal_center"
- ohos:text_size="24fp"
- ohos:text="第一層"
- ohos:height="400vp"
- ohos:width="400vp"
- ohos:background_element="#3F56EA" />
- <Text
- ohos:id="$+id:text_light_purple"
- ohos:text_alignment="bottom|horizontal_center"
- ohos:text_size="24fp"
- ohos:text="第二層"
- ohos:height="300vp"
- ohos:width="300vp"
- ohos:background_element="#00AAEE" />
- <Text
- ohos:id="$+id:text_orange"
- ohos:text_alignment="center"
- ohos:text_size="24fp"
- ohos:text="第三層"
- ohos:height="80vp"
- ohos:width="80vp"
- ohos:background_element="#00BFC9" />
- </StackLayout>
以上代碼效果圖如下：
