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

 <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">導(dǎo)航樹(shù)</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>

最終效果圖: