成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

鴻蒙單一方向布局實現音樂播放UI

作者：佚名
系統
文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com/#zz

[[352672]]

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

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

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

 

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

UI圖拆解

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

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

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

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

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

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

布局占位

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

① 首先，我們將整個布局根據權重分為上下兩個區域，上區域占4份，下區域占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> 

 

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

  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> 

 

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

  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圖進行代碼布局占位，接下來我們將根據各個區域的實際顯示的控件進行完善界面。

定義組件實現UI圖

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

  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> 

 

討論

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

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

 上布局區域我們把組件都給填充好了，接下來我們將填充下布局區域的組件。在上邊文字顯示我們目前是以靜態方式給定的，所以創建了多個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> 

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


為何圖片顯示一半?

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

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

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

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

 

責任編輯：jianghua 來源： 鴻蒙社區
鴻蒙
相關推薦

2010-12-01 12:48:43

TechEd 2010

2023-05-25 11:13:03

CIOIT價值

2012-12-06 16:11:21

云海大數據一體機

2020-05-08 10:20:35

人工智能神經網絡技術

2021-08-12 15:01:09

鴻蒙HarmonyOS應用

2011-05-18 15:50:26

UI設計iPhoneiOS

2024-03-08 15:38:40

2020-11-17 11:48:44

HarmonyOS

2018-08-10 09:00:47

全閃存陣列存儲

2020-11-25 12:02:02

TableLayout

2010-05-13 09:56:58

統一通信領域

2011-05-05 10:43:35

W1100W12001080p

2009-11-18 09:50:54

專家解讀上網行為管理發展

2018-12-13 11:25:28

互聯網

2020-11-30 14:09:17

HarmonyOS

2013-07-22 10:28:00

大數據谷歌亞馬遜

2013-05-21 13:33:02

Android游戲開發異步音樂播放

2014-06-18 10:40:51

2011-06-27 11:23:21

Qt 音樂播放器
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： av天天操| 欧美一级黄色免费看 | 福利一区在线观看 | 久久久国产精品网站 | 国产在线视频一区 | 孰女乱色一区二区三区 | 久久久成人精品 | 亚洲欧美精品在线观看 | 久久精品国产99国产精品亚洲 | 久久久妇女国产精品影视 | 久久久久久久91 | 亚洲欧美日韩在线 | 亚洲精品一区二区二区 | 午夜看电影在线观看 | 久久久久国色av免费观看性色 | 欧美日韩成人 | 成人在线观看免费视频 | 国产aa| 丝袜美腿一区二区三区 | 黄网站在线播放 | 97久久久 | 最新日韩在线视频 | 欧美一级免费片 | 夜夜操天天操 | 久久久精选 | 91视频官网 | 秋霞国产 | 日韩精品一区二区三区视频播放 | 91精品国产91久久久久久最新 | 亚洲网在线| 91色啪 | 亚洲在线视频 | 久久精品国产一区二区 | 在线免费看黄 | 91久久精品一区二区二区 | 成人在线精品视频 | 日韩国产中文字幕 | 天天插天天搞 | 中文字幕电影在线观看 | 懂色中文一区二区三区在线视频 | 成人二区三区 |