学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Java | 35 | レイアウトマネージャーを利用したプログラム

<<前  [TOP]  次>>


レイアウトマネージャーはコンテナにコンポーネントをどのように配置するかを設定するためのものです。
AWTのレイアウトマネージャーは以下のように5種類あり、java.aet.LayoutManagerインターフェイスを実装しています。

FlowLayoutコンポーネントを左から右、上から下に配置
Panel, Appletの初期設定レイアウトマネージャー
BorderLayoutコンポーネントを上下左右・中央に配置
Window, Dialog, Frameの初期設定レイアウトマネージャー
CardLayoutコンポーネントを1つだけ表示して、コンポーネントの切り替えで表示変更を行う。
GridLayoutコンポーネントをグリッド(格子)に配置
GridBagLayout多くの「制約」をすることにより、コンポーネントをグリッドに配置


レイアウトの設定は以下のように行います。


1.レイアウトマネージャーのクラスからインスタンスを生成
2.コンテナにsetLayout(1で生成したインスタンス);でレイアウトを設定

Panel panel = new Panel();
BorderLayout layout = new BorderLayout();
panel.setLayout(layout);

//あるいはレイアウトの設定だけなら以下でも良いです。
//panel.setLayout(new BorderLayout());



「FlowLayout」は、インスタンス生成では何も指定しなければ「5単位の垂直・水平間隔で中央揃え」が設定されます。
間隔と配置(「RIGHT」「LEFT」「CENTER」)は生成時にも指定できますし、setHgap(int),setVgap(int),setAlignment(int)でも設定可能です。


「BorderLayout」は通常、「NORTH」「SOUTH」「WEST」「EAST」「CENTER」で上下左右・中央を設定します。
間隔の指定を行うことも可能です。


CardLayoutはコンポーネントを配置したコンテナを指定することで表示コンポーネントを制御することが出来ます。

Panel panel = new Panel();
CardLayout layout = new CardLayout();
panel.setLayout(layout);
layout.first(panel);    //コンテナに配置された最初のコンポーネントを表示
layout.next(panel);    //次のコンポーネントに切り替え。最後なら最初を表示
layout.previous(panel);    //前のコンポーネントに切り替え。最初なら最後を表示
layout.last(panel);    //最後のコンポーネントを表示

また「addLayoutComponent(Component comp, Object constraints)」でコンポーネントを指定(constraintsは文字列を指定)しておくと、「show(Container parent, String name)」でコンテナと設定した文字列を指定することですぐに対応したコンポーネントを表示できます。
CardLayoutも間隔の設定が可能です。


「GridLayout」は格子状にコンポーネントを配置します。
指定された行列の値で均等に配置されます。

Panel panel = new Panel();
GridLayout layout = new GridLayout(4, 3);    //4行×3列でコンポーネントを配置
panel.setLayout(layout);

実際には行指定が0以外の場合、列数はコンポーネントの総数から自動的に決定されます。
GridLayout(0, 4)のような生成をした場合は列数は4で、行数は自動決定ということになります。
GridLayout生成時に引数を指定しないと1列の配置となります。
間隔を指定することも出来ます。


「GridBagLayout」は、大きさの異なるコンポーネントを柔軟に配置します。
イコンポーネントを均等に配置された1つ以上の枠(セル)を配置していきます。
配置するルールはjava.awt.GridBagConstraintsで定義されているフィールドで表します。
設定した制約はGridBagLayoutの「setConstraints(Component, GridBagConstraints)」で配置するコンポーネントに反映させます。

Button button = new Button("ボタン");
Panel panel = new Panel();
GridBagLayout layout = new GridBagLayout();    //レイアウトの設定

//配置の制約を指定するために使用
GridBagConstraints gbc = new GridBagConstraints();
 panel.setLayout(layout);

//配置するボタンの制約を設定
gbc.gridwidth = 1;
layout.setConstraints(button, gbc);

//パネルに配置
panel.add(button);

GridConstraintsの制約例を挙げておきます。

フィールド名機能
gridx
 gridy
