2.2.2 DependentLayout

DependentLayout 在開發過程中也很常用，之前介紹的 DirectionalLayout通過方向、權重來控制內部組件的位置，而 DependentLayout 更為靈活，擁有更多的排列方式，它通過相對的方式來對組件進行定位，組件通過指定相對于其他組件的位置，可以出現在布局中的任何地方。

圖2-18就是一個相對布局完成的頁面，在頁面中先擺放一個組件A，然后擺放組件B，讓其位置在組件A下面。最后，擺放組件C，讓組件C在組件A的下面，且在組件B的右側。這樣就通過相對位置的方式，完成了這個布局設計。

下面用XML布局文件的代碼將其實現。

首先，為“按鈕A”和“按鈕B”增加一個ID，然后在設置“按鈕B”的位置時，用了ohos：below屬性，通過$id：A值告訴系統，“按鈕B”的位置在“按鈕A”的下面。

然后，在設置“按鈕 C”的位置時，用了兩個相對位置的描述，通過ohos：below="$id：A"指定“按鈕 C”的位置在“按鈕 A”的下面，通過ohos：right_of="$id：B"指定“按鈕C”的位置在“按鈕B”的右側。這樣就達到了指定“按鈕C”的位置在“按鈕A”的下面，同時又在“按鈕B”的右側的效果。頁面的預覽效果如圖2-19所示。

關于相對位置的屬性有很多，表2-2列出了幾個常用的屬性和其對應的含義。

下面通過一個小例子來更加清晰地認識這些屬性的含義。這個案例是仿遙控器，在屏幕中擺放五個按鈕，使用相對位置來確定各個按鈕的位置。

在這個例子中，在DependentLayout中創建了五個按鈕，首先來看“中間”按鈕，它的位置用ohos：center_in_parent="true"來確定，表明它在父布局的中心。名稱為“上面”的按鈕在“中間”按鈕的上面，并且在屏幕中水平居中，所以這里用到了兩個定位方式：水平居中（ohos：horizontal_center="true"）和在“中間”按鈕上面（ohos：above="$id：A"），它的位置是依賴于“中間”按鈕的。

“下面”按鈕也需要依賴“中間”按鈕來確定位置，通過ohos：below="$id：A"來確定在“中間”按鈕下面，并通過水平居中（ohos：horizontal_center="true"），讓其位于“中間”按鈕的正下面。

“左側”按鈕在“中間”按鈕的左側，依賴于“中間”按鈕的位置，通過ohos：left_of="$id：A"固定在“中間”按鈕左側，并通過垂直居中（ohos：vertical_center="true"）固定在“中間”按鈕的正左側。

“右側”按鈕在“中間”按鈕的右側，依賴于“中間”按鈕的位置，通過ohos：right_of="$id：A"和垂直居中（ohos：vertical_center="true"）固定在“中間”按鈕的正右側。頁面的預覽效果如圖2-20所示。

“中間”按鈕位于屏幕的中心，其他四個按鈕依賴于“中間”按鈕擺放。因此在使用DependentLayout時，要首先明確組件之間的依賴關系，后面加入的組件依賴于前面組件的位置，這樣可以實現豐富的布局設計。

雖然 DependentLayout 中關于位置的屬性值很多，但是大部分都可以通過屬性名得知，這是有一定規律的。

下面來看如何用Java代碼實現相對布局。

在上述代碼中，也使用了 LayoutConfig 對象來設置組件的屬性，但此LayoutConfig對象和DirectionalLayout中使用的LayoutConfig對象不同，這一點要稍加注意。在DependentLayout中，可以通過LayoutConfig對象的addRule（）方法來控制組件的位置和相對位置。