鴻蒙應用程序開發(fā) 課件 第4章 用戶界面UI

第4章用戶界面UI引言本章學習目標理解HarmonyOS中UI組件及組件容器的基本概念熟悉常用組件，如Text、button、Image等的使用方法2熟悉常用布局，如DirectionalLayout、DependentLayout等的使用方法熟練給組件添加單擊事件監(jiān)聽回調Nuncviverraimperdietenim.Fusc014.1UI框架概述Nuncviverraimperdietenim.Fusc024.2常用組件開發(fā)Nuncviverraimperdietenim.Fusc034.3常用布局開發(fā)指導Nuncviverraimperdietenim.Fusc044.4事件監(jiān)聽器與組件狀態(tài)CONTENTS044.1.1組件和布局4應用中所有的用戶界面元素都是由組件（Component）和組件容器（ComponentContainer）構成。Component是繪制在屏幕上的一個對象，用戶能與之交互。UI框架提供了一部分Component和ComponentContainer的具體子類，即創(chuàng)建UI的各類組件，包括一些常用的組件（比如：文本、按鈕、圖片、列表等）和常用的布局。用戶可以通過組件進行交互操作，并獲得響應。所有的UI操作都應該在主線程中進行。用戶界面元素統(tǒng)稱為Component，組件可根據(jù)一定的層級結構進行組合形成布局。組件在未被添加進布局中時，既無法顯示也無法交互，因此一個用戶界面至少包含一個布局。在UI框架中，具體的布局類通常以XXLayout命名，完整的用戶界面是一個布局，用戶界面中也可以包含多個布局，布局中容納Component與ComponentContainer對象。4.1.2Component和ComponentContainer5Component：提供內容顯示，是界面中所有組件的基類，開發(fā)者可以給Component設置事件處理回調來創(chuàng)建一個可交互的組件。JavaUI框架提供了一些常用的界面元素，也可稱之為組件，組件一般直接繼承Component或它的子類，如Text、Image等。ComponentContainer：作為容器容納Component或ComponentContainer對象，并對它們進行布局。JavaUI框架提供了一些標準布局功能的容器，它們繼承自ComponentContainer，一般以“Layout”結尾，如DirectionalLayout、DependentLayout等。4.1.3組件樹6布局把Component和ComponentContainer以樹狀的層級結構進行組織，這樣的一個布局就稱為組件樹。組件樹的特點是僅有一個根組件，其他組件有且僅有一個父節(jié)點，組件之間的關系受到父節(jié)點的規(guī)則約束，如圖所示。4.1.4常用組件與布局分類7組件需要進行組合，并添加到界面的布局中。根據(jù)組件的功能，可以將組件分為布局類、顯示類、交互類三類，具體分類如表所示。組件類別組件名稱功能描述顯示類Text、Image等提供了單純的內容顯示，例如用于文本顯示的Text，用于圖像顯示的Image等。交互類TextField、Button等提供了具體場景下與用戶交互響應的功能，例如Button提供了點擊響應功能等。布局類DirectionalLayout、DirectionalLayout、StackLayout、TableLayout等提供了不同布局規(guī)范的組件容器，例如以單一方向排列的DirectionalLayout、以相對位置排列的DependentLayout等。在HarmonyOS應用開發(fā)中，UI實現(xiàn)包括JavaUI和方舟開發(fā)兩個框架，本書主要圍繞JavaUI框架闡述。在該框架中，提供了兩種編寫布局的方式：在代碼中創(chuàng)建布局：用代碼創(chuàng)建Component和ComponentContainer對象，為這些對象設置合適的布局參數(shù)和屬性值，并將Component添加到ComponentContainer中，從而創(chuàng)建出完整界面。在XML中聲明UI布局：按層級結構來描述Component和ComponentContainer的關系，給組件節(jié)點設定合適的布局參數(shù)和屬性值，可直接加載生成此布局。Nuncviverraimperdietenim.Fusc014.1UI框架概述Nuncviverraimperdietenim.Fusc024.2常用組件開發(fā)Nuncviverraimperdietenim.Fusc034.3常用布局開發(fā)指導Nuncviverraimperdietenim.Fusc044.4事件監(jiān)聽器與組件狀態(tài)CONTENTS044.2.1Text9Text是用來顯示字符串的組件，在界面上顯示為一塊文本區(qū)域。在第3章創(chuàng)建的第一個應用中，打開“entry/src/main/resources/base/layout/ability_main.xml”。內容如下：<?xmlversion="1.0"encoding="utf-8"?><DirectionalLayoutxmlns:ohos="/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Textohos:id="$+id:text_helloworld"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="$string:mainability_HelloWorld"ohos:text_size="40vp"4.2.1Text10上述代碼中創(chuàng)建“Helloworld”文本，所有代碼包含在<Text>標簽內，主要語句含義如下：ohos:id="$+id:text_helloworld"：引入文本ID。ohos:height="match_content"、ohos:width="match_content"：配置文本組件的高度和寬度與文本字體大小相匹配。ohos:layout_alignment="horizontal_center"：使文本組件在布局中水平居中。ohos:text="$string:mainability_HelloWorld"：用來配置組件顯示的文字內容。該語句中包含了$符號，$符號表示引用了其他資源，這里指引用了element、zh、en.json文件里面的內容，主要是為了處理Text組件顯示文字的國際化問題，也可以不用引用，直接把文字內容賦值上去即可，比如ohos:text="你好，HarmonyOS"。ohos:background_element="$graphic:background_ability_main"：用來配置常用的背景，如常見的文本背景、按鈕背景。上述配置引用了background_ability_main.xml文件里面的內容，該文件放置在“resource/base/graphic”目錄下。4.2.1Text11修改background_ability_main.xml文件內容如下：<?xmlversion="1.0"encoding="UTF-8"?><shapexmlns:ohos="/res/ohos"ohos:shape="rectangle"><solidohos:color="#DEDEDE"/><cornersohos:radius="20vp"/></shape>在ability_main.xml文件中，預覽一下修改后的新頁面的效果，如圖所示。background_ability_main.xml文件內容如下：<?xmlversion="1.0"encoding="UTF-8"?><shapexmlns:ohos="/res/ohos"ohos:shape="rectangle"><solidohos:color="#FFFFFF"/></shape>4.2.1Text12下面創(chuàng)建一個名為TextDemo的應用，演示改變文本組件的不同屬性如自重、字體、不同排列方式等所顯示的效果。在ability_main.xml文件中，修改其內容如下：<?xmlversion="1.0"encoding="utf-8"?><DirectionalLayout xmlns:ohos="/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical">

