レイアウトマネージャ

レイアウトマネージャ（英: Layout manager）は、ウィジェット・ツールキットで使われるソフトウェアコンポーネントであり、距離単位を使わずにウィジェット群を相対位置に基づいて配置する機能を持つ。

多くのウィジェット・ツールキットはデフォルトでこの機能を備えており、ピクセル単位などの距離単位を使って（画面全体の）絶対座標や（親ウィンドウの）相対座標で配置を定義するよりも自然な配置が可能である。この機能によって、ウィジェット・ツールキットは2種類に分類できる。

• 配置方法が特殊なグラフィックコンテナとしてコード化されているもの。XUL や .NET Framework のウィジェット・ツールキット（Windows Forms や XAML）がこれに当たる。
• 配置方法がレイアウトマネージャとしてコード化されており、それを任意のグラフィックコンテナに適用可能なもの。Java API の一部である Swing がこれに当たる。

XUL の例

vbox コンテナ上で各種コンポーネントを積み重ねることができる。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="vbox example" title="Example"
        xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox>
  <button id="yes" label="Yes"/>
  <button id="no" label="No"/>
  <button id="maybe" label="Maybe"/>
</vbox>

</window>

このようなコードで3つのボタンが vertical box 内で互いに積み重なった状態となる。

Java Swing の例

FlowLayout レイアウトマネージャは、例えば文章を構成する語句のように、流れ（flow)に沿ったコンポーネント配置を行う。横幅に入るだけ水平方向にコンポーネントを（左から右へ）並べていき、いっぱいになると下に新たな行としてコンポーネントを配置していく。

import javax.swing.JFrame;
import javax.swing.JButton;
import java.awt.FlowLayout;
import java.awt.Container;

public class LayoutExample extends JFrame {
    public LayoutExample() {
        this.setTitle("FlowLayoutDemo");
        // get the top-level container in the Frame (= Window)
        Container contentPane = this.getContentPane();

        // set the layout of this container
        contentPane.setLayout(new FlowLayout());

        // add buttons in this container
        this.add((new JButton("Button 1")));
        this.add((new JButton("Button 2")));
        this.add((new JButton("Button 3")));
        this.add((new JButton("Long-Named Button 4")));
        this.add((new JButton("5")));

        // unrelated, exit the application when clicking on the 
        // right close-button
        this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
    }

    public static void main(String[] args) {
        LayoutExample example = new LayoutExample();
        example.setVisible(true);
    }
}

このコードでは、以下のように5つのボタンを同じ行に順に配置した状態となる。

XAML の例

DockPanel コンテナは、子コンポーネントをその Dock 属性に従って配置する。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="myDock Panel">
  <DockPanel>
      <TextBlock DockPanel.Dock="Top">Top 1</TextBlock>
      <TextBlock DockPanel.Dock="Top">Top 2</TextBlock>
      <TextBlock DockPanel.Dock="Top">Top 3</TextBlock>
      <TextBlock DockPanel.Dock="Top">Top 4</TextBlock>
  </DockPanel>
</Page>

このコードでは、4つのテキストブロックが互いに上になるように配置される。

外部リンク

• layout tutorial on SUN website
• xul tutorial on xulplanet レイアウトについては、3章と4章
• Layout Manager Showdown on java.net