HarmonyOS 基礎(chǔ)之 UI 布局（一）
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
概述
華為鴻蒙系統(tǒng)是一款全新的面向全場(chǎng)景的分布式操作系統(tǒng)，基于 harmony 的應(yīng)用開(kāi)發(fā)也越來(lái)越廣泛。鴻蒙系統(tǒng)是否也能開(kāi)發(fā)出像安卓平臺(tái)一樣絢麗多彩的應(yīng)用 UI 界面呢?通過(guò)對(duì) android UI 已有知識(shí)的回顧和最近 harmony 應(yīng)用開(kāi)發(fā)的學(xué)習(xí)研究，我總結(jié)了一篇UI框架開(kāi)發(fā)文檔，記錄一些開(kāi)發(fā)中可能遇到的小問(wèn)題和有用的小技巧分享給大家。
常用布局
一、DirectionalLayout 布局
DirectionalLayout 布局即方向布局，該種分為兩種模式 ( vertical ) 垂直排列子元素，( horizontal ) 水平排列子元素。垂直排列子元素 height 的總和不得超過(guò)父元素否則會(huì)被截取，超過(guò)部分無(wú)法顯示。同理水平排列子元素 width 的總和如果超過(guò)父元素也會(huì)被截取。
水平排列和垂直排列通過(guò)設(shè)置 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>
如上代碼為垂直方向的三個(gè)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>
如上代碼為水平方向的三個(gè)textview布局，效果圖如下：
3、對(duì)齊方式
DirectionalLayout 中的組件使用 layout_alignment 控制自身在布局中的對(duì)齊方式，當(dāng)對(duì)齊方式與排列方式方向一致時(shí)，對(duì)齊方式不會(huì)生效具體見(jiàn)下表。
三種基本對(duì)齊方式：左對(duì)齊，右對(duì)齊，居中。分別對(duì)應(yīng) layout_alignment 屬性的
- ohos:layout_alignment=“left”
- ohos:layout_alignment=“horizontal_center”
- ohos:layout_alignment=“right”
布局展示的樣式為：
4、權(quán)重
權(quán)重( weight )就是按比例來(lái)分配組件占用父組件的大小，通過(guò) ohos:weight 屬性來(lái)定義。布局計(jì)算公式為：組件寬度=組件weight/所有組件weight之和*父布局可分配寬度;如 ohos:weight 分別設(shè)置為 ohos:weight = “1”，ohos:weight = “2”，ohos:weight = "3"的三個(gè)空間，布局則分別占父空間的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相比，擁有更多的排布方式，每個(gè)組件可以指定相對(duì)于其他同級(jí)元素的位置，或者指定相對(duì)于父組件的位置。
1、相對(duì)于同級(jí)組件的位置布局
2、相對(duì)于父組件的位置布局
DependentLayout 布局類(lèi)似于 Android 的 RelativeLayout 比較靈活，具體怎么展示和調(diào)整組件布局可自行測(cè)試。
三、TableLayout 布局
TableLayout使用表格的方式劃分子組件, 也就是行和列的方式，TableLayout可配置表格的排列方式，行數(shù)和列數(shù)，以及組件的位置。
1、行列的設(shè)置
ohos:row_count 表示設(shè)置網(wǎng)格布局中行數(shù)，ohos:column_count 表示設(shè)置網(wǎng)格布局中的列數(shù)。如果沒(méi)有為子布局設(shè)置行列數(shù)，則自動(dòng)繼承父布局的行數(shù)和列數(shù)。在網(wǎng)格布局中若子組件的數(shù)量超出列數(shù)設(shè)置，則會(huì)自動(dòng)添加行數(shù)。比如設(shè)置一行，兩列，但是是三個(gè)子組件，行數(shù)設(shè)置失效，就會(huì)自動(dòng)增加一行。如下設(shè)置三行兩列。則布局就是如下展示。
- <TableLayout
- ...
- ohos:row_count="3"
- ohos:column_count="2"
- />
2、設(shè)置對(duì)齊方式
通過(guò)屬性 ohos:alignment_type 來(lái)設(shè)置對(duì)齊方式，如下：
- <TableLayout
- ...
- ohos:alignment_type="align_contents">
- ...
- </TableLayout>
四、StackLayout
StackLayout 直接在屏幕上開(kāi)辟出一塊空白的區(qū)域，添加到這個(gè)布局中的視圖都是以層疊的方式顯示，而它會(huì)把這些視圖默認(rèn)放到這塊區(qū)域的左上角，第一個(gè)添加到布局中視圖顯示在最底層，最后一個(gè)被放在最頂層。上一層的視圖會(huì)覆蓋下一層的視圖。
- <?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>
以上代碼效果圖如下：
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