<Textohos:id="$+id:text_helloworld"ohos:height="match_content"ohos:width="match_content" ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="$string:mainability_HelloWorld"ohos:text_size="40vp"4.2.1Text13<Textohos:id="$+id:text_helloworld1"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="$string:mainability_HelloWorld"ohos:text_color="#FFEE0B0B"ohos:text_size="28fp"ohos:top_margin="15vp"/><Textohos:id="$+id:text_helloworld2"ohos:height="match_content"ohos:width="150vp"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="$string:mainability_HelloWorld"ohos:text_size="40vp"ohos:text_weight="700"ohos:top_margin="15vp"/>4.2.1Text14<Textohos:id="$+id:text_helloworld3"ohos:height="100vp"ohos:width="300vp"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="$string:mainability_HelloWorld"ohos:text_alignment="center"ohos:text_size="40vp"ohos:top_margin="15vp"/><Textohos:id="$+id:text_helloworld4"ohos:height="match_content"ohos:width="150vp"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:max_text_lines="2"ohos:multiple_lines="true"ohos:text="$string:mainability_HelloWorld"ohos:text_size="40vp"ohos:top_margin="15vp"/></DirectionalLayout>4.2.1Text15上述代碼中的幾個文本組件，分別設置了下面幾項信息：第二個Text組件中設置字體大小和顏色：ohos:text_color="#FFEE0B0B"：設置Text組件中字體的顏色；ohos:text_size="28fp"：設置Text組件中字體的大小。第三個Text組件中設置文本字重：ohos:text_weight="700"：設置Text組件字體的字重。第四個Text組件中設置文本排列方式：ohos:text_alignment="center"：設置文本對齊方式為居中對齊。第五個Text組件中設置文本多行顯示：ohos:multiple_lines="true"：設置Text組件支持多行顯示。ohos:max_text_lines="2"：設置Text組件最大顯示行數(shù)為2。4.2.1Text16修改MainAbilitySlice，其內容如下：publicclassMainAbilitySliceextendsAbilitySlice{@OverridepublicvoidonStart(Intentintent){super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//找到組件

Texttext_helloworld2=findComponentById(ResourceTable.Id_text_helloworld2);Texttext_helloworld3=findComponentById(ResourceTable.Id_text_helloworld3);//給text_helloworld2添加單擊事件

text_helloworld2.setClickedListener(component->{//跑馬燈效果

text_helloworld2.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);//始終處于自動滾動狀態(tài)

text_helloworld2.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);4.2.1Text17

//啟動跑馬燈效果

text_helloworld2.startAutoScrolling();});//給text_helloworld3添加單擊事件

