Flex 4 Layout

先日のDevelopers Summit 2011でFlexによるAndroidアプリのデモを用意しましたが、講演2時間前になってリスト表示のレイアウトを思い切り変更してみたくなり、WebからFlex 4用のCoverflowレイアウトクラスを探して出してデモに適用しました。

画面が縦長の時は普通のリスト表示、デバイスを傾けて画面を横長にした時はリストがCoverflowで表示され、さらにその下の領域に選択されたアイテムの詳細情報が表示される、というサンプルアプリケーションです。

土壇場でこのような劇的な表現のレイアウトを簡単に適用できたのは、Flex 4から新たに採用されたレイアウト機構のお陰です。という訳で、Flex 4のレイアウトについて簡単におさらいします。

Flex 3 のレイアウト

その前にFlex 3のレイアウト機構もおさらいしておきましょう。Flex 3ではレイアウトの概念が各コンポーネントに内包されている状態でした。たとえば、アプリケーション自体のレイアウトは、layoutプロパティにStringで次の3つの何れかを指定していました。

  • “vertical”(垂直方向にコンポーネントを自動配置)
  • “horizontal”(水平方向にコンポーネントを自動配置)
  • “absolute”(全てのコンポーネントを絶対値で配置)

※コンポーネントには、デフォルトで”vertical”が指定されています。

これらの文字列が指定されると、<mx:Application>は内部に実装されている対応のレイアウトを適用します。(実際のlayoutプロパティは、継承元のLayoutContainerクラスに定義されている。)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                layout="absolute">

  <mx:Button label="Button01" x="100" y="100" />

</mx:Application>

Flex 3でのこの方式は一見簡単な指定方法に感じますが、Coverflowのようなレイアウトを指定した場合は大変な労力を要するでしょう。ましてや、他の環境でも再利用することなど、短時間の作業では実現が難しいでしょう。何故なら、前述のようにコンポーネントとレイアウト定義が一体化しており、疎結合になっていないからです。

Flex 4のレイアウト

Flex 4のSparkアーキテクチャは、主にコンポーネントの「見た目」と「ロジック」が疎結合化されており、互いを汎用的に再利用し易い機構になっています。

レイアウトを含む「見た目」をコンポーネント本体から分離させることで大きく2つのメリットが生じています。

  • コンポーネント自体の軽量化
  • レイアウトの再利用

Flex 4では、実行時に動的にレイアウトを変更することも簡単にできるようになり、例えばDevelopers Summit 2011で披露したようなSmartphoneアプリを作成する際に縦長画面と横長画面でそれぞれ最適なレイアウトを実行時に変更するなど、そのメリットを享受できます。

レイアウトクラス

分離したレイアウトは、LayoutBaseクラスのサブクラスとして定義されることになります。Flex 4には、汎用的に利用できる以下の4つのレイアウトクラスが予め用意されています。

  • VerticalLayout(垂直方向にコンポーネントを自動配置)
  • HorizontalLayout(水平方向にコンポーネントを自動配置)
  • BasicLayout(全てのコンポーネントを絶対値で配置)
  • TileLayout(タイル状にコンポーネントを自動配置)

※コンポーネントには、デフォルトでBasicLayoutが指定されています。

実際にレイアウト指定する場合は、以下のように<s:layout>タグを使って指定します。

<s:Group>
  <s:layout>
    <s:VerticalLayout />
  </s:layout>

  <s:Button label="Button 01" />
  <s:Button label="Button 02" />
</s:Group>

カスタムレイアウトクラス

自分でカスタムのレイアウトクラスを作成したい場合は、LayoutBaseクラスを継承して以下の2つのメソッドをオーバーライドします。

  • updateDisplayList()
  • measure()

簡単なカスタムレイアウトクラスの説明は、以下のサイトを参考にしてください。複雑なものでなければ、自作もできそうです。

参考になる情報源

技術解説

Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts – Adobe Developer Connection
非常に丁寧にFlex 4のレイアウトについて、豊富なサンプルで解説している記事です。著者は、Flex Community Evangelist廣畑大雅氏

Having Fun with Flex 4 Layouts – Adobe MAX 2010
スペインのAdobeエバンジェリスト、Enrique DuvosがAdobe MAX 2010で講演した資料です。Flex 4について、かなり良くまとまっているのでオススメです。

Flex 4 and Custom Layouts – RIAgora.com
フランスのAdobeエバンジェリスト、Michaël CHAIZEのブログです。ビデオチュートリアル付きで、カスタムレイアウトクラスの作成方法を紹介しています。

Flex 4 Custom Layout – danvega.org
簡単なカスタムレイアウトクラスの作成方法を紹介しています。

Flex 4 Layouts and Groups – pv3d.org
著者のJohn Lindquistは、Papervision 3Dの開発、コミュニティ活動や執筆活動も行う人です。ビデオチュートリアルのみですが、順を追って紹介してくれるので分かり易い内容です。

サンプル

▼WheelLayout – Easy Flex(サンプル | ブログ

▼TimeMachineLayout – Flex Stuff(サンプル | ブログ

▼LargeCycleLayout – MITI’s Blog(サンプル | ブログ

▼CoverflowLayout – rialvalue.com(サンプル | ブログ

▼CarroflowLayout – rialvalue.com(サンプル & ブログ

FlexLayout.org
Flex 4のレイアウトを専門に扱うサイトのようです。もっとレイアウトの種類が増えるとよいのですが。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。