在SOUI中使用線性布局

SOUI 2.5.1.1開始支持線性布局(LinearLayout).

要在SOUI布局中使用線性布局, 需要在布局容器窗口里指定布局類型為vbox | hbox, (vbox為垂直線性布局, hbox為水平線性布局).

在指定布局類型后還可以為容器窗口指定gravity屬性, 用來指定子窗口的默認排列模式. vbox的gravity有:left(默認), center, right, hbox有: top(默認), center, bottom.

在線性布局中的子窗口pos屬性沒有意義, 一般直接指定size="width,height", width/height值: -1代表wrap_content, -2代表match_parent

可以使用layout_gravity可以更改當前窗口的排列模式.

使用extend="left,top,right,bottom", extend_left, extend_top, extend_right, extend_bottom來指定間距. (相當於android的margin)

子窗口支持使用weight屬性.

 

看下面demo中的例子:

<page title="linear layout">
      <!--這里演示在SOUI中使用線性布局,在window中指定layout="vbox,hbox,linearLayout"時窗口的子窗口布局變成自動布局模式-->
      <window layout="vbox" size="-1,-1" colorBkgnd="#cccccc" gravity="center">
        <!--線性布局的自適應子窗口大小-->
        <text>vbox + gravity + wrapContent</text>
        <window size="100,30" colorBkgnd="#ff0000"/>
        <window size="200,30" extend="10,5,10,5" colorBkgnd="#ff0000"/>
        <window size="120,30" layout_gravity="right" colorBkgnd="#ff0000"/>
      </window>

      <window pos="0,[5,@-1,@200" layout="vbox" colorBkgnd="#cccccc">
        <!--線性布局的weight屬性-->
        <text extend_bottom="10">vbox + gravity + weight</text>
        <window size="100,30" colorBkgnd="#ff0000"/>
        <window size="200,30" extend="10,5,10,5" colorBkgnd="#ff0000" weight="1"/>
        <window size="120,30" layout_gravity="right" colorBkgnd="#ff0000" weight="1"/>
        <button size="100,30" extend_top="10">button test</button>
      </window>

      <window pos="0,[5" layout="vbox" colorBkgnd="#cccccc" id="10000">
        <text extend_bottom="10" layout_gravity="center">hbox demo</text>
        <window size="-1,-1" layout="hbox" colorBkgnd="#888888">
          <!--線性布局之hbox-->
          <button size="100,30">button1</button>
          <button size="100,30" extend_left="10">button2</button>
          <button size="100,30" extend_left="10">button3</button>
          <button size="100,30" extend_left="10">button4</button>
        </window>
      </window>
    </page>