text_helloworld3.setClickedListener(component->{//設置文本框內容

text_helloworld3.setText("文本框4被點擊了");});}@OverridepublicvoidonActive(){super.onActive();}@OverridepublicvoidonForeground(Intentintent){super.onForeground(intent);}}4.2.1Text18打開遠程模擬器，運行程序，分別單擊第三個和第四個文本組件，運行結果如圖所示。4.2.1Text19除了上例的屬性外，Text的其他常見XML屬性通過下表給出。屬性名稱中文描述取值說明使用案例text顯示文本設置文本字符串ohos:text="姓名"hint提示文本同上ohos:hint="用戶名："text_font字體serif、HwChinese-medium等ohos:text_font="serif"text_size文本大小推薦以fp為單位的浮點數(shù)值ohos:text_size="28fp"text_color文本顏色設置顏色值ohos:text_color="#DEDEDE"hint_color提示文本顏色同上同上text_alignment文本對齊方式left（左對齊）、horizontal_center（水平居中）等，也可以使用“|”進行多項組合ohos:text_alignment="left"max_text_lines文本最大行數(shù)設置整型數(shù)值ohos:max_text_lines="2"multiple_lines多行模式設置true/falseohos:multiple_lines="true"italic斜體同上ohos:italic="true"4.2.2Button20Button是一種常見的組件，點擊可以觸發(fā)相應的操作，通常由文本或圖標單獨組成，也可以由圖標和文本共同組成。常用交互類組件有Button、Textfield等，這些組件提供了具體場景下與用戶交互響應的功能。下面創(chuàng)建一個名為ButtonDemo的應用來演示在不同背景下，顯示不同樣式的按鈕。在新建的Project工程中，打開“entry/src/main/resources/base/layout/ability_main.xml”。修改內容如下：<?xmlversion="1.0"encoding="utf-8"?><DirectionalLayoutxmlns:ohos="/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical">4.2.2Button21 <Buttonohos:id="$+id:Button"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_ability_main"ohos:padding="5vp"ohos:text="按鈕"ohos:text_size="50fp"<Buttonohos:id="$+id:Button1"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_button_oval"ohos:padding="5vp"ohos:text="按鈕“ohos:text_size="50fp"ohos:top_margin="15vp"/>4.2.2Button22

