自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

鴻蒙單一方向布局實(shí)現(xiàn)音樂(lè)播放UI

作者：佚名
系統(tǒng)
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com/#zz

[[352672]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

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

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

 

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

UI圖拆解

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

上面我自己手動(dòng)拖拽了一個(gè)音樂(lè)播放界面，沒(méi)有標(biāo)注各個(gè)屬性值，僅用于學(xué)習(xí)DirectionalLayout布局的使用，不要在意它的美觀。

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

我根據(jù)用戶的交互性將整個(gè)頁(yè)面以上下結(jié)構(gòu)劃分為兩部分，上部分為展示型、下部分為控件型。在底部控件區(qū)域，是一系列操作按鈕，它們?cè)谝粋€(gè)布局中，居中排列。

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

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

布局占位

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

① 首先，我們將整個(gè)布局根據(jù)權(quán)重分為上下兩個(gè)區(qū)域，上區(qū)域占4份，下區(qū)域占1份。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.                    ohos:width="match_parent" 
  4.                    ohos:height="match_parent" 
  5.                    ohos:background_element="#5c6d71" 
  6.                    ohos:orientation="vertical"> 
  7.     <DirectionalLayout 
  8.             ohos:id="$+id:topLayout" 
  9.             ohos:width="match_parent" 
  10.             ohos:height="0vp" 
  11.             ohos:weight="4"> 
  12.         <Text 
  13.             ohos:width="match_parent" 
  14.             ohos:height="match_parent" 
  15.             ohos:text="上"/> 
  16.     </DirectionalLayout> 
  17.  
  18.     <DirectionalLayout 
  19.             ohos:id="$+id:centerLayout" 
  20.             ohos:width="match_parent" 
  21.             ohos:height="0vp" 
  22.             ohos:background_element="#009688" 
  23.             ohos:weight="1"> 
  24.         <Text 
  25.                 ohos:width="match_parent" 
  26.                 ohos:height="match_parent" 
  27.                 ohos:text="下"/> 
  28.     </DirectionalLayout> 
  29. </DirectionalLayout> 

 

