レイアウト例
これまでに解説したテクニックを使って,Webサイトでよくある画面のレイアウトを2つほど構築してみます。
ログイン画面
簡単なログイン画面を作ってみます。文字は<text>，
リスト17 ログイン画面
<canvas proxied="false" bgcolor="0xffffcc">
<!-- (1) -->
<view width="200" height="150" bgcolor="teal">
<!-- (2) -->
<view width="${parent.width-4}" height="${parent.height-4}" align="center" valign="middle" bgcolor="silver">
<!-- (3) -->
<vbox y="10" align="center" >
<text>ログイン</text>
<edittext/>
<text>パスワード</text>
<edittext password="true"/>
<view height="10"/><!-- (4) -->
<button>ログイン</button>
</vbox>
</view>
</view>
</canvas>リスト17サンプル
リスト17を解説します。(1)はログインボックス全体のエリア用のビューです。
(2)は幅，
(3)は文字列や入力欄などの部品を入れるビューです。<vbox>なのでタグ内の部品は縦に自動配置します。
(4)の<view height="10"/>とは高さ10ピクセルの透明のエリアです。入力欄とボタンの間隔をあけるためだけに配置しました。 このようにすると自動レイアウトの機能をそのまま使いつつ，
コンテンツ画面
業務アプリやホームページなどでよく見るような画面レイアウトを作ってみます。まず，
リスト18 画面レイアウト
<canvas proxied="false" bgcolor="0xffffcc">
<stableborderlayout axis="y"/>
<!-- (1)上段 -->
<view width="${parent.width}" height="50" bgcolor="red">
<text>ヘッダ</text>
</view>
<!-- (2)中段 -->
<hbox width="${parent.width}">
<stableborderlayout axis="x"/>
<!-- (2-1)中段 左 -->
<vbox width="100" height="${parent.height}" bgcolor="yellow">
<text>左サイド</text>
</vbox>
<!-- (2-2)中段 中 -->
<vbox height="${parent.height}">
<text>コンテンツエリア</text>
</vbox>
<!-- (2-2)中段 右 -->
<vbox width="70" height="${parent.height}" bgcolor="yellow">
<text>右サイド</text>
</vbox>
</hbox>
<!-- (3)下段 -->
<view width="${parent.width}" height="30" bgcolor="green">
<text>フッタ</text>
</view>
</canvas>リスト18サンプル