<Buttonohos:id="$+id:Button2"ohos:height="match_content"ohos:width="200vp"ohos:background_element="$graphic:background_button_capsule"ohos:padding="5vp"ohos:text="按鈕"ohos:text_size="50fp"ohos:top_margin="15vp"/><Buttonohos:id="$+id:Button3"ohos:height="150vp"ohos:width="150vp"ohos:background_element="$graphic:background_button_circle"ohos:padding="5vp"ohos:text="按鈕"ohos:text_size="50fp"ohos:top_margin="20vp"/>4.2.2Button23第二個橢圓Button組件中創(chuàng)建流程如下：選中“graphic”文件，右鍵點擊。選擇“New/GraphicResourceFile”。Filename：background_button_oval；Rootelement：shape；點擊OK，如圖所示。4.2.2Button24在新建的background_button_oval文件中做如下修改：<?xmlversion="1.0"encoding="UTF-8"?><shape xmlns:ohos="/res/ohos" ohos:shape="oval"> <solidohos:color="#0aabbc"/></shape>創(chuàng)建并修改background_button_capsule.xml文件，內容如下：<?xmlversion="1.0"encoding="UTF-8"?><shape xmlns:ohos="/res/ohos" ohos:shape="rectangle"><cornersohos:radius="50vp"/><solidohos:color="#0aabbc"/></shape>4.2.2Button25創(chuàng)建并修改background_button_capsule.xml文件，內容如下：<?xmlversion="1.0"encoding="UTF-8"?><shapexmlns:ohos="/res/ohos"ohos:shape="rectangle"><cornersohos:radius="50vp"/><solidohos:color="#0aabbc"/></shape>上述代碼中：ohos:radius="50vp"：設置Button組件為為圓角。圓角弧度與賦值成正比。第四個圓形Button組件中：ohos:height="150vp"、ohos:width="150vp"：定義了Button組件的高寬相等，這是創(chuàng)建圓形按鈕所必需的條件。ohos:background_element="$graphic:background_button_circle"：引用了資源文件background_button_circle.xml。4.2.2Button26創(chuàng)建并修改background_button_circle.xml文件，內容如下：<?xmlversion="1.0"encoding="UTF-8"?><shape xmlns:ohos="/res/ohos" ohos:shape="oval"> <solidohos:color="#0aabbc"/></shape>打開遠程模擬器，運行程序，運行結果如圖所示。4.2.3Image27Image是用來顯示圖片的組件。創(chuàng)建一個名為ImageDemo的應用來演示Image組件的創(chuàng)建、設置圖片透明度、圖片縮放、裁剪圖片等。DevEcoStudio自身攜帶的圖片資源為media資源文件下的icon.png，如果需要其他圖片資源，那么需要進行下面的圖片添加操作，引入其他圖片資源。首先將圖片添加至media資源文件下，在Project窗口，打開“entry/src/main/resources/base/media”，拖動所需圖片文件添加至media文件夾下，支持多種圖片后綴，這里以“Plant.jpg”為例。如圖所示。4.2.3Image28在新建應用的Project窗口中，打開“entry/src/main/resources/base/layout/ability_main.xml”。修改內容如下：<?xmlversion="1.0"encoding="utf-8"?><DirectionalLayout xmlns:ohos="/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="top" ohos:orientation="vertical"> <Imageohos:id="$+id:Image_plant1"ohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:Plant"ohos:layout_alignment="horizontal_center"ohos:top_margin="15vp"/>4.2.3Image29<Imageohos:id="$+id:Image_plant2"ohos:height="match_content"ohos:width="match_content"ohos:alpha="0.5"ohos:image_src="$media:Plant"ohos:layout_alignment="horizontal_center"ohos:top_margin="15vp"/><Imageohos:id="$+id:Image_plant3"ohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:Plant"ohos:layout_alignment="horizontal_center"ohos:scale_x="1.5"ohos:scale_y="1.5"ohos:top_margin="30vp"/>4.2.3Image30<Imageohos:id="$+id:Image_plant4"ohos:height="150vp"ohos:width="300vp"ohos:image_src="$media:Plant"ohos:layout_alignment="horizontal_center"ohos:scale_mode="zoom_center"ohos:top_margin="60vp"/>