② 接下來(lái)我們來(lái)進(jìn)行上區(qū)域的左右占位。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.                    ohos:width="match_parent" 
  4.                    ohos:height="match_parent" 
  5.                    ohos:background_element="#5c6d71" 
  6.                    ohos:orientation="vertical"> 
  7.     <DirectionalLayout 
  8.             ohos:id="$+id:topLayout" 
  9.             ohos:width="match_parent" 
  10.             ohos:height="0vp" 
  11.             ohos:weight="4" 
  12.             ohos:orientation="horizontal"> 
  13.         <DirectionalLayout 
  14.                 ohos:id="$+id:leftLayout" 
  15.                 ohos:width="0vp" 
  16.                 ohos:height="match_parent" 
  17.                 ohos:weight="1"> 
  18.             <Text 
  19.                     ohos:width="match_parent" 
  20.                     ohos:height="match_parent" 
  21.                     ohos:background_element="#0097A7" 
  22.                     ohos:text="左"/> 
  23.         </DirectionalLayout> 
  24.         <DirectionalLayout 
  25.                 ohos:id="$+id:rightLayout" 
  26.                 ohos:width="0vp" 
  27.                 ohos:height="match_parent" 
  28.                 ohos:weight="1"> 
  29.             <Text 
  30.                     ohos:width="match_parent" 
  31.                     ohos:height="match_parent" 
  32.                     ohos:background_element="#03A9F4" 
  33.                     ohos:text="右"/> 
  34.         </DirectionalLayout> 
  35.     </DirectionalLayout> 
  36.  
  37.     <DirectionalLayout 
  38.             ohos:id="$+id:centerLayout" 
  39.             ohos:width="match_parent" 
  40.             ohos:height="0vp" 
  41.             ohos:background_element="#009688" 
  42.             ohos:weight="1"> 
  43.         <Text 
  44.                 ohos:width="match_parent" 
  45.                 ohos:height="match_parent" 
  46.                 ohos:text="下"/> 
  47.     </DirectionalLayout> 
  48. </DirectionalLayout> 

 

 ③ 上區(qū)域的左右布局占位我們已經(jīng)完成，接下來(lái)就是上區(qū)域的右側(cè)歌詞區(qū)域占位，是上下區(qū)域占位。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.                    ohos:width="match_parent" 
  4.                    ohos:height="match_parent" 
  5.                    ohos:background_element="#5c6d71" 
  6.                    ohos:orientation="vertical"> 
  7.     <DirectionalLayout 
  8.             ohos:id="$+id:topLayout" 
  9.             ohos:width="match_parent" 
  10.             ohos:height="0vp" 
  11.             ohos:weight="4" 
  12.             ohos:orientation="horizontal"> 
  13.         <DirectionalLayout 
  14.                 ohos:id="$+id:leftLayout" 
  15.                 ohos:width="0vp" 
  16.                 ohos:height="match_parent" 
  17.                 ohos:weight="1"> 
  18.             <Text 
  19.                     ohos:width="match_parent" 
  20.                     ohos:height="match_parent" 
  21.                     ohos:background_element="#0097A7" 
  22.                     ohos:text="左"/> 
  23.         </DirectionalLayout> 
  24.         <DirectionalLayout 
  25.                 ohos:id="$+id:rightLayout" 
  26.                 ohos:width="0vp" 
  27.                 ohos:height="match_parent" 
  28.                 ohos:weight="1" 
  29.                 ohos:orientation="vertical"> 
  30.             <DirectionalLayout 
  31.                     ohos:id="$+id:rightTopLayout" 
  32.                     ohos:width="match_parent" 
  33.                     ohos:height="0vp" 
  34.                     ohos:weight="1"> 
  35.                 <Text 
  36.                         ohos:width="match_parent" 
  37.                         ohos:height="match_parent" 
  38.                         ohos:background_element="#00796B" 
  39.                         ohos:text="上"/> 
  40.             </DirectionalLayout> 
  41.             <DirectionalLayout 
  42.                     ohos:id="$+id:rightBottomLayout" 
  43.                     ohos:width="match_parent" 
  44.                     ohos:height="0vp" 
  45.                     ohos:weight="4"> 
  46.                 <Text 
  47.                         ohos:width="match_parent" 
  48.                         ohos:height="match_parent" 
  49.                         ohos:background_element="#00BCD4" 
  50.                         ohos:text="下"/> 
  51.             </DirectionalLayout> 
  52.         </DirectionalLayout> 
  53.     </DirectionalLayout> 
  54.  
  55.     <DirectionalLayout 
  56.             ohos:id="$+id:centerLayout" 
  57.             ohos:width="match_parent" 
  58.             ohos:height="0vp" 
  59.             ohos:background_element="#009688" 
  60.             ohos:weight="1"> 
  61.         <Text 
  62.                 ohos:width="match_parent" 
  63.                 ohos:height="match_parent" 
  64.                 ohos:text="下"/> 
  65.     </DirectionalLayout> 
  66. </DirectionalLayout> 

 

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

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

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

  1. <DirectionalLayout 
  2.           ohos:id="$+id:topLayout" 
  3.           ohos:width="match_parent" 
  4.           ohos:height="0vp" 
  5.           ohos:weight="4" 
  6.           ohos:orientation="horizontal"> 
  7.       <Image 
  8.               ohos:id="$+id:leftLayout" 
  9.               ohos:width="0vp" 
  10.               ohos:height="match_parent" 
  11.               ohos:weight="1" 
  12.               ohos:image_src="$media:changpian"></Image> 
  13.       <DirectionalLayout 
  14.               ohos:id="$+id:rightLayout" 
  15.               ohos:width="0vp" 
  16.               ohos:height="match_parent" 
  17.               ohos:weight="1" 
  18.               ohos:orientation="vertical"> 
  19.           <DirectionalLayout 
  20.                   ohos:id="$+id:rightTopLayout" 
  21.                   ohos:width="match_parent" 
  22.                   ohos:height="0vp" 
  23.                   ohos:weight="1"> 
  24.               <Text 
  25.                       ohos:width="match_parent" 
  26.                       ohos:height="match_parent" 
  27.                       ohos:background_element="#00796B" 
  28.                       ohos:text="上"/> 
  29.           </DirectionalLayout> 
  30.           <DirectionalLayout 
  31.                   ohos:id="$+id:rightBottomLayout" 
  32.                   ohos:width="match_parent" 
  33.                   ohos:height="0vp" 
  34.                   ohos:weight="4"> 
  35.               <Text 
  36.                       ohos:width="match_parent" 
  37.                       ohos:height="match_parent" 
  38.                       ohos:background_element="#00BCD4" 
  39.                       ohos:text="下"/> 
  40.           </DirectionalLayout> 
  41.       </DirectionalLayout> 
  42.   </DirectionalLayout> 

 