先導位置(通常は左上)を設定します。
規定値はRELATIVEで追加されるコンポーネントはこの設定値に沿って配置されます。
gridwidth
  gridheight
1行(1列)あたりのセル数を指定します(規定値は1)。
コンポーネントが行・列の最後の場合はREMAINDERを設定します。
また次のコンポーネントで行・列が終了するならRELATIVEを設定します。
fillコンポーネントの表示領域の方が推奨サイズよりも大きい場合にサイズの変更を行うかどうかを設定します。
NONE(変更しない、規定値)。
HORIZONTAL(幅だけ表示領域いっぱいにする)。
VERTICAL(高さだけ表示領域いっぱいにする)。
BOTH(幅・高さとも表示領域いっぱいにする)。
ipadx
  ipady
コンポーネントの最小サイズに追加する値。
例えば幅に設定した場合、「最小の幅+(ipad*2)」ピクセルになります。
高さも同様です。
insetsコンポーネントと表示領域の間の最小の空間を指定します。
anchorコンポーネントが表示領域より小さい場合にどのように配置するかの設定です。
絶対値(NORTH, SOUTH, WEST, EAST, NORTHWEST, NORTHEAST, SOUTHWEST, SOUTHEAST, CENTER)と、
相対値(PAGE_START, PAGE_END, LINE_START, LINE_END, FIRST_LINE_START, FIRST_LINE_END, LAST_LINE_START, LAST_LINE_END)があります。
weightx
  weighty
同じ行・列に複数コンポーネントがあってサイズの違いなどから余分なスペースが出た場合の分配方法を指定します。
値が大きいほど多くのスペースを分配することになります。
ウェイトを指定しない場合は余分なスペースは分配されません。


以下のサンプルプログラムを作成してみましょう。


【AwtFlowPanel.java】

/** 
* FlowLayout(Panelの初期レイアウト)のテスト
*/

import java.awt.*;

public class AwtFlowPanel extends Panel {

	private final int MAX_NUM = 12;		//ボタンの数

	/**コンストラクタ*/
	public AwtFlowPanel() {

		Button[] buttons = new Button[MAX_NUM];

		// Panelの初期設定レイアウトマネージャーなので特に指定しない

		for (int i=0; i<MAX_NUM; i++) {

			buttons[i] = new Button("Button" + i);
			buttons[i].setBackground(Color.red);
			buttons[i].setForeground(Color.white);
			add(buttons[i]);
		}
	}

	/**main()*/
	public static void main(String[] args) {

		AwtFlowPanel panel = new AwtFlowPanel();

		MyFrame frame = new MyFrame("FlowLayout Test");
		frame.add(panel, "Center");
		frame.pack();
		frame.setVisible(true);
	}
}



では早速実行してみましょう。
前回作成した[MyFrame.java]を利用していますのでクローズボタンを使って終了できます。
ボタンが12個横に表示されます。


AwtFlowPanel.java実行結果
AwtFlowPanel.java実行結果


表示されるフレーム
表示されるフレーム


以下のサンプルプログラムを作成してみましょう。


【AwtBorderPanel.java】

/**
*BorderLayoutのテスト
*/

import java.awt.*;

public class AwtBorderPanel extends Panel {

	private final int MAX_NUM = 5;	//ボタンの数

	/**コンストラクタ*/
	public AwtBorderPanel() {

		Button[] buttons = new Button[MAX_NUM];
		BorderLayout layout = new BorderLayout();	//レイアウトの生成
		setLayout(layout);				//Panelにレイアウトを設定
		
		for(int i=0; i<MAX_NUM; i++) {

			buttons[i]= new Button("Button" + i);
			buttons[i].setBackground(Color.red);
			buttons[i].setForeground(Color.white);
		}

		//ボタンの配置設定
		add(buttons[0], "West");
		add(buttons[1], "North");
		add(buttons[2], "East");
		add(buttons[3], "South");
		add(buttons[4],"Center");
	}

