鴻蒙OS DirectionalLayout

2020-09-18 11:55 更新

DirectionalLayout 是 Java UI 中的一種重要組件布局，用于將一組組件(Component)按照水平或者垂直方向排布，能夠方便地對齊布局內(nèi)的組件。該布局和其他布局的組合，可以實現(xiàn)更加豐富的布局方式。

圖1 DirectionalLayout 示意圖 img

排列方式

DirectionalLayout 的排列方向（orientation）分為水平（horizontal）或者垂直（vertical）方向。使用 orientation 設(shè)置布局內(nèi)組件的排列方式，默認(rèn)為垂直排列。

  • 垂直排列

垂直方向排列三個按鈕，效果如下：

圖2 三個垂直排列的按鈕 img

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <DirectionalLayout
  3.       xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.       ohos:width="match_parent"
  5.       ohos:height="match_content"
  6.       ohos:orientation="vertical">
  7.       <Button
  8.           ohos:width="33vp"
  9.           ohos:height="20vp"
  10.           ohos:bottom_margin="3vp"
  11.           ohos:left_margin="13vp"
  12.           ohos:background_element="$graphic:color_cyan_element"
  13.           ohos:text="Button 1"/>
  14.       <Button
  15.           ohos:width="33vp"
  16.           ohos:height="20vp"
  17.           ohos:bottom_margin="3vp"
  18.           ohos:left_margin="13vp"
  19.           ohos:background_element="$graphic:color_cyan_element"
  20.           ohos:text="Button 2"/>
  21.       <Button
  22.           ohos:width="33vp"
  23.           ohos:height="20vp"
  24.           ohos:bottom_margin="3vp"
  25.           ohos:left_margin="13vp"
  26.           ohos:background_element="$graphic:color_cyan_element"
  27.           ohos:text="Button 3"/>
  28.   </DirectionalLayout>

color_cyan_element.xml：

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.       ohos:shape="rectangle">
  4.       <solid
  5.           ohos:color="#ff00ffff"/>
  6.   </shape>

  • 水平排列

水平方向排列三個按鈕，效果如下：

圖3 三個水平排列的按鈕 img

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <DirectionalLayout
  3.       xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.       ohos:width="match_parent"
  5.       ohos:height="match_content"
  6.       ohos:orientation="horizontal">
  7.       <Button
  8.           ohos:width="33vp"
  9.           ohos:height="20vp"
  10.           ohos:left_margin="13vp"
  11.           ohos:background_element="$graphic:color_cyan_element"
  12.           ohos:text="Button 1"/>
  13.       <Button
  14.           ohos:width="33vp"
  15.           ohos:height="20vp"
  16.           ohos:left_margin="13vp"
  17.           ohos:background_element="$graphic:color_cyan_element"
  18.           ohos:text="Button 2"/>
  19.       <Button
  20.           ohos:width="33vp"
  21.           ohos:height="20vp"
  22.           ohos:left_margin="13vp"
  23.           ohos:background_element="$graphic:color_cyan_element"
  24.           ohos:text="Button 3"/>
  25.   </DirectionalLayout>

color_cyan_element.xml：

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.       ohos:shape="rectangle">
  4.       <solid
  5.           ohos:color="#ff00ffff"/>
  6.   </shape>

DirectionalLayout 不會自動換行，其子組件會按照設(shè)定的方向依次排列，若超過布局本身的大小，超出布局大小的部分將不會被顯示，例如：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:width="match_parent"
  5.     ohos:height="20vp"
  6.     ohos:orientation="horizontal">
  7.     <Button
  8.         ohos:width="166vp"
  9.         ohos:height="match_content"
  10.         ohos:left_margin="13vp"
  11.         ohos:background_element="$graphic:color_cyan_element"
  12.         ohos:text="Button 1"/>
  13.     <Button
  14.         ohos:width="166vp"
  15.         ohos:height="match_content"
  16.         ohos:left_margin="13vp"
  17.         ohos:background_element="$graphic:color_cyan_element"
  18.         ohos:text="Button 2"/>
  19.     <Button
  20.         ohos:width="166vp"
  21.         ohos:height="match_content"
  22.         ohos:left_margin="13vp"
  23.         ohos:background_element="$graphic:color_cyan_element"
  24.         ohos:text="Button 3"/>
  25. </DirectionalLayout>

color_cyan_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ff00ffff"/>
  6. </shape>