<Imageohos:id="$+id:Image_plant5"ohos:height="match_content"ohos:width="50vp"ohos:clip_alignment="left"ohos:image_src="$media:Plant"ohos:layout_alignment="horizontal_center"ohos:top_margin="15vp"/></DirectionalLayout>4.2.3Image31上述代碼中：創(chuàng)建了5個Image組件，分別介紹Image組件的創(chuàng)建、設置圖片透明度、設置圖片縮放系數(shù)、設置圖片縮放模式、設置圖片裁剪方式對齊。第一個Image組件中：ohos:image_src="$media:Plant"：引用了“resources/base/media”下的圖片資源Plant.jpg。ohos:height="match_content"、ohos:width="match_content"：設置Image組件的高寬，此時設置為與圖片高寬相等。第二個Image組件中設置圖片透明度：ohos:alpha="0.5"：將圖片的透明度設置為0.5，其取值范圍為：0~1。第三個Image組件中設置圖片縮放系數(shù)：ohos:scale_x="1.5"、ohos:scale_y="1.5"：將圖片X軸方向長度放大1.5倍，Y軸方向長度放大1.5倍。第四個Image組件中設置圖片縮放格式：ohos:height="150vp"、ohos:width="300vp"：設置Image組件的高為150vp，寬為300vp，此時圖片尺寸與Image組件尺寸不同，可以根據(jù)不同的縮放方式來對圖片進行縮放。ohos:scale_mode="zoom_center"：表示原圖按照比例縮放到與Image最窄邊一致，并居中顯示。4.2.3Image32打開遠程模擬器，運行程序，運行結果如圖所示。第五個Image組件中設置圖片裁剪對齊方式：ohos:height="match_content"、ohos:width="50vp"：此時，Image組件高度與圖片相同，寬度為50vp小于圖片尺寸。ohos:clip_alignment="left"：表示按左對齊裁剪。4.2.3Image33其他常用的ImageXML屬性，如表所示屬性名稱中文描述取值說明使用案例clip_alignment裁剪方式left（左對齊裁剪）、center（居中對齊裁剪）等ohos:clip_alignment="left"image_src圖像引用media中的圖片資源ohos:image_src="$media:Plant"scale_mode縮放類型zoom_center：表示原圖按照比例縮放到與Image最窄邊一致，并居中顯示。ohos:scale_mode="center"4.2.4TextField34TextField提供了一種文本輸入框。我們創(chuàng)建一個名為TextFieldDemo的應用來演示有關文本輸入組件的相關設置，其代碼應該包含在<TextField>標簽中。在TextFieldDemo應用中打開ability_main.xml文件，修改內容如下：<DirectionalLayoutxmlns:ohos="/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><TextFieldohos:id="$+id:TextField_id"ohos:height="80vp"ohos:width="match_parent"ohos:background_element="$graphic:background_ability_main"ohos:basement="#FF1E1F21"ohos:hint="用戶名："ohos:left_margin="20vp"

4.2.4TextField35

