首页 > 代码库 > Duilib教程-自动布局3-分隔条

Duilib教程-自动布局3-分隔条

先看一个常用的图,如下:

 技术分享

左边是导航栏,右边是信息区。

中间可以自由拉伸。

XML如下:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="695,542">    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">        <HorizontalLayout width="200" bkcolor="#FF008080" sepwidth="6" sepimm="true" />        <HorizontalLayout bkcolor="#FFA6CAF0" />    </HorizontalLayout></Window>

 

sepwidth 全称为 seperator width,分隔条的宽度。这个值分正值、负值,正值表示分隔条在右边,负值表示分隔条在左边。

 

sepimm 全称为 separate immediately,立即拉伸,即鼠标一移动,马上就设置LAYOUT的大小。

 

DUILIB似乎有一个BUG,就是当左边被拖到宽度为0时,它为自动还原为原始大小。为了解决这个BUG,我们需要设置它的最小宽度,minwidth=”1”,这样BUG就不存在了咯。

 

解决这个BUG的时候,你也已经知道,如何限制左边的LAYOUT的大小了吧,maxwidth,如果设置了这个属性,指定了最大宽度,那它就会限制在一定大小了。以下的XML,读者可作测试:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="695,542">    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">        <HorizontalLayout minwidth="50" maxwidth="300" width="200" bkcolor="#FF008080" sepwidth="6" sepimm="true" />        <HorizontalLayout bkcolor="#FFA6CAF0" />    </HorizontalLayout></Window>

 

这里要说明一个非常重要的规则:

如果分隔条是竖条的,|,那分隔条属性为sepwidth,它的LAYOUT必须是HorizontalLayout,即水平布局,因为只有水平布局被水平拉伸才是合理的。

如果分隔条是横条的,一,那分隔条属性为sepheight,它的LAYOUT必须是VerticalLayout,即垂直布局,因为只有垂直布局被垂直拉伸才是合理的。

 

所以,在上面的XML中,如果你将左边的LAYOUT换成VerticalLayout,你会发现分隔条无效,因为VerticalLayout根本没有sepwidth属性。

 

在设置横条的分隔条时,需要设置minheight、maxheight属性,这样便于控制其大小。sepheight为正时,表示分隔条在下方,为负时,表示在上方。

 

下面我贴一个拥有上下、左右分隔条的XML,同时包含正负值。

 技术分享

XML:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="695,542">    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">        <HorizontalLayout sepwidth="5" sepimm="false" minwidth="50" maxwidth="300" width="137" bkcolor="#FF008080" />        <VerticalLayout>            <VerticalLayout bkcolor="#FF103A78" />            <VerticalLayout bkcolor="#FF5D4425" minheight="50" sepheight="-5" sepimm="true"/>        </VerticalLayout>    </HorizontalLayout></Window>

 

Duilib教程-自动布局3-分隔条