討論

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

接下來(lái)我們將實(shí)現(xiàn)右側(cè)的歌詞信息布局中的組件。

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

  1. <DirectionalLayout 
  2.            ohos:id="$+id:centerLayout" 
  3.            ohos:width="match_parent" 
  4.            ohos:height="0vp" 
  5.            ohos:weight="1" 
  6.            ohos:alignment="center" 
  7.            ohos:left_margin="200vp" 
  8.            ohos:right_margin="200vp" 
  9.            ohos:orientation="horizontal"> 
  10.        <Image 
  11.                ohos:width="match_content" 
  12.                ohos:height="match_content" 
  13.                ohos:weight="1" 
  14.                ohos:image_src="$media:pinghengqi"/> 
  15.        <Image 
  16.                ohos:width="match_content" 
  17.                ohos:height="match_content" 
  18.                ohos:weight="1" 
  19.                ohos:image_src="$media:kuaitui"/> 
  20.        <Image 
  21.                ohos:width="match_content" 
  22.                ohos:height="match_content" 
  23.                ohos:weight="1" 
  24.                ohos:image_src="$media:bofang"/> 
  25.        <Image 
  26.                ohos:width="match_content" 
  27.                ohos:height="match_content" 
  28.                ohos:weight="1" 
  29.                ohos:image_src="$media:kuaijin"/> 
  30.        <Image 
  31.                ohos:width="match_content" 
  32.                ohos:height="match_content" 
  33.                ohos:weight="1" 
  34.                ohos:image_src="$media:shengyin"/> 
  35.        <Image 
  36.                ohos:width="match_content" 
  37.                ohos:height="match_content" 
  38.                ohos:weight="1" 
  39.                ohos:image_src="$media:liebiao"/> 
  40.    </DirectionalLayout> 

 我們啟動(dòng)TV模擬器，運(yùn)行查看是否和我們剛開(kāi)始的UI圖相似(一些尺寸上的差異暫時(shí)忽略不計(jì))。


為何圖片顯示一半?

我們?cè)趍edia中存入的圖片應(yīng)該在32-bit color以下，才能全部渲染。

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

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

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

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙
相關(guān)推薦

2010-12-01 12:48:43

TechEd 2010

2023-05-25 11:13:03

CIOIT價(jià)值

2012-12-06 16:11:21

云海大數(shù)據(jù)一體機(jī)

2020-05-08 10:20:35

人工智能神經(jīng)網(wǎng)絡(luò)技術(shù)

2021-08-12 15:01:09

鴻蒙HarmonyOS應(yīng)用

2011-05-18 15:50:26

UI設(shè)計(jì)iPhoneiOS

2024-03-08 15:38:40

2020-11-17 11:48:44

HarmonyOS

2018-08-10 09:00:47

全閃存陣列存儲(chǔ)

2020-11-25 12:02:02

TableLayout

2010-05-13 09:56:58

統(tǒng)一通信領(lǐng)域

2011-05-05 10:43:35

W1100W12001080p

2009-11-18 09:50:54

專家解讀上網(wǎng)行為管理發(fā)展

2018-12-13 11:25:28

互聯(lián)網(wǎng)

2013-05-21 13:33:02

Android游戲開(kāi)發(fā)異步音樂(lè)播放

2020-11-30 14:09:17

HarmonyOS

2013-07-22 10:28:00

大數(shù)據(jù)谷歌亞馬遜

2011-06-27 11:23:21

Qt 音樂(lè)播放器

2021-01-20 13:50:36

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)