ohos:padding="10vp"ohos:right_margin="20vp"ohos:text_size="28fp"ohos:top_margin="30vp"/><TextFieldohos:id="$+id:TextField_password"ohos:height="80vp"ohos:width="match_parent"ohos:background_element="$graphic:background_ability_main"ohos:basement="#FF1E1F21"ohos:hint="密碼："ohos:left_margin="20vp"ohos:padding="10vp"ohos:right_margin="20vp"ohos:text_size="28fp"ohos:top_margin="30vp"/></DirectionalLayout>4.2.4TextField36上述代碼中：ohos:basement="#FF1E1F21"：描述TextField組件的基線，其賦值代表基線顏色。ohos:hint="用戶名："：描述TextField組件的提示文本。ohos:background_element="$graphic:background_ability_main"：引用了background_ability_main.xml文件，修改內容如下：<?xmlversion="1.0"encoding="UTF-8"?><shapexmlns:ohos="/res/ohos"ohos:shape="rectangle"><cornersohos:radius="40vp"/><solidohos:color="#DEDEDE"/></shape>4.2.4TextField37打開遠程模擬器，運行程序，運行結果如所示。4.2.5ProgressBar38ProgressBar用于顯示執(zhí)行任務的進度，本小節(jié)主要演示兩種進度條分別是：ProgressBar（直線進度條）和RoundProgressBar（圓形進度條）。創(chuàng)建一個名為ProgressBarDemo的應用來演示兩種進度條的設置。修改ability_main.xml文件，其內容如下：<ProgressBarohos:id="$+id:ProgressBar"ohos:height="match_content"ohos:width="300vp"ohos:divider_lines_enabled="true"ohos:divider_lines_number="9"ohos:layout_alignment="horizontal_center"ohos:max="100"ohos:min="0"ohos:progress="40"ohos:progress_color="#0aabbc"ohos:progress_hint_text="40%"ohos:progress_hint_text_color="black"ohos:progress_hint_text_size="28fp"ohos:progress_width="20vp"/>4.2.5ProgressBar39<RoundProgressBarohos:id="$+id:RoundProgressBar"ohos:height="300vp"ohos:width="300vp"ohos:layout_alignment="horizontal_center"ohos:max="100"ohos:min="0"ohos:progress="40"ohos:progress_color="#0aabbc"ohos:progress_hint_text="40%"ohos:progress_hint_text_color="black"ohos:progress_hint_text_size="28fp"ohos:progress_width="20vp"ohos:top_margin="30vp"/></DirectionalLayout>4.2.5ProgressBar40ProgressBar組件常用的XML屬性見下表屬性名稱中文描述取值說明使用案例divider_lines_enabled分割線設置true/falseohos:divider_lines_enabled="true"divider_lines_number分割線數(shù)量設置整型數(shù)值ohos:divider_lines_number="9"max最大值同上ohos:max="100"min最小值同上ohos:min="100"orientation排列方向horizontal（水平顯示）、vertical（垂直顯示）ohos:orientation="vertical"progress當前進度設置整型數(shù)值ohos:progress="40"progress_width進度條寬度以vp為單位的浮點數(shù)值ohos:progress_width="20vp"progress_color進度條顏色設置色值ohos:progress_color="#0aabbc"progress_hint_text進度提示文本設置文本字串ohos:progress_hint_text="40%"progress_hint_text_color進度提示文本顏色設置色值ohos:progress_hint_text_color="black"progress_hint_text_size進度提示文本大小以fp為單位的浮點數(shù)值ohos:progress_hint_text_size="28fp"Nuncviverraimperdietenim.Fusc014.1UI框架概述Nuncviverraimperdietenim.Fusc024.2常用組件開發(fā)Nuncviverraimperdietenim.Fusc034.3常用布局開發(fā)指導Nuncviverraimperdietenim.Fusc044.4事件監(jiān)聽器與組件狀態(tài)CONTENTS044.3.1DirectionalLayout42DirectionalLayout是JavaUI中的一種重要組件布局，用于將一組Component按照水平（horizontal）或者垂直（vertical）方向排布，能夠方便地對齊布局內的組件。該布局和其他布局的組合，可以實現(xiàn)更加豐富的布局樣式。如下圖所示。4.3.1DirectionalLayout43創(chuàng)建一個名為LoginPageDemo的應用來演示圖4-2所示的登錄界面。首先需要將圖片QQ.JPG放入media文件下。在LoginPageDemo應用中打開ability_main.xml文件，修改內容如下：<?xmlversion="1.0"encoding="utf-8"?><DirectionalLayoutxmlns:ohos="/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Imageohos:id="$+id:Image_icon"ohos:height="100vp"ohos:width="100vp"ohos:image_src="$media:QQ"ohos:scale_mode="zoom_center"/>4.3.1DirectionalLayout44<TextFieldohos:id="$+id:TextField_id"ohos:height="80vp"ohos:width="match_parent"ohos:background_element="$graphic:background_ability_main"ohos:basement="#FF1E1F21"ohos:hint="用戶名："ohos:left_margin="20vp"ohos:padding="10vp"ohos:right_margin="20vp"ohos:text_size="28fp"ohos:top_margin="30vp"/><TextFieldohos:id="$+id:TextField_password"ohos:height="80vp"ohos:width="match_parent“ ohos:background_element="$graphic:background_ability_main“ ohos:basement="#FF1E1F21"4.3.1DirectionalLayout45 ohos:hint="密碼："ohos:left_margin="20vp"ohos:padding="10vp"ohos:right_margin="20vp"ohos:text_size="28fp"ohos:top_margin="30vp"/><Buttonohos:id="$+id:Button_login"ohos:height="match_content"ohos:width="match_parent"ohos:background_element="$graphic:background_ability_main_button"ohos:left_margin="20vp“ ohos:padding="10vp"ohos:right_margin="20vp"ohos:text="登錄"ohos:text_size="28fp" ohos:top_margin="30vp"/>4.3.1DirectionalLayout46<DirectionalLayoutohos:height="match_content"ohos:width="match_content"ohos:orientation="horizontal"ohos:top_margin="30vp"><Textohos:id="$+id:Text_forgetPassword"ohos:height="match_content"ohos:width="match_content"ohos:text="忘記密碼"ohos:text_size="28fp"/> <Textohos:id="$+id:Text_register"ohos:height="match_content"ohos:width="match_content"ohos:left_margin="130vp"ohos:text="注冊"ohos:text_size="28fp"/>4.3.1DirectionalLayout47</DirectionalLayout><DirectionalLayout ohos:height="match_content“ ohos:width="match_content“ ohos:orientation="horizontal"><Textohos:height="match_content"ohos:width="135vp"ohos:background_element="$graphic:background_ability_main_line"/>4.3.1DirectionalLayout48 <Textohos:height="match_content"ohos:width="70vp"ohos:background_element="$graphic:background_ability_main_line"ohos:left_margin="110vp"/></DirectionalLayout></DirectionalLayout>上述代碼中采用了DirectionalLayout布局，描述了一個登錄頁面，其中：對DirectionalLayout布局進行了嵌套使用，在父布局中使用了ohos:orientation="vertical"語句，描述了父布局中子布局、組件的排列方式為垂直方向排列。ohos:alignment="center"語句描述了父布局中子布局、組件對齊方式統(tǒng)一為居中對齊。在子布局中使用了ohos:orientation="horizontal"語句，描述了子布局中組件排列方式為水平方向排列。4.3.1DirectionalLayout49讀者可以根據(jù)自己的喜好，修改代碼，重新設置登錄界面的樣式和布局。下面介紹DirectionalLayout常用的XML屬性及所包含組件常用的XML屬性。如下表所示。屬性名稱中文描述取值說明使用案例alignment對齊方式left（左對齊）、top（頂部對齊）、center（居中對齊）等，也可以使用“|”進行多項組合。ohos:alignment="left"orientation子布局排列方向horizontal：表示水平方向布局。vertical：表示垂直方向布局。ohos:orientation="vertical"屬性名稱中文描述取值說明使用案例layout_alignment對齊方式center（居中對齊）等，也可以使用“|”進行多項組合。ohos:layout_alignment="center"DirectionalLayout常用的XML屬性DirectionalLayout所包含組件常用的XML屬性4.3.2DependentLayout50DependentLayout是JavaUl系統(tǒng)里的一種常見布局。與DirectionalLayout相比，DependentLayout擁有更多的排布方式，每個組件可以指定相對于其他同級元素的位置，或者指定相對于父組件的位置。DependentLayout效果如圖所示。4.3.2DependentLayout51創(chuàng)建一個名為DenpendentLayoutDemo的應用來演示，最終顯示效果如圖所示，實現(xiàn)過程如下。4.3.2DependentLayout52打開DenpendentLayoutDemo應用中ability_main.xml文件。修改內容如下：<?xmlversion="1.0"encoding="utf-8"?><DependentLayoutxmlns:ohos="/res/ohos"ohos:height="match_content"ohos:width="match_parent"><Textohos:id="$+id:Text1"ohos:height="match_content"ohos:width="match_parent"ohos:background_element="#DEDEDE"ohos:left_margin="15vp"ohos:padding="5vp"ohos:right_margin="15vp"ohos:text="標題"ohos:text_alignment="horizontal_center"ohos:text_size="28fp"ohos:top_margin="15vp"

