[[352672]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos.51cto.com/#zz

本小節(jié)我們將使用DirectionalLayout（單一方向排列布局，我們也可以將其稱為線性布局）來實現(xiàn)下面UI圖的示例。

UI圖拆解

一般我們從UI工程師手里拿到UI界面設計圖后，上面有很多尺寸標記等屬性。在我們學習了所有布局和組件后，我們完全可以使用一個或者多個布局和組件組合在一起，實現(xiàn)復雜的界面效果。

上面我自己手動拖拽了一個音樂播放界面，沒有標注各個屬性值，僅用于學習DirectionalLayout布局的使用，不要在意它的美觀。

首先我們拿到后，根據上面的標注信息以及組件功能要點等一系列參數(shù)，將整個UI界面圖根據布局劃分多個模塊進行父布局占位，然后再根據劃分的布局來編寫具體的子組件信息。

我根據用戶的交互性將整個頁面以上下結構劃分為兩部分，上部分為展示型、下部分為控件型。在底部控件區(qū)域，是一系列操作按鈕，它們在一個布局中，居中排列。

在上部分的展示區(qū)域，我又根據控件類型將區(qū)域以左右結構劃分為兩個部分，左區(qū)域顯示歌曲作者頭像，右側區(qū)域顯示歌曲信息。

在右側歌曲信息區(qū)域又劃分為上下兩個區(qū)域，上區(qū)域用于展示歌曲名稱及作詞作曲主唱信息，下區(qū)域顯示歌詞內容。

布局占位

在上面我們已經通過不同的功能，不同的特性將整個UI圖拆解成多個部分，現(xiàn)在我們將使用DirectionalLayout布局來進行具體布局占位。

① 首先，我們將整個布局根據權重分為上下兩個區(qū)域，上區(qū)域占4份，下區(qū)域占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:background_element="#5c6d71" 
                   ohos:orientation="vertical"> 
    <DirectionalLayout 
            ohos:id="$+id:topLayout" 
            ohos:width="match_parent" 
            ohos:height="0vp" 
            ohos:weight="4"> 
        <Text 
            ohos:width="match_parent" 
            ohos:height="match_parent" 
            ohos:text="上"/> 
    </DirectionalLayout> 
 
    <DirectionalLayout 
            ohos:id="$+id:centerLayout" 
            ohos:width="match_parent" 
            ohos:height="0vp" 
            ohos:background_element="#009688" 
            ohos:weight="1"> 
        <Text 
                ohos:width="match_parent" 
                ohos:height="match_parent" 
                ohos:text="下"/> 
    </DirectionalLayout> 
</DirectionalLayout> 

② 接下來我們來進行上區(qū)域的左右占位。

<?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:background_element="#5c6d71" 
                   ohos:orientation="vertical"> 
    <DirectionalLayout 
            ohos:id="$+id:topLayout" 
            ohos:width="match_parent" 
            ohos:height="0vp" 
            ohos:weight="4" 
            ohos:orientation="horizontal"> 
        <DirectionalLayout 
                ohos:id="$+id:leftLayout" 
                ohos:width="0vp" 
                ohos:height="match_parent" 
                ohos:weight="1"> 
            <Text 
                    ohos:width="match_parent" 
                    ohos:height="match_parent" 
                    ohos:background_element="#0097A7" 
                    ohos:text="左"/> 
        </DirectionalLayout> 
        <DirectionalLayout 
                ohos:id="$+id:rightLayout" 
                ohos:width="0vp" 
                ohos:height="match_parent" 
                ohos:weight="1"> 
            <Text 
                    ohos:width="match_parent" 
                    ohos:height="match_parent" 
                    ohos:background_element="#03A9F4" 
                    ohos:text="右"/> 
        </DirectionalLayout> 
    </DirectionalLayout> 
 
    <DirectionalLayout 
            ohos:id="$+id:centerLayout" 
            ohos:width="match_parent" 
            ohos:height="0vp" 
            ohos:background_element="#009688" 
            ohos:weight="1"> 
        <Text 
                ohos:width="match_parent" 
                ohos:height="match_parent" 
                ohos:text="下"/> 
    </DirectionalLayout> 
</DirectionalLayout> 

 ③ 上區(qū)域的左右布局占位我們已經完成，接下來就是上區(qū)域的右側歌詞區(qū)域占位，是上下區(qū)域占位。

<?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:background_element="#5c6d71" 
                   ohos:orientation="vertical"> 
    <DirectionalLayout 
            ohos:id="$+id:topLayout" 
            ohos:width="match_parent" 
            ohos:height="0vp" 
            ohos:weight="4" 
            ohos:orientation="horizontal"> 
        <DirectionalLayout 
                ohos:id="$+id:leftLayout" 
                ohos:width="0vp" 
                ohos:height="match_parent" 
                ohos:weight="1"> 
            <Text 
                    ohos:width="match_parent" 
                    ohos:height="match_parent" 
                    ohos:background_element="#0097A7" 
                    ohos:text="左"/> 
        </DirectionalLayout> 
        <DirectionalLayout 
                ohos:id="$+id:rightLayout" 
                ohos:width="0vp" 
                ohos:height="match_parent" 
                ohos:weight="1" 
                ohos:orientation="vertical"> 
            <DirectionalLayout 
                    ohos:id="$+id:rightTopLayout" 
                    ohos:width="match_parent" 
                    ohos:height="0vp" 
                    ohos:weight="1"> 
                <Text 
                        ohos:width="match_parent" 
                        ohos:height="match_parent" 
                        ohos:background_element="#00796B" 
                        ohos:text="上"/> 
            </DirectionalLayout> 
            <DirectionalLayout 
                    ohos:id="$+id:rightBottomLayout" 
                    ohos:width="match_parent" 
                    ohos:height="0vp" 
                    ohos:weight="4"> 
                <Text 
                        ohos:width="match_parent" 
                        ohos:height="match_parent" 
                        ohos:background_element="#00BCD4" 
                        ohos:text="下"/> 
            </DirectionalLayout> 
        </DirectionalLayout> 
    </DirectionalLayout> 
 
    <DirectionalLayout 
            ohos:id="$+id:centerLayout" 
            ohos:width="match_parent" 
            ohos:height="0vp" 
            ohos:background_element="#009688" 
            ohos:weight="1"> 
        <Text 
                ohos:width="match_parent" 
                ohos:height="match_parent" 
                ohos:text="下"/> 
    </DirectionalLayout> 
</DirectionalLayout> 

 以上便是我們將拆解的UI圖進行代碼布局占位，接下來我們將根據各個區(qū)域的實際顯示的控件進行完善界面。

定義組件實現(xiàn)UI圖

我們先從上下左右的順序開始編寫組件，我們可以看到原圖中左側是一個圓形的圖片，用于展示歌曲作者頭像。用于顯示圖像的組件是Image，會在后續(xù)的章節(jié)中詳細講解。之前我們是使用DirectionalLayout和Text進行占位時，為了明顯期間我們代碼寫的比較啰嗦，在實際的業(yè)務中，我們盡可能使用最優(yōu)寫法。

<DirectionalLayout 
          ohos:id="$+id:topLayout" 
          ohos:width="match_parent" 
          ohos:height="0vp" 
          ohos:weight="4" 
          ohos:orientation="horizontal"> 
      <Image 
              ohos:id="$+id:leftLayout" 
              ohos:width="0vp" 
              ohos:height="match_parent" 
              ohos:weight="1" 
              ohos:image_src="$media:changpian"></Image> 
      <DirectionalLayout 
              ohos:id="$+id:rightLayout" 
              ohos:width="0vp" 
              ohos:height="match_parent" 
              ohos:weight="1" 
              ohos:orientation="vertical"> 
          <DirectionalLayout 
                  ohos:id="$+id:rightTopLayout" 
                  ohos:width="match_parent" 
                  ohos:height="0vp" 
                  ohos:weight="1"> 
              <Text 
                      ohos:width="match_parent" 
                      ohos:height="match_parent" 
                      ohos:background_element="#00796B" 
                      ohos:text="上"/> 
          </DirectionalLayout> 
          <DirectionalLayout 
                  ohos:id="$+id:rightBottomLayout" 
                  ohos:width="match_parent" 
                  ohos:height="0vp" 
                  ohos:weight="4"> 
              <Text 
                      ohos:width="match_parent" 
                      ohos:height="match_parent" 
                      ohos:background_element="#00BCD4" 
                      ohos:text="下"/> 
          </DirectionalLayout> 
      </DirectionalLayout> 
  </DirectionalLayout> 

討論

為什么高度已經設置成match_parent，圖片還是顯示一半呢?是必須為114px才行嗎?歡迎討論!!!

接下來我們將實現(xiàn)右側的歌詞信息布局中的組件。

 上布局區(qū)域我們把組件都給填充好了，接下來我們將填充下布局區(qū)域的組件。在上邊文字顯示我們目前是以靜態(tài)方式給定的，所以創(chuàng)建了多個Text組件。 

<DirectionalLayout 
           ohos:id="$+id:centerLayout" 
           ohos:width="match_parent" 
           ohos:height="0vp" 
           ohos:weight="1" 
           ohos:alignment="center" 
           ohos:left_margin="200vp" 
           ohos:right_margin="200vp" 
           ohos:orientation="horizontal"> 
       <Image 
               ohos:width="match_content" 
               ohos:height="match_content" 
               ohos:weight="1" 
               ohos:image_src="$media:pinghengqi"/> 
       <Image 
               ohos:width="match_content" 
               ohos:height="match_content" 
               ohos:weight="1" 
               ohos:image_src="$media:kuaitui"/> 
       <Image 
               ohos:width="match_content" 
               ohos:height="match_content" 
               ohos:weight="1" 
               ohos:image_src="$media:bofang"/> 
       <Image 
               ohos:width="match_content" 
               ohos:height="match_content" 
               ohos:weight="1" 
               ohos:image_src="$media:kuaijin"/> 
       <Image 
               ohos:width="match_content" 
               ohos:height="match_content" 
               ohos:weight="1" 
               ohos:image_src="$media:shengyin"/> 
       <Image 
               ohos:width="match_content" 
               ohos:height="match_content" 
               ohos:weight="1" 
               ohos:image_src="$media:liebiao"/> 
   </DirectionalLayout> 

 我們啟動TV模擬器，運行查看是否和我們剛開始的UI圖相似(一些尺寸上的差異暫時忽略不計)。

為何圖片顯示一半?

我們在media中存入的圖片應該在32-bit color以下，才能全部渲染。

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos.51cto.com/#zz