鴻蒙OS DependentLayout

2020-09-18 11:56 更新

DependentLayout 是 Java UI 系統(tǒng)里的一種常見布局。與 DirectionalLayout 相比，擁有更多的排布方式，每個組件可以指定相對于其他同級元素的位置，或者指定相對于父組件的位置。

圖1 DependentLayout 示意圖 img

排列方式

DependentLayout 的排列方式是相對于其他同級組件或者父組件的位置進行布局。

  • 相對于同級組件

相對于同級組件的位置布局見[表1]。

位置布局 描述
above 處于同級組件的上側。
below 處于同級組件的下側。
start_of 處于同級組件的起始側。
end_of 處于同級組件的結束側。
left_of 處于同級組件的左側。
right_of 處于同級組件的右側。

end_of：

img

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <DependentLayout
  3.       xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.       ohos:width="match_content"
  5.       ohos:height="match_content"
  6.       ohos:background_element="$graphic:color_light_gray_element">
  7.       <Text
  8.           ohos:id="$+id:text1"
  9.           ohos:width="match_content"
  10.           ohos:height="match_content"
  11.           ohos:left_margin="15vp"
  12.           ohos:top_margin="15vp"
  13.           ohos:bottom_margin="15vp"
  14.           ohos:text="text1"
  15.           ohos:text_size="20fp"
  16.           ohos:background_element="$graphic:color_cyan_element"/>
  17.       <Text
  18.           ohos:id="$+id:text2"
  19.           ohos:width="match_content"
  20.           ohos:height="match_content"
  21.           ohos:left_margin="15vp"
  22.           ohos:top_margin="15vp"
  23.           ohos:right_margin="15vp"
  24.           ohos:bottom_margin="15vp"
  25.           ohos:text="end_of text1"
  26.           ohos:text_size="20fp"
  27.           ohos:background_element="$graphic:color_cyan_element"
  28.           ohos:end_of="$id:text1"/>
  29.   </DependentLayout>

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>

below：

img

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <DependentLayout
  3.       xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.       ohos:width="match_content"
  5.       ohos:height="match_content"
  6.       ohos:background_element="$graphic:color_light_gray_element">
  7.       <Text
  8.           ohos:id="$+id:text1"
  9.           ohos:width="match_content"
  10.           ohos:height="match_content"
  11.           ohos:left_margin="15vp"
  12.           ohos:top_margin="15vp"
  13.           ohos:right_margin="40vp"
  14.           ohos:text="text1"
  15.           ohos:text_size="20fp"
  16.           ohos:background_element="$graphic:color_cyan_element"/>
  17.       <Text
  18.           ohos:id="$+id:text3"
  19.           ohos:width="match_content"
  20.           ohos:height="match_content"
  21.           ohos:left_margin="15vp"
  22.           ohos:top_margin="15vp"
  23.           ohos:right_margin="40vp"
  24.           ohos:bottom_margin="15vp"
  25.           ohos:text="below text1"
  26.           ohos:text_size="20fp"
  27.           ohos:background_element="$graphic:color_cyan_element"
  28.           ohos:below="$id:text1"/>
  29.   </DependentLayout>

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>

其他的 above、start_of、left_of、right_of 等參數(shù)可分別實現(xiàn)類似的布局。

  • 相對于父組件

相對于父組件的位置布局見[表2]。

位置布局 描述
align_parent_left 處于父組件的左側。
align_parent_right 處于父組件的右側。
align_parent_start 處于父組件的起始側。
align_parent_end 處于父組件的結束側。
align_parent_top 處于父組件的上側。
align_parent_bottom 處于父組件的下側。
center_in_parent 處于父組件的中間。

以上位置布局可以組合，形成處于左上角、左下角、右上角、右下角的布局。

