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

第5回　LZXによるレイアウト［その2］

OpenLaslzo, LZX, HTML5, Flash

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

前回の記事ではタグごとの属性値（x，y，alignなど）で配置位置を決めていましたが，今回はLZXに標準で提供されている自動配置用のタグを紹介します。

自動配置用タグ

<simplelayout>

<simplelayout>を使うと，兄弟ビュー（ソースのXML構造でいう同一階層にあるビュー）を縦や横方向に等間隔で配置することができます。デフォルトは縦方向です。

リスト1 縦方向に自動配置

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout/>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</canvas>

リスト1サンプル

axis属性で方向を指定します。値はxあるいはyです。デフォルトはyです。axis="x"にすると横方向になります。

リスト2 横方向に自動配置

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout axis="x"/>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</canvas>

リスト2のサンプル

spacing属性で間隔を指定できます。単位はピクセルです。

リスト3 横方向に10ピクセル間隔で自動配置

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout spacing="10" axis="x"/>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</canvas>

リスト3のサンプル

縦と横の<simplelayout>を2つ使うと斜め方向になります。

リスト4 縦横方向に等間隔で自動配置

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout spacing="5"/>
  <simplelayout spacing="10" axis="x"/>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</canvas>

リスト4のサンプル

<wrappinglayout>

<wrappinglayout>は格子状にビューを自動配置します。大きさを自由に変更できるウインドウや，iPhoneなど縦横に表示を切り替えられるデバイスに便利な機能です。

リスト5のサンプルのウインドウのサイズを変えてみてください。

リスト5 格子状に自動配置

<canvas proxied="false" bgcolor="0xffffcc">
  <window width="250" height="100" resizable="true">
    <wrappinglayout spacing="5"/>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
  </window>
</canvas>

リスト5のサンプル

<reverselayout>

ソースに書いた順番と逆向きに自動配置するタグです。<simplelayout>での向きを逆にしたものです。

リスト6 逆向きに配置

<canvas proxied="false" bgcolor="0xffffcc">
  <reverselayout/>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</canvas>

リスト6のサンプル

OpenLaslzo, LZX, HTML5, Flash

著者プロフィール

ason（あそん）

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

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