此布局包含了三個按鈕，但由于 DirectionalLayout 不會自動換行，超出布局大小的組件部分無法顯示。界面顯示如下：

圖4 DirectionalLayout 不自動換行示例 img

對齊方式

DirectionalLayout 中的組件使用 layout_alignment 控制自身在布局中的對齊方式，當(dāng)對齊方式與排列方式方向一致時，對齊方式不會生效，如設(shè)置了水平方向的排列方式，則左對齊、右對齊將不會生效。常用的對齊參數(shù)見[表1]。

參數(shù) 作用 可搭配排列方式
left 左對齊 垂直排列
top 頂部對齊 水平排列
right 右對齊 垂直排列
bottom 底部對齊 水平排列
horizontal_center 水平方向居中 垂直排列
vertical_center 垂直方向居中 水平排列
center 垂直與水平方向都居中 水平/垂直排列

三種對齊方式的示例代碼：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:width="match_parent"
  5.     ohos:height="60vp">
  6.     <Button
  7.         ohos:width="50vp"
  8.         ohos:height="20vp"
  9.         ohos:background_element="$graphic:color_cyan_element"
  10.         ohos:layout_alignment="left"
  11.         ohos:text="Button 1"/>
  12.     <Button
  13.         ohos:width="50vp"
  14.         ohos:height="20vp"
  15.         ohos:background_element="$graphic:color_cyan_element"
  16.         ohos:layout_alignment="horizontal_center"
  17.         ohos:text="Button 2"/>
  18.     <Button
  19.         ohos:width="50vp"
  20.         ohos:height="20vp"
  21.         ohos:background_element="$graphic:color_cyan_element"
  22.         ohos:layout_alignment="right"
  23.         ohos:text="Button 3"/>
  24. </DirectionalLayout>

color_cyan_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ff00ffff"/>
  6. </shape>

圖5 三種對齊方式效果示例 img

權(quán)重

權(quán)重（weight）就是按比例來分配組件占用父組件的大小，在水平布局下計算公式為：

父布局可分配寬度=父布局寬度-所有子組件 width 之和；

組件寬度=組件 weight/所有組件 weight 之和*父布局可分配寬度；

實際使用過程中，建議使用 width=0 來按比例分配父布局的寬度，1:1:1 效果如下：

img

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:width="match_parent"
  5.     ohos:height="match_content"
  6.     ohos:orientation="horizontal">
  7.     <Button
  8.         ohos:width="0vp"
  9.         ohos:height="20vp"
  10.         ohos:weight="1"
  11.         ohos:background_element="$graphic:color_cyan_element"
  12.         ohos:text="Button 1"/>
  13.     <Button
  14.         ohos:width="0vp"
  15.         ohos:height="20vp"
  16.         ohos:weight="1"
  17.         ohos:background_element="$graphic:color_gray_element"
  18.         ohos:text="Button 2"/>
  19.     <Button
  20.         ohos:width="0vp"
  21.         ohos:height="20vp"
  22.         ohos:weight="1"
  23.         ohos:background_element="$graphic:color_cyan_element"
  24.         ohos:text="Button 3"/>
  25. </DirectionalLayout>

color_cyan_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ff00ffff"/>
  6. </shape>

color_gray_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ff888888"/>
  6. </shape>

場景示例

點擊放大