<Textohos:id="$+id:Text2"ohos:height="120vp"ohos:width="match_content"ohos:align_parent_left="true"ohos:background_element="#DEDEDE"ohos:below="$id:Text1"ohos:bottom_margin="15vp"ohos:left_margin="15vp"ohos:multiple_lines="true"ohos:padding="5vp"ohos:right_margin="15vp"ohos:text="目錄"ohos:text_alignment="center"ohos:text_size="15fp"ohos:top_margin="15vp"/>4.3.2DependentLayout53<Textohos:id="$+id:Text3"ohos:height="120vp"ohos:width="match_parent"ohos:background_element="#DEDEDE"ohos:below="$id:Text1"ohos:bottom_margin="15vp"ohos:end_of="$id:Text2"ohos:right_margin="15vp"ohos:text="內容"ohos:text_alignment="center"ohos:text_size="28fp"ohos:top_margin="15vp"/>

4.3.2DependentLayout54<Buttonohos:id="$+id:Button2"ohos:height="match_content"ohos:width="70vp"ohos:align_parent_end="true"ohos:background_element="#DEDEDE"ohos:below="$id:Text3"ohos:bottom_margin="15vp"ohos:padding="5vp"ohos:right_margin="15vp"ohos:text="下一步"ohos:text_size="15fp"/></DependentLayout>

