前回の記事ではタグごとの属性値
自動配置用タグ
<simplelayout>
<simplelayout>を使うと，
リスト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>は格子状にビューを自動配置します。大きさを自由に変更できるウインドウや，
リスト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のサンプル