OpenLaszloでマルチデバイス対応RIAを作ろう

第5回 LZXによるレイアウト[その2]

この記事を読むのに必要な時間:およそ 7 分

<stableborderlayout>

3つのビューのサイズについて,両端の2つを固定サイズ,真ん中は残り全部,というレイアウト機能を提供するタグです。真ん中のビューの幅は自動的に「全体の幅」「両サイドの幅」となります。

サンプルでは両サイドの青いビューの幅は固定ですが,真ん中の黄色いビューの幅は残り全部になっています。

リスト7 両サイド幅固定レイアウト

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout spacing="10"/>
  <view width="250" height="100">
    <stableborderlayout axis="x"/>
    <view bgcolor="blue" width="30" height="100" /><!--固定幅-->
    <view bgcolor="yellow" height="100" /><!--幅は自動的に残り全部-->
    <view bgcolor="blue" width="30" height="100" /><!--固定幅-->
  </view>
  <view width="100" height="100" >
    <stableborderlayout axis="x"/>
    <view bgcolor="blue" width="30" height="100" /><!--固定幅-->
    <view bgcolor="yellow" height="100" /><!--幅は自動的に残り全部-->
    <view bgcolor="blue" width="30" height="100" /><!--固定幅-->
  </view>
</canvas>

リスト7のサンプル

<constantlayout>

<constantlayout>を使うと上または左の余白(padding)が設定できます。兄弟タグに対して作用します。

リスト8 左側に20ピクセルの余白を設定

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout axis="y" spacing="10"/>
  <constantlayout axis="x" value="20"/>
  <view bgcolor="red" width="40" height="15"/>
  <view bgcolor="aqua" width="50" height="15"/>
  <view bgcolor="yellow" width="60" height="15"/>
  <view bgcolor="green" width="20" height="15"/>
</canvas>

リスト8のサンプル

<resizelayout>

<resizelayout>は複数のビューのうち固定サイズのものとそれ以外にわけることができます。サイズを指定しないビューは,⁠全体サイズ」⁠-⁠固定サイズ合計」のサイズを等分割して割り当てられます。 <stableborderlayout>と似ていますが,<stableborderlayout>はビュー3個限定なのに対して,<resizelayout>は4個以上のビューを扱えるところが違います。<stableborderlayout>は<resizelayout>の機能限定版といった感じです。

サイズを指定しないビューには,options="releasetolayout"という属性を指定します。

リスト9のサンプルは青いビューが左から30ピクセル,60ピクセル,90ピクセルの固定幅で,2つの黄色いビューは残りの幅を二等分されています。

リスト9 固定幅,可変幅のビューの混在レイアウト

<canvas proxied="false" bgcolor="0xffffcc">
  <view width="400">
    <resizelayout axis="x"/>
    <view bgcolor="blue" width="30" height="100"/>
    <view bgcolor="yellow" height="100" options="releasetolayout"/>
    <view bgcolor="blue" width="60" height="100"/>
    <view bgcolor="yellow" height="100" options="releasetolayout"/>
    <view bgcolor="blue" width="90" height="100"/>
  </view>
</canvas>

リスト9のサンプル

<hbox>,<vbox>

単純に縦や横に並べるだけなら,<view>と<simplelayout>の機能をくっつけた<hbox>,<vbox>がお手軽です。<hbox>は<view>の中に<simplelayout axis="x">,<vbox>は<simplelayout axis="y">を入れたのと同じ動作をします。間隔はspacingで指定できます。

リスト10 <hbox>,<vbox>

<canvas proxied="false" bgcolor="0xffffcc">
  <vbox spacing="20">
    <hbox spacing="10">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
    </hbox>
    <vbox spacing="10">
      <button>6</button>
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button>10</button>
    </vbox>
  </vbox>
</canvas>

リスト10サンプル

ignorelayout

<simplelayout>などのレイアウトタグがあると,同一階層内のビュー(兄弟ビュー)はすべてその影響を受けて自動配置されます。特定のビューだけその影響を受けないで好きな位置に配置したい場合は,そのビューにoptions="ignorelayout"をつけます。

サンプルで,ボタン3にx="100"とy="20"を指定していますが,上部(緑のビュー)は縦方向にレイアウト機能が働いていますので,y="20"の指定は無視されます。一方,下部(青のビュー)はoptions="ignorelayout"を指定しているので,自動レイアウトの対象から外れ,y="20"の位置に個別に配置されています。緑ビューと青ビューの両方とも横方向への自動レイアウト機能は設定されてないのでx="100"の指定は有効です。

リスト11 レイアウト機能の無視

<canvas proxied="false" bgcolor="0xffffcc">
  <vbox spacing="20">
    <vbox spacing="2" bgcolor="green">
      <button>1</button>
      <button>2</button>
      <button x="100" y="20" >3</button>
      <button>4</button>
      <button>5</button>
    </vbox>
    <vbox spacing="2" bgcolor="blue">
      <button>1</button>
      <button>2</button>
      <button x="100" y="20" options="ignorelayout">3</button>
      <button>4</button>
      <button>5</button>
    </vbox>
  </vbox>
</canvas>

リスト11サンプル

著者プロフィール

ason(あそん)

京都の在宅ITエンジニア。サーバやネットワーク系が得意。初めて触った言語はOpenLaszlo。現在WebプログラマとしてHTML,CSS,PHP,CMSに詳しくなってきたところ。デスメタルドラマー。

URL:http://xtter.openlaszlo-ason.com/