レイアウト

  レイアウト

さて、ここまででいくつかのコンポーネントを個々に見てきました。ではアプレットに複数のコンポーネントを配置した場合にはどのような表示になるでしょうか。やってみましょう。

''Sample26.java"

01|/* <applet code="Sample26.class" width="150" height="100"></applet> */
02|import java.applet.Applet;
03|import java.awt.*;
04|
05|public class Sample26 extends Applet{
06|    // コンポーネントクラスの変数を定義
07|    Label label;
08|    Button button;
09|    TextField textfield;
10|    Scrollbar scrollbar;
11|    Choice choice;
12|    
13|    public void init(){
14|        // 各コンポーネントのオブジェクト作成と初期化
15|        label = new Label( "Sample26");
16|        button = new Button( "Push Me!");
17|        textfield = new TextField( "HELLO, WORLD!!");
18|        scrollbar = new Scrollbar( Scrollbar.HORIZONTAL, 10, 5, 0, 100);
19|        choice = new Choice();
20|        
21|        // チョイスに項目を追加
22|        choice.add("chick");
23|        choice.add("Joh");
24|        choice.add("tomo");
25|
26|        // コンポーネントをアプレットのコンテナに追加
27|        this.add( label);
28|        this.add( button);
29|        this.add( textfield);
30|        this.add( scrollbar);
31|        this.add( choice);
32|    }
33|}

Sample26を実行すると図29のようになります。

図 29: Sample26 実行結果

コンポーネントは追加された順に左上から右下へと配置されていきます。このままではなんとなく見栄えがしませんね。awtパッケージにはコンポーネントの配置を調整するためのレイアウトに関するクラスが用意されています。レイアウトの変更は Applet クラスのメソッド setLayout()で行うことができます。Sample26のレイアウトを変更してみましょう。例としてGridLayoutを試してみます。GridLayoutはコンテナを格子状に等分割し、コンポーネントを配置します。

Sample27.java

01|/* <applet code="Sample27.class" width="150" height="60"></applet> */
02|import java.applet.Applet;
03|import java.awt.*;
04|
05|public class Sample27 extends Applet{
06|    // コンポーネントクラスの変数を定義
07|    Label label;
08|    Button button;
09|    TextField textfield;
10|    Scrollbar scrollbar;
11|    Choice choice;
12|    
13|    public void init(){
14|        // 各コンポーネントのオブジェクト作成と初期化
15|        label = new Label( "Sample26");
16|        button = new Button( "Push Me!");
17|        textfield = new TextField( "HELLO, WORLD!!");
18|        scrollbar = new Scrollbar( Scrollbar.HORIZONTAL, 10, 5, 0, 100);
19|        choice = new Choice();
20|        
21|        // チョイスに項目を追加
22|        choice.add("chick");
23|        choice.add("Joh");
24|        choice.add("tomo");
25|
26|        // レイアウトを設定
27|        this.setLayout( new GridLayout( 2,3));
28|
29|        // コンポーネントをアプレットのコンテナに追加
30|        this.add( label);
31|        this.add( button);
32|        this.add( textfield);
33|        this.add( scrollbar);
34|        this.add( choice);
35|    }
36|}

GridLayout クラスのオブジェクトを作成するときに引数にグリッド（格子）の行と列の数を指定できます。いまは 2, 3 と指定したので２行３列の格子になります。

Sample27の実行結果は次のようになります。

図 30: Sample27 実行結果

setLayout() の引数として指定できるレイアウトクラスの主なものを表に挙げておきます。

表 11: 主なレイアウト

アプレットのデフォルトのレイアウトはFlowLayoutです。本書で使うことが多いのは、BorderLayout および GridLayout です。GridLayoutは上で挙げたように格子状の配置になります。

BorderLayout についても説明しておきましょう。BorderLayoutはコンテナを図31のように分割し、それぞれの領域をNORTH, WEST, SOUTH, EAST, CENTER と呼びます。

図 31: BorderLayout (概念図)

私たちはコンポーネントをどこに配置するかを、このNORTH, WEST, SOUTH, EAST, CENTERというワードを使って指定することができます。例を見てみることにしましょう。5つのボタンをそれぞれの位置に配置するプログラムを書いてみます。

01|/* <applet code="Sample28.class" width="150" height="150"></applet> */
02|import java.applet.Applet;
03|import java.awt.*;
04|
05|public class Sample28 extends Applet{
06|    public void init(){
07|        // レイアウトを設定
08|        this.setLayout( new BorderLayout());
09|        
10|        // コンポーネントを追加
11|        this.add( new Button("NORTH"), BorderLayout.NORTH);
12|        this.add( new Button("WEST"), BorderLayout.WEST);
13|        this.add( new Button("SOUTH"), BorderLayout.SOUTH);
14|        this.add( new Button("EAST"), BorderLayout.EAST);
15|        this.add( new Button("CENTER"), BorderLayout.CENTER);
16|    }
17|}

8行目でレイアウトをBorderLayoutに設定しています。そして11行目から15行目でコンポーネントを追加していますが、追加の際に使うadd() メソッドの引数に追加位置を表す定数が増えていることに注意して下さい。BorderLayout ではこのようにして位置を指定することができます。

Sample28の実行結果は図32のようになります。

図 32: Sample28の実行結果