AnchorLayout

AnchorLayout的基本思路是設定某控件的四周邊框與容器邊界或其他控件之間的錨定關系，以此來確定該控件實際所處的位置和尺寸。 場景1(簡單的邊界錨定) 如圖: Control1設定與容器的left與top為一個具體值,因此在頁面渲染的時候Control1會處在容器中一個固定的位置,而Control2與Control1有所差別,其top錨定到容器的一個具體值，使得它始終距離容器的上邊界有一個固定值，但是其left沒有直接錨定容器，而是相對的錨定到Control1,其left的值表示相對Control1的一個相對距離。這樣一但我們調(diào)整Control1距離容器的left值的時候,會看到Control2跟著Control1走的效果。它會始終保持與Control1的一個相對距離。同理Control3與Control4控件，當我們縮放容器的大小時它們會始終都貼在容器的右下角。 測試場景：http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.basic.AnchorLayout.d(選擇場景1) 效果圖: 我們可以嘗試著將Dialog的大小做調(diào)整,發(fā)現(xiàn)Control3和Control4始終都貼在Dialog的右下角。 場景2(通過錨定關系來控制控件的尺寸) 如圖: 其中Control1設定容器中l(wèi)eft和right的錨定值為一個具體值,這樣當容器大小發(fā)生變化的時候,控件必須保證其left和right的值不變，這樣勢必要求控件本身的寬度要適應容器寬度的變化。而Control2四個邊界都做了錨定，當容器大小發(fā)生變化的時候Control2必須同時調(diào)整自身的高度和寬度才能滿足四個錨定關系。 測試場景：http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.basic.AnchorLayout.d(選擇場景2) 效果圖: 我們可以嘗試著將Dialog的大小做調(diào)整,發(fā)現(xiàn)Control1的寬度會自適應調(diào)整,而Control2始終保持四個方向錨定距離不變。其實這個場景我們也可以注意到它非常像DockLayout布局中Control1為top布局,而Control2為Center布局。因此DockLayout其實是AnchorLayout的一種特例,事實上Dorado的DockLayout就是從AnchorLayout繼承下來的。 場景3(利用百分比錨定實現(xiàn)居中等效果) 如圖: 在前面的錨定布局中對四個方向的錨定位置都采用了固定值，其實AnchorLayout也支持百分比的錨定，例如本例的Control1我們設定了left的錨定值為50%,這樣AnchorLayout最終運行的時候會使Control1產(chǎn)生一個居中的效果(與場景2居中效果不同的是,該處的控件的高度和寬度始終保持一個固定值),產(chǎn)生這種居中效果的實現(xiàn)需要特別加以說明,50%并不是讓Control1距離左邊的錨定距離為50%，而是將容器寬度減去自身寬度后剩余寬度的50%，這樣就恰好能實現(xiàn)控件居中的效果。這樣當我們定義圖中Control3的左邊錨定距離為100%的話，其實際產(chǎn)生的效果恰好是貼在整個容器的最右邊。同樣Control2如果我們設容器top的錨定距離為50%，其實際產(chǎn)生的效果就是Control2上下居中。即使我們動態(tài)調(diào)整整個容器的大小，Control1,Control2,Control3的顯示效果都不會有變化。 測試場景：http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.basic.AnchorLayout.d(選擇場景3) 效果圖: 我們可以嘗試著將Dialog的大小做調(diào)整,發(fā)現(xiàn)Control1始終左右居中，Control2始終上下居中，Control3始終貼在容器的最右邊。并且這個過程中這些控件的高度和寬度始終都沒有變化。 實戰(zhàn) 前面我們說過DockLayout是AnchorLayout的子類,那么我們通過一個實戰(zhàn)體驗一下。我們通過之前DockLayout中的范例，做一個調(diào)整，改為AnchorLayout,并相應的調(diào)整各個控件的錨定屬性:

 <View layout="anchor">
  <Property name="title">AnchorLayout</Property>
  <ToolBar layoutConstraint="top:0;left:0;right:0">
    <ToolBarLabel>
      <Property name="text">菜單欄</Property>
    </ToolBarLabel>
  </ToolBar>
  <Panel layoutConstraint="anchorTop:previous;left:0;bottom:26">
    <Property name="caption">導航樹</Property>
    <Buttons/>
    <Children/>
    <Tools/>
  </Panel>
  <Panel layoutConstraint="type:center;anchorLeft:previous;left:0;bottom:26;right:0;anchorTop:container;top:26">
    <Property name="caption">工作空間</Property>
    <Buttons/>
    <Children/>
    <Tools/>
  </Panel>
  <ToolBar layoutConstraint="bottom:0;left:0;right:0">
    <ToolBarLabel>
      <Property name="text">狀態(tài)欄</Property>
    </ToolBarLabel>
  </ToolBar>
</View>

最終效果圖: