第4回　LZXによるレイアウト［その1］

LZXでは画面に表示される部品、たとえば<view>（四角いエリア⁠）⁠、<text>（文字列⁠）⁠、<button>（ボタン）など、そういうモノを総称してビューと呼んでいます。今回はビューのレイアウト方法の基礎事項を解説し、最後にちょっと背伸びですが応用としてスライドショーを作ってみます。本記事中の動作サンプルはFlashのみですが、LZXでは同じソースでHTML5アプリも作れますので、Flash非対応デバイスでも動くスライドショーを作れることになります。

座標について

画面の座標

画面の横方向にX座標、縦方向にY座標があります。左上が原点で座標は(0,0)です。

X座標は原点から右方向に正の値、左方向に負の値をとります。Y座標は原点から下方向に正の値、上方向に負の値をとります。デフォルトではリスト1のサンプルのようにすべて左上に配置されます。HTMLだと書いた順番に表示されますが、LZXの場合は当然ながら左上に重なります。

リスト1 デフォルトでは左上に配置

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="200" height="50" bgcolor="#ff0000"/>
  <button>ボタン</button>
  <text>こんにちは</text>
</canvas>

リスト1のサンプル

座標指定

リスト1ではボタンと文字列が重なってしまっているので、文字列のほうを他の位置に配置してみましょう。<text>のx属性とy属性を直接指定して、好きな場所に配置することができます。座標の値の単位はピクセルになります。

リスト2は、文字列「こんにちは」を右方向に100ピクセル、下方向に20ピクセルの位置に配置した例です。

リスト2 X,Y指定で配置

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="200" height="50" bgcolor="#ff0000"/>
  <button>ボタン</button>
  <text x="100" y="20">こんにちは</text>
</canvas>

リスト2のサンプル

前後関係

Z座標（という表現はOpenLaszloにはないですが⁠）⁠、すなわちビューが重なった場合に手前に表示するか奥に表示するかといった前後関係はソースに記述された順番で決まります。上のタグから順番に画面に配置されていくので下のタグほど前面に表示されます。

リスト3のサンプルでは赤黄青というソースの順番に奥から手前に向かって表示されています。

リスト3 ソース内で下に記述するほど画面では前に表示される

<canvas proxied="false" bgcolor="0xffffcc"> 
  <!--赤--><view width="100" height="50" bgcolor="#ff0000"/>
  <!--黄--><view x="20" y="20" width="100" height="50" bgcolor="#ffff00"/>
  <!--青--><view x="40" y="40"  width="100" height="50" bgcolor="#0000ff"/>
</canvas>

リスト3のサンプル

この前後関係は動的に変更することができます。たとえばビューをクリックしたときに前面に表示させるには、bringToFront()というメソッドをonclick時に実行すればOKです。

onclickは該当ビューをクリックした時のイベントハンドラです。bringToFront()についているthisというのは自分自身つまりスクリプトが書かれているビュー自身を指します。

リスト4 クリックした四角が前面に来る

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="100" height="50" bgcolor="#ff0000" onclick="this.bringToFront()"/>
  <view x="20" y="20" width="100" height="50" bgcolor="#ffff00" onclick="this.bringToFront()"/>
  <view x="40" y="40"  width="100" height="50" bgcolor="#0000ff" onclick="this.bringToFront()"/>
</canvas>

リスト4のサンプル四角をクリックしてみてください。

親子関係

タグの親子関係とレイアウトには密接な関係があります。子タグの座標系は親タグが基準となります。

親の違いによる座標系の違い

ビューのデフォルト配置位置は原点(x,y)=(0,0)ですね。厳密に言うと親タグの(0,0)になります。

たとえばリスト5ではボタン1の親は<canvas>なので画面全体の左上が原点になります。一方、ボタン2については黄色い四角の<view>が親タグなので、その中の左上が原点でありデフォルトの配置位置になります。もちろん黄色い四角を他の場所に移動すればボタン2もついてきます。タグごとにレイヤーを持っているイメージですね。

リスト5 親子関係

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button>1</button>
  <view x="50" y="20" width="100" height="50" bgcolor="#ffff00">
        <button>2</button>
  </view>
</canvas>

リスト5のサンプル

兄弟関係

兄弟関係とは同一階層にあるビュー同士のことです。リスト4でいうと赤黄青のビュー、リスト5でいうとボタン1と黄色い四角が兄弟です。bringToFront()は兄弟関係にあるビュー間で機能するメソッドです。

親子関係の場合は子が前面に、兄弟関係の場合は弟が前面に、それぞれ表示されます。階層構造とレイアウトの関係の深さからいって、ソースのインデントはきちんとしておくのが良いです。

自動配置の属性

簡単なセンタリングや右寄せなどは座標で指定しなくても属性で自動配置できます。

横センタリング、右寄せ、左寄せ

横方向の自動配置はalign属性で指定できます。左寄せはleft（デフォルト⁠）⁠、センタリングはcenter、右寄せはrightです。もちろんその基準となる範囲は親タグの中です。

リスト6 横方向の自動配置

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button align="left">左寄せ</button>
  <button align="center">センタリング</button>
  <button align="right">右寄せ</button>
</canvas>

リスト6のサンプル

縦センタリング、上寄せ、下寄せ

縦方向の自動配置はvalign属性で指定できます。上寄せはtop(デフォルト)、センタリングはmiddle、下寄せはbottomです。

リスト7 縦方向の自動配置

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button valign="top">上寄せ</button>
  <button valign="middle">センタリング</button>
  <button valign="bottom">下寄せ</button>
</canvas>

リスト7のサンプル

画像の表示、スライドショーの作成