源碼示例：

  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="$graphic:color_light_gray_element">
  6.     <DirectionalLayout
  7.         ohos:width="match_parent"
  8.         ohos:height="match_content"
  9.         ohos:orientation="vertical">
  10.         <Button
  11.             ohos:width="33vp"
  12.             ohos:height="20vp"
  13.             ohos:bottom_margin="3vp"
  14.             ohos:left_margin="13vp"
  15.             ohos:background_element="$graphic:color_cyan_element"
  16.             ohos:text="Button 1"/>
  17.         <Button
  18.             ohos:width="33vp"
  19.             ohos:height="20vp"
  20.             ohos:bottom_margin="3vp"
  21.             ohos:left_margin="13vp"
  22.             ohos:background_element="$graphic:color_cyan_element"
  23.             ohos:text="Button 2"/>
  24.         <Button
  25.             ohos:width="33vp"
  26.             ohos:height="20vp"
  27.             ohos:bottom_margin="3vp"
  28.             ohos:left_margin="13vp"
  29.             ohos:background_element="$graphic:color_cyan_element"
  30.             ohos:text="Button 3"/>
  31.     </DirectionalLayout>
  32.     <Component ohos:height="20vp"/>
  33.     <DirectionalLayout
  34.         ohos:width="match_parent"
  35.         ohos:height="match_content"
  36.         ohos:orientation="horizontal">
  37.         <Button
  38.             ohos:width="33vp"
  39.             ohos:height="20vp"
  40.             ohos:left_margin="13vp"
  41.             ohos:background_element="$graphic:color_cyan_element"
  42.             ohos:text="Button 1"/>
  43.         <Button
  44.             ohos:width="33vp"
  45.             ohos:height="20vp"
  46.             ohos:left_margin="13vp"
  47.             ohos:background_element="$graphic:color_cyan_element"
  48.             ohos:text="Button 2"/>
  49.         <Button
  50.             ohos:width="33vp"
  51.             ohos:height="20vp"
  52.             ohos:left_margin="13vp"
  53.             ohos:background_element="$graphic:color_cyan_element"
  54.             ohos:text="Button 3"/>
  55.     </DirectionalLayout>
  56.     <Component ohos:height="20vp"/>
  57.     <DirectionalLayout
  58.         ohos:width="match_parent"
  59.         ohos:height="20vp"
  60.         ohos:orientation="horizontal">
  61.         <Button
  62.             ohos:width="166vp"
  63.             ohos:height="match_content"
  64.             ohos:left_margin="13vp"
  65.             ohos:background_element="$graphic:color_cyan_element"
  66.             ohos:text="Button 1"/>
  67.         <Button
  68.             ohos:width="166vp"
  69.             ohos:height="match_content"
  70.             ohos:left_margin="13vp"
  71.             ohos:background_element="$graphic:color_cyan_element"
  72.             ohos:text="Button 2"/>
  73.         <Button
  74.             ohos:width="166vp"
  75.             ohos:height="match_content"
  76.             ohos:left_margin="13vp"
  77.             ohos:background_element="$graphic:color_cyan_element"
  78.             ohos:text="Button 3"/>
  79.     </DirectionalLayout>
  80.     <Component ohos:height="20vp"/>
  81.     <DirectionalLayout
  82.         ohos:width="match_parent"
  83.         ohos:height="60vp">
  84.         <Button
  85.             ohos:width="50vp"
  86.             ohos:height="20vp"
  87.             ohos:background_element="$graphic:color_cyan_element"
  88.             ohos:layout_alignment="left"
  89.             ohos:text="Button 1"/>
  90.         <Button
  91.             ohos:width="50vp"
  92.             ohos:height="20vp"
  93.             ohos:background_element="$graphic:color_cyan_element"
  94.             ohos:layout_alignment="horizontal_center"
  95.             ohos:text="Button 2"/>
  96.         <Button
  97.             ohos:width="50vp"
  98.             ohos:height="20vp"
  99.             ohos:background_element="$graphic:color_cyan_element"
  100.             ohos:layout_alignment="right"
  101.             ohos:text="Button 3"/>
  102.     </DirectionalLayout>
  103.     <Component ohos:height="20vp"/>
  104.     <DirectionalLayout
  105.         ohos:width="match_parent"
  106.         ohos:height="match_content"
  107.         ohos:orientation="horizontal">
  108.         <Button
  109.             ohos:width="0vp"
  110.             ohos:height="20vp"
  111.             ohos:weight="1"
  112.             ohos:background_element="$graphic:color_cyan_element"
  113.             ohos:text="Button 1"/>
  114.         <Button
  115.             ohos:width="0vp"
  116.             ohos:height="20vp"
  117.             ohos:weight="1"
  118.             ohos:background_element="$graphic:color_gray_element"
  119.             ohos:text="Button 2"/>
  120.         <Button
  121.             ohos:width="0vp"
  122.             ohos:height="20vp"
  123.             ohos:weight="1"
  124.             ohos:background_element="$graphic:color_cyan_element"
  125.             ohos:text="Button 3"/>
  126.     </DirectionalLayout>
  127. </DirectionalLayout>

color_light_gray_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ffeeeeee"/>
  6. </shape>

color_cyan_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ff00ffff"/>
  6. </shape>

color_gray_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ff888888"/>
  6. </shape>
以上內(nèi)容是否對您有幫助：
您使用了广告拦截器。请将 www.w3cschool.cn 加入白名单，解除广告屏蔽后，刷新页面。谢谢。
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號