鴻蒙OS DirectionalLayout

2020-09-18 11:55 更新

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

圖1 DirectionalLayout 示意圖 img

排列方式

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

  • 垂直排列

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

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

  <?xml version="1.0" encoding="utf-8"?>
  <DirectionalLayout
      xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:width="match_parent"
      ohos:height="match_content"
      ohos:orientation="vertical">
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:bottom_margin="3vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 1"/>
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:bottom_margin="3vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 2"/>
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:bottom_margin="3vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 3"/>
  </DirectionalLayout>

color_cyan_element.xml：

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

  • 水平排列

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

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

  <?xml version="1.0" encoding="utf-8"?>
  <DirectionalLayout
      xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:width="match_parent"
      ohos:height="match_content"
      ohos:orientation="horizontal">
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 1"/>
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 2"/>
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 3"/>
  </DirectionalLayout>

color_cyan_element.xml：

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

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="20vp"
    ohos:orientation="horizontal">
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：

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

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

圖4 DirectionalLayout 不自動換行示例 img

對齊方式

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="60vp">
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="left"
        ohos:text="Button 1"/>
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Button 2"/>
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="right"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：

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

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

權(quán)重

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

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

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

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

img

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：

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

color_gray_element.xml：

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

場景示例

點(diǎn)擊放大

源碼示例：

<?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="$graphic:color_light_gray_element">
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="vertical">
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 2"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <Component ohos:height="20vp"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="horizontal">
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 2"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <Component ohos:height="20vp"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="20vp"
        ohos:orientation="horizontal">
        <Button
            ohos:width="166vp"
            ohos:height="match_content"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="166vp"
            ohos:height="match_content"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 2"/>
        <Button
            ohos:width="166vp"
            ohos:height="match_content"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <Component ohos:height="20vp"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="60vp">
        <Button
            ohos:width="50vp"
            ohos:height="20vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:layout_alignment="left"
            ohos:text="Button 1"/>
        <Button
            ohos:width="50vp"
            ohos:height="20vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:layout_alignment="horizontal_center"
            ohos:text="Button 2"/>
        <Button
            ohos:width="50vp"
            ohos:height="20vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:layout_alignment="right"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <Component ohos:height="20vp"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="horizontal">
        <Button
            ohos:width="0vp"
            ohos:height="20vp"
            ohos:weight="1"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="0vp"
            ohos:height="20vp"
            ohos:weight="1"
            ohos:background_element="$graphic:color_gray_element"
            ohos:text="Button 2"/>
        <Button
            ohos:width="0vp"
            ohos:height="20vp"
            ohos:weight="1"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 3"/>
    </DirectionalLayout>
</DirectionalLayout>

color_light_gray_element.xml：

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

color_cyan_element.xml：

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

color_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ff888888"/>
</shape>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號