ビューの大きさも位置も同じ場合、複数配置したときにはきれいに重なって一番前のビューだけが見えている状態になります。裏に隠れているビューを次々と自動的に最前面にもってくるようにすればスライドショーの完成ですね! 背面にあるビューを前面に表示させるメソッドはbringToFront()でしたね。

タイマーをセットするような感じでビューを自動で動かすにはアニメーション機能を使います。タグは<animator>を使います。複数の<animator>を同時あるいは連続して実行するには<animatorgroup>で囲みます。どんなタイミングで何をどう動かすかといった指示を与えるためのイベントハンドラというものも使います。

※アニメーション機能やイベントハンドラについては今後の回で詳しく解説します。ここでは背伸び的な応用ということでサンプルソースを眺めておいてください。

ビューによるスライドショー

bringToFront()だけだとチカチカと切り替わるだけで見た目おしゃれじゃないので、よくあるフェードイン型のスライドショーを作ってみましょう。

リスト8ではテストとしてとりあえず赤黄青のビューを用意しました。フェードインさせるには各ビューの透明度(opacity)を順番に「透明(0)→不透明(1)」にしていきます。そのままだと背面に隠れたままフェードインするだけになるので、透明度が変化し始めた瞬間(onopacity)にbringToFront()を使って該当ビューを前面にもってきます。

設定の解説はリスト8のソースのコメントをご参照ください。

リスト8 ビューのスライドショー

<canvas proxied="false" bgcolor="0xffffcc"> 
  <animatorgroup repeat="Infinity"><!--永久にリピートする-->
    <animator duration="2000"/><!--2秒待つ-->
    <animator attribute="opacity" from="0" to="1" duration="1000" target="a"/><!--aを1秒かけて透明から不透明に-->
    <animator duration="2000"/><!--2秒待つ-->
    <animator attribute="opacity" from="0" to="1" duration="1000" target="b"/><!--bを1秒かけて透明から不透明に-->
    <animator duration="2000"/><!--2秒待つ-->
    <animator attribute="opacity" from="0" to="1" duration="1000" target="c"/><!--cを1秒かけて透明から不透明に-->
  </animatorgroup>
  <!--それぞれのビューにid属性で名前をつける。透明度が変化した瞬間(onopacity)に最前面表示する-->
  <view id="a" width="200" height="150" bgcolor="#ff0000" onopacity="this.bringToFront()"/>
  <view id="b" width="200" height="150" bgcolor="#ffff00" onopacity="this.bringToFront()"/>
  <view id="c" width="200" height="150" bgcolor="#0000ff" onopacity="this.bringToFront()"/>
</canvas>

リスト8のサンプル

ビューで画像の表示

LZXではjpg、gif、pngなどの画像を表示することができます。<view>のresource属性で画像ファイルを指定するとそのビューの背景画像として表示することができます。

リスト9はlzxファイルと同じフォルダ内にあるa.jpgファイルを読み込んで表示した例です。

リスト9 画像の表示

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view resource="a.jpg"/>
</canvas>

リスト9のサンプル

画像スライドショー完成品その1

リスト8とリスト9のコードを元に作ったフェードイン型スライドショーです。動作サンプルはFlashですが、HTML5としてコンパイルすればiPhoneなどFlash非対応デバイスでも動くスライドショーになります。

リスト10 スライドショー

<canvas proxied="false" bgcolor="0xffffcc"> 
  <animatorgroup repeat="Infinity">
    <animator duration="2000"/>
    <animator attribute="opacity" from="0" to="1" duration="1000" target="a"/>
    <animator duration="2000"/>
    <animator attribute="opacity" from="0" to="1" duration="1000" target="b"/>
    <animator duration="2000"/>
    <animator attribute="opacity" from="0" to="1" duration="1000" target="c"/>
  </animatorgroup>
  <view id="a" resource="a.jpg" onopacity="this.bringToFront()"/>
  <view id="b" resource="b.jpg" onopacity="this.bringToFront()"/>
  <view id="c" resource="c.jpg" onopacity="this.bringToFront()"/>
</canvas>

リスト10のサンプル

このサンプルはダウンロードしてFlash版とHTML5版の動作を試していただけます。

リスト10のサンプルのダウンロード（Flash版、HTML5版）

画像スライドショー完成品その2

次のサンプルはリスト10のコードを少し改造して画像を左から右にスライドさせるスライドショーにしてみたものです。

<animator>のattribute属性をxにしてx値を-200から0に移動させています。x値が-200というのは原点から200ピクセル左のことで、リスト11の場合は画像の横幅が200ピクセルなので完全に画面の左側に出ている状態です。画面から隠しておくという意味なら200以上であれば良いですが、微妙に動作が変わってきますので興味があればいろいろ試してみてください。で、そこからx=0の位置に移動することで横スライドを実現しています。bringToFront()を実行するタイミングもx値が変わる瞬間なので、イベントハンドラはonxを使います。

リスト11 スライドショー

<canvas proxied="false" bgcolor="0xffffcc"> 
  <animatorgroup repeat="Infinity">
    <animator duration="2000"/>
    <animator attribute="x" from="-200" to="0" duration="1000" target="a"/>
    <animator duration="2000"/>
    <animator attribute="x" from="-200" to="0" duration="1000" target="b"/>
    <animator duration="2000"/>
    <animator attribute="x" from="-200" to="0" duration="1000" target="c"/>
  </animatorgroup>
  <view id="a" resource="a.jpg" onx="this.bringToFront()"/>
  <view id="b" resource="b.jpg" onx="this.bringToFront()"/>
  <view id="c" resource="c.jpg" onx="this.bringToFront()"/>
</canvas>

リスト11のサンプル