	/**main()*/
	public static void main(String[] args) {

		AwtBorderPanel panel = new AwtBorderPanel();

		MyFrame frame = new MyFrame("BorderLayout Test");
		frame.add(panel, "Center");
		frame.pack();
		frame.setVisible(true);
	}
}



では早速実行してみましょう。
前回作成した[MyFrame.java]を利用していますのでクローズボタンを使って終了できます。
ボタンが東西南北センターに分かれて表示されます。


AwtBorderPanel.java実行結果
AwtBorderPanel.java実行結果


表示されるフレーム
表示されるフレーム


以下のサンプルプログラムを作成してみましょう。


【AwtCardPanel.java】

/**
*CardLayoutのテスト
*/

import java.awt.*;
import java.awt.event.*;

public class AwtCardPanel extends Panel implements ActionListener {

	private final int MAX_NUM = 12;	//ボタンの数

	/**コンストラクタ*/
	public AwtCardPanel() {

		Button[] buttons = new Button[MAX_NUM];
		CardLayout layout = new CardLayout();	//レイアウトの生成
		setLayout(layout);				//Panelにレイアウトを設定

		for(int i=0; i<MAX_NUM; i++) {

			buttons[i]= new Button("Button" + i);
			buttons[i].setBackground(Color.red);
			buttons[i].setForeground(Color.white);
			buttons[i].addActionListener(this);	//イベントの通知登録
			add(buttons[i], "Button" + i);		//Panelへの配置
		}
	}

	/**ボタンのイベント処理*/
	public void actionPerformed(ActionEvent evt) {

		//次のカード(Button)に切り替え
		((CardLayout)getLayout()).next(this);
		//next()のほかに、first(),last(),previous()がある
	}
	
	/**main()*/
	public static void main(String[] args) {

		AwtCardPanel panel = new AwtCardPanel();

		MyFrame frame = new MyFrame("CardLayout Test");
		frame.add(panel, "Center");
		frame.setSize(400, 200);	//Frameの大きさを指定
		frame.setVisible(true);
	}
}



では早速実行してみましょう。
前回作成した[MyFrame.java]を利用していますのでクローズボタンを使って終了できます。
カードをめくっていくようなボタン配置で表示されます。
ボタンの数は全部で12個です。


AwtCardPanel.java実行結果
AwtCardPanel.java実行結果


表示されるフレーム
表示されるフレーム


以下のサンプルプログラムを作成してみましょう。


【AwtGridPanel.java】

/**
* GridLayoutのテスト
*/

import java.awt.*;

public class AwtGridPanel extends Panel {

	private final int MAX_NUM = 12;		//ボタンの個数

	/**コンストラクタ*/
	public AwtGridPanel() {
		Button[] buttons = new Button[MAX_NUM];

		//4列×3列。ただし、行が0以外のとき、列は自動的に決定する。
		GridLayout layout = new GridLayout(4, 3);
		setLayout(layout);	//Panelにレイアウトを設定

		for(int i=0; i<MAX_NUM; i++){
			buttons[i] = new Button("Button"+ i);
			buttons[i].setBackground(Color.red);
			buttons[i].setForeground(Color.white);
			add(buttons[i]);
		}
	}

	/** main() */
	public static void main(String[] args) {
		AwtGridPanel panel = new AwtGridPanel();

		MyFrame frame = new MyFrame("GridLayout Test");
		frame.add(panel, "Center");
		frame.pack();
		frame.setVisible(true);
	}
}



では早速実行してみましょう。
前回作成した[MyFrame.java]を利用していますのでクローズボタンを使って終了できます。
グリッドにボタンが配置され表示されます。
ボタンの数は12個です。


AwtGridPanel.java実行結果
AwtGridPanel.java実行結果


表示されるフレーム
表示されるフレーム


以下のサンプルプログラムを作成してみましょう。


【AwtGridBagPanel.java】

/**
* GridBagLayoutのテスト
*/

import java.awt.*;

public class AwtGridBagPanel extends Panel {

	private final int MAX_NUM = 5;	//ボタンの数