4.3.2DependentLayout55上述代碼中：“目錄”文本組件中ohos:align_parent_left=“true”、ohos:below=“$id:Text1”：確定其位置在“標題”文本組件的左下方。同理，在“內容”文本組件中ohos:below=“$id:Text1”：確定其在“標題”文本框下方。屬性名稱中文描述取值說明使用案例alignment對齊方式left（左對齊）、top（頂部對齊）、center（居中對齊）等，也可以使用“|”進行多項組合。ohos:alignment="left"屬性名稱中文描述取值說明使用案例below將上邊緣與另一個子組件的下邊緣對齊僅可引用組件的idohos:below="$id:Text1"left_of將右邊緣與另一個子組件的左邊緣對齊同上ohos:left_of="$id:Button2"align_parent_left將左邊緣與父組件的左邊緣對齊true/falseohos:align_parent_left="true"align_parent_end將結束邊與父組件的結束邊對齊同上ohos:align_parent_end="true"DependentLayout的自有XML屬性DependentLayout所包含組件可支持的XML屬性4.3.3StackLayout56StackLayout直接在屏幕中開辟出一塊空白的區(qū)域，在這塊區(qū)域中的組件是以層疊的形式顯示，默認情況下，會將所有組件靠左上角對齊，先添加的組件位于底層，后添加的組件位于上一層，這樣的結構類似一個棧結構，所以StackLayout也叫棧布局。上層的組件會覆蓋下層的組件。其示意圖如圖所示。4.3.3StackLayout57在StackLayout中組件是一層層堆疊的，其沒有自有的XML屬性，共有的XML屬性繼承自Component。它所包含的組件支持的XML屬性為對齊方式。常見用法如表所示。創(chuàng)建一個名為OtherLayout的應用來演示。在此應用中的layout文件下，繼續(xù)新建一個名為ability_stacklayout的Layout資源文件。點擊OK，創(chuàng)建完成。如下圖所示。屬性名稱中文描述取值說明使用案例layout_alignment對齊方式left（左對齊）、top（頂部對齊）、center（居中對齊），也可以使用“|”進行多項組合。ohos:layout_alignment="left"4.3.3StackLayout58修改ability_stacklayout.xml文件，其內容如下：<?xmlversion="1.0"encoding="utf-8"?><StackLayoutxmlns:ohos="/res/ohos"ohos:height="match_parent"ohos:width="match_parent">

<Textohos:id="$+id:Text1"ohos:height="360vp"ohos:width="360vp"ohos:background_element="red"ohos:layout_alignment="right"ohos:text="red"ohos:text_alignment="left|bottom"ohos:text_size="28fp"/>4.3.3StackLayout59

<Textohos:id="$+id:Text2"ohos:height="240vp"ohos:width="240vp"ohos:background_element="yellow"ohos:layout_alignment="right"ohos:text="yellow"ohos:text_alignment="left|bottom"ohos:text_size="28fp"/>

<Textohos:id="$+id:Text3"ohos:height="120vp"ohos:width="120vp"ohos:background_element="green"ohos:layout_alignment="right"ohos:text="green"ohos:text_alignment="left|bottom"ohos:text_size="28fp"/></StackLayout>4.3.3StackLayout60打開預覽器，運行結果如圖所示4.3.4TableLayout61TableLayout為表格布局，其內部可指定劃分成若干行和列，布局中的組件都被按照排列方向依次放置在各個單元格中。TableLayout示意圖如圖所示。4.3.4TableLayout62<?xmlversion="1.0"encoding="utf-8"?><TableLayout