当前位置：主页 > 查看内容

鸿蒙单一方向布局实现音乐播放UI

发布时间：2021-07-30 00:00| 有 位朋友查看

简介：想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://harmonyos.51cto.com/#zz 本小节我们将使用DirectionalLayout（单一方向排列布局，我们也可以将其称为线性布局）来实现下面UI图的示例。 UI图拆解 一般我们从UI工程师手里拿到U……

想了解更多内容，请访问：

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


本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Linux系统多网卡环境下的路由配置 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