	/**コンストラクタ*/
	public AwtGridBagPanel() {

		Button[] buttons = new Button[MAX_NUM];

		GridBagLayout layout = new GridBagLayout();	//レイアウトの設定

		//レイアウトの制約を指定するために使用
		GridBagConstraints gbc = new GridBagConstraints();
		setLayout(layout);	//Panelにレイアウトを設定

		for (int i=0; i<MAX_NUM; i++) {

			buttons[i] = new Button("Button" + i);
			buttons[i].setBackground(Color.red);
			buttons[i].setForeground(Color.white);
		}

		//コンポーネントのサイズより表示領域が大きい場合は縦横埋める
		gbc.fill = GridBagConstraints.BOTH;

		//値1.0は同じ行(幅)、列(高さ)にある
		//他のコンポーネントの領域もセルで埋める
		//値0.0だと余白ができる
		gbc.weightx = 1.0;
		gbc.weighty = 1.0;

		//最終行であると設定(これで1行全てを使用)
		gbc.gridwidth = GridBagConstraints.REMAINDER;

		//制約をレイアウトに反映
		layout.setConstraints(buttons[0], gbc);
		add(buttons[0]);

		//上で最終行と指定されているので、次行での処理となる
		gbc.gridwidth = 1;	//1行
		gbc.gridheight = 2;	//2列

		//制約をレイアウトに反映
		layout.setConstraints(buttons[1], gbc);
		add(buttons[1]);

		gbc.gridwidth = GridBagConstraints.REMAINDER;	//最終行の指定
		gbc.gridheight = 1;		//1列

		//制約をレイアウトに反映
		layout.setConstraints(buttons[2], gbc);
		add(buttons[2]);

		gbc.gridwidth = 1;		//1行
		layout.setConstraints(buttons[3], gbc);
		add(buttons[3]);

		gbc.gridwidth = GridBagConstraints.REMAINDER;	//最終行
		layout.setConstraints(buttons[4], gbc);
		add(buttons[4]);
	}

	/**main()*/
	public static void main(String[] args) {

		AwtGridBagPanel panel = new AwtGridBagPanel();

		MyFrame frame = new MyFrame("GridBagLayout Test");
		frame.add(panel, "Center");
		frame.pack();
		frame.setVisible(true);
	}
}



では早速実行してみましょう。
前回作成した[MyFrame.java]を利用していますのでクローズボタンを使って終了できます。
グリッドにボタンが配置され表示されます。
ボタンの数は5個です。
指定した位置に様々な大きさで表示されます。


AwtGridBagPanel.java実行結果
AwtGridBagPanel.java実行結果


表示されるフレーム
表示されるフレーム


以下のサンプルプログラムを作成してみましょう。


【AwtLayoutTest.java】

/**
*レイアウト群のテスト
*/

import java.awt.*;

public class AwtLayoutTest {

	/**main()*/
	public static void main(String[] args) {

		AwtFlowPanel flowP = new AwtFlowPanel();
		AwtBorderPanel borderP = new AwtBorderPanel();
		AwtCardPanel cardP = new AwtCardPanel();
		AwtGridPanel gridP = new AwtGridPanel();
		AwtGridBagPanel gridBagP = new AwtGridBagPanel();

		MyFrame frame = new MyFrame("Layout Test");

		frame.add(flowP, "North");
		frame.add(borderP, "East");
		frame.add(cardP, "Center");
		frame.add(gridP, "West");
		frame.add(gridBagP, "South");
		frame.pack();
		frame.setVisible(true);
	}
}



では早速実行してみましょう。
前回作成した[MyFrame.java]を利用していますのでクローズボタンを使って終了できます。
このプログラムでは、上記で作成したプログラムを使用しています。
フレームの上にFlowPanel,左にBoderPanel,中央にCardPanel,右にGridPanel,下にGridBagPanelを配置します。


AwtLayoutTest.java実行結果
AwtLayoutTest.java実行結果


表示されるフレーム
表示されるフレーム


↓↓クリックして頂けると励みになります。


<<前  [TOP]  次>>