img

  1.   <?xml version="1.0" encoding="utf-8"?>
  2.   <DependentLayout
  3.       xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.       ohos:width="300vp"
  5.       ohos:height="100vp"
  6.       ohos:background_element="$graphic:color_background_gray_element">
  7.       <Text
  8.           ohos:id="$+id:text6"
  9.           ohos:width="match_content"
  10.           ohos:height="match_content"
  11.           ohos:text="align_parent_right"
  12.           ohos:text_size="12fp"
  13.           ohos:background_element="$graphic:color_cyan_element"
  14.           ohos:align_parent_right="true"
  15.           ohos:center_in_parent="true"/>
  16.       <Text
  17.           ohos:id="$+id:text7"
  18.           ohos:width="match_content"
  19.           ohos:height="match_content"
  20.           ohos:text="align_parent_bottom"
  21.           ohos:text_size="12fp"
  22.           ohos:background_element="$graphic:color_cyan_element"
  23.           ohos:align_parent_bottom="true"
  24.           ohos:center_in_parent="true"/>
  25.       <Text
  26.           ohos:id="$+id:text8"
  27.           ohos:width="match_content"
  28.           ohos:height="match_content"
  29.           ohos:text="center_in_parent"
  30.           ohos:text_size="12fp"
  31.           ohos:background_element="$graphic:color_cyan_element"
  32.           ohos:center_in_parent="true"/>
  33.       <Text
  34.           ohos:id="$+id:text9"
  35.           ohos:width="match_content"
  36.           ohos:height="match_content"
  37.           ohos:text="align_parent_left_top"
  38.           ohos:text_size="12fp"
  39.           ohos:background_element="$graphic:color_cyan_element"
  40.           ohos:align_parent_left="true"
  41.           ohos:align_parent_top="true"/>
  42.   </DependentLayout>

color_background_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="#ffbbbbbb"/>
  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>

場景示例

使用 DependentLayout 可以輕松實現(xiàn)內(nèi)容豐富的布局。

img

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:width="match_parent"
  5.     ohos:height="match_content"
  6.     ohos:background_element="$graphic:color_background_gray_element">
  7.     <Text
  8.         ohos:id="$+id:text1"
  9.         ohos:width="match_parent"
  10.         ohos:height="match_content"
  11.         ohos:text_size="25fp"
  12.         ohos:top_margin="15vp"
  13.         ohos:left_margin="15vp"
  14.         ohos:right_margin="15vp"
  15.         ohos:background_element="$graphic:color_gray_element"
  16.         ohos:text="Title"
  17.         ohos:text_weight="1000"
  18.         ohos:text_alignment="horizontal_center"
  19.     />
  20.     <Text
  21.         ohos:id="$+id:text2"
  22.         ohos:width="match_content"
  23.         ohos:height="120vp"
  24.         ohos:text_size="10vp"
  25.         ohos:background_element="$graphic:color_gray_element"
  26.         ohos:text="Catalog"
  27.         ohos:top_margin="15vp"
  28.         ohos:left_margin="15vp"
  29.         ohos:right_margin="15vp"
  30.         ohos:bottom_margin="15vp"
  31.         ohos:align_parent_left="true"
  32.         ohos:text_alignment="center"
  33.         ohos:multiple_lines="true"
  34.         ohos:below="$id:text1"
  35.         ohos:text_font="serif"/>
  36.     <Text
  37.         ohos:id="$+id:text3"
  38.         ohos:width="match_parent"
  39.         ohos:height="120vp"
  40.         ohos:text_size="25fp"
  41.         ohos:background_element="$graphic:color_gray_element"
  42.         ohos:text="Content"
  43.         ohos:top_margin="15vp"
  44.         ohos:right_margin="15vp"
  45.         ohos:bottom_margin="15vp"
  46.         ohos:text_alignment="center"
  47.         ohos:below="$id:text1"
  48.         ohos:end_of="$id:text2"
  49.         ohos:text_font="serif"/>
  50.     <Button
  51.         ohos:id="$+id:button1"
  52.         ohos:width="70vp"
  53.         ohos:height="match_content"
  54.         ohos:text_size="15fp"
  55.         ohos:background_element="$graphic:color_gray_element"
  56.         ohos:text="Previous"
  57.         ohos:right_margin="15vp"
  58.         ohos:bottom_margin="15vp"
  59.         ohos:below="$id:text3"
  60.         ohos:left_of="$id:button2"
  61.         ohos:italic="false"
  62.         ohos:text_weight="5"
  63.         ohos:text_font="serif"/>
  64.     <Button
  65.         ohos:id="$+id:button2"
  66.         ohos:width="70vp"
  67.         ohos:height="match_content"
  68.         ohos:text_size="15fp"
  69.         ohos:background_element="$graphic:color_gray_element"
  70.         ohos:text="Next"
  71.         ohos:right_margin="15vp"
  72.         ohos:bottom_margin="15vp"
  73.         ohos:align_parent_end="true"
  74.         ohos:below="$id:text3"
  75.         ohos:italic="false"
  76.         ohos:text_weight="5"
  77.         ohos:text_font="serif"/>
  78. </DependentLayout>

color_background_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="#ffbbbbbb"/>
  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)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號