GUIアプリ②レイアウト
GUIアプリの連載の続きです。
今回は、レイアウトについてです。
ボタンやコンボボックスなどをコンポーネントと呼ぶのですが、
それを配置する方法について学んでいきたいと思います。
■レイアウトの種類を示します。
# | レイアウト種別 | 説明 |
1 | ボーダーレイアウト(BorderLayout) | CENTER、NORTH、SOUTH、WEST、EASTにコンポーネントを配置します。 |
2 | フローレイアウト(FlowLayout) | 水平方向にコンポーネントを配置します。 |
3 | ボックスレイアウト(BoxLayout) | X軸、Y軸方向にコンポーネントを配置します。 |
4 | グリッドレイアウト(GridLayout) | 行数、列数を指定してコンポーネントを配置します。 |
■Javaソース資源
# | ファイル名 | 概要 | 修正/新規 |
1 | GuiVariousLayout.java | フレームクラス | 新規 |
■作成手順
# | 作成手順 | 備考 |
1 | Javaプロジェクトの作成 | プロジェクト名:GuiVariousLayout |
2 | Javaソースの作成 | ・クラスの作成 ・メイン ・コンストラクタ ・アクションパフォームド |
#1 Javaプロジェクトの作成
#2 Javaソースの作成
継承元クラスを前回と同じくJFrameクラスを選択します。
Actionistenerインターフェイスも前回と同様に追加します。
クラス名は、GuiVariousLayoutにします。
実装されていないメソッドがあるので、エラーになっています。
クラス名にカーソルを合わせると、このエラーメッセージが表示されるので、
「実装されていないメソッドの追加」をクリックします。
行数 | 説明 |
16 | クラス名:GuiVariousLayout 継承元クラス名:JFrame(GUIのフレームを作成できるクラスです) 継承元インターフェイス:ActionListener(イベントを受け取ることのできるインターフェイスです) |
18 | ボーダーレイアウト表示用のボタンのインスタンス作成 |
19 | フローレイアウト表示用のボタンのインスタンス作成 |
20 | BOXレイアウトX軸表示用のボタンのインスタンス作成 |
21 | BOXレイアウトY軸表示用のボタンのインスタンス作成 |
22 | ボタン5のインスタンス作成(おまけです) |
23 | ボタン6のインスタンス作成(おまけです) |
24 | ボーダーレイアウト用ダイアログのインスタンス作成 ※ダイアログは業界用語かもしれないですが、子画面と思っていただいて大丈夫です。 |
25 | フローレイアウト用ダイアログのインスタンス作成 |
26 | BOXレイアウトX軸用ダイアログのインスタンス作成 |
27 | BOXレイアウトY軸用ダイアログのインスタンス作成 |
行数 | 説明 |
29 | メソッド名:GuiVariousLayout(コンストラクタ) |
32 | getContentPane()は、自身のフレームのコンテンツ・ペインの取得の意味です。 getContentPane().setLayout(new GridLayout(2,3))は、自身のフレームのコンテンツ・ペインのレイアウトをグリッド(2行、3列)に設定します。 |
33~38 | ボタン1~6を自身のフレームのコンテンツ・ペインに配置します。 |
40~45 | ボタン1~6をアクションリスナーに登録 |
47 | 自身のフレームの画面の右上にある「×」ボタンで閉じれるように設定しています。 |
48 | 自身のフレームのサイズを幅500ピクセル、高さ300ピクセルに設定しています。 |
49 | 自身のフレームを表示しています。 |
52~55 | メインメソッドです。コンストラクタの呼び出しのみ行っています。 |
行数 | 説明 |
57 | オーバーライドのアノテーションになります。 |
58 | メソッド名:actionPerformed(イベント発生時に呼びされるメソッドになります) 引数:ActionEvent e(イベントの判別に利用します) |
60 | e.getSource()とJButton1か判別しています。 |
62~66 | jDaialog1(ダイアログ)に、ボーダーレイアウト方式でボタンを配置しています。 |
67 | jDaialog1(ダイアログ)サイズを幅300ピクセル、高さ200ピクセルに設定しています。 |
68 | jDaialog1(ダイアログ)を表示します。 |
行数 | 説明 |
70 | e.getSource()とJButton2か判別しています。 |
72 | jDaialog2(ダイアログ)に、フローレイアウト方式でボタンを配置しています。 |
73~75 | jDaialog2(ダイアログ)に、Flow1~3ボタンを配置しています。 |
67 | jDaialog2(ダイアログ)サイズを幅300ピクセル、高さ200ピクセルに設定しています。 |
68 | jDaialog2(ダイアログ)を表示します。 |
行数 | 説明 |
79 | e.getSource()とJButton3か判別しています。 |
81 | jDaialog3(ダイアログ)に、BOX X軸レイアウト方式でボタンを配置しています。 |
83~85 | jDaialog3(ダイアログ)に、BOX X軸1~3ボタンを配置しています。 |
86 | jDaialog3(ダイアログ)サイズを幅300ピクセル、高さ200ピクセルに設定しています。 |
87 | jDaialog3(ダイアログ)を表示します。 |
行数 | 説明 |
89 | e.getSource()とJButton4か判別しています。 |
91 | jDaialog4(ダイアログ)に、BOX Y軸レイアウト方式でボタンを配置しています。 |
93~95 | jDaialog4(ダイアログ)に、BOX Y軸1~3ボタンを配置しています。 |
96 | jDaialog4(ダイアログ)サイズを幅300ピクセル、高さ200ピクセルに設定しています。 |
97 | jDaialog4(ダイアログ)を表示します。 |
行数 | 説明 |
99 | e.getSource()とJButton5か判別しています。 |
100~101 | 「ボタン5が押されました」のメッセージダイアログを表示します。 |
103 | e.getSource()とJButton5か判別しています。 |
104~105 | 「ボタン5が押されました」のメッセージダイアログを表示します。 |
ここまでできれば、準備完了です。では実行してみましょう。
起動画面です。これは2行、3列でグリッド配置できています。
ボーダーレイアウトボタンを押下します。東西南北、中央と5つボタンを表示します。
フローレイアウトボタンを押下します。
BOXレイアウトX軸ボタンを押下します。
BOXレイアウトY軸ボタンを押下します。
ボタン5を押下します。
ボタン6を押下します。
ここまで表示できれば成功です!お疲れ様でした!
ボタン5とボタン6はおまけでした。
グリッドのボタン数をどうしても2行、3列にしたかったため、追加させて頂きました。
■ソースコードのコピーペースト用に記載します。
GuiVariousLayout.java
package app;
import java.awt.BorderLayout;
import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.awt.HeadlessException;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JDialog;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
public class GuiVariousLayout extends JFrame implements ActionListener {
JButton jButton1 = new JButton("ボーダーレイアウト");
JButton jButton2 = new JButton("フローレイアウト");
JButton jButton3 = new JButton("BOXレイアウトX軸");
JButton jButton4 = new JButton("BOXレイアウトY軸");
JButton jButton5 = new JButton("ボタン5");
JButton jButton6 = new JButton("ボタン6");
JDialog jDialog1 = new JDialog(this,"ボーダーレイアウト");
JDialog jDialog2 = new JDialog(this,"フローレイアウト");
JDialog jDialog3 = new JDialog(this,"BOXレイアウトX軸");
JDialog jDialog4 = new JDialog(this,"BOXレイアウトY軸");
public GuiVariousLayout() throws HeadlessException {
// TODO 自動生成されたコンストラクター・スタブ
//グリッド方式(2行、3列)でボタンの配置
getContentPane().setLayout(new GridLayout(2,3));
getContentPane().add(jButton1);
getContentPane().add(jButton2);
getContentPane().add(jButton3);
getContentPane().add(jButton4);
getContentPane().add(jButton5);
getContentPane().add(jButton6);
//ボタンのイベントをリスナに登録
jButton1.addActionListener(this);
jButton2.addActionListener(this);
jButton3.addActionListener(this);
jButton4.addActionListener(this);
jButton5.addActionListener(this);
jButton6.addActionListener(this);
//フレーム自身の設定
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(500,300);
setVisible(true);
}
public static void main(String[] args) {
// TODO 自動生成されたメソッド・スタブ
new GuiVariousLayout();
}
@Override
public void actionPerformed(ActionEvent e) {
// TODO 自動生成されたメソッド・スタブ
if (e.getSource()==jButton1) {
//ボーダーレイアウトの配置
jDialog1.getContentPane().add(BorderLayout.CENTER,new JButton("CENTER"));
jDialog1.getContentPane().add(BorderLayout.WEST,new JButton("WEST"));
jDialog1.getContentPane().add(BorderLayout.EAST,new JButton("EAST"));
jDialog1.getContentPane().add(BorderLayout.NORTH,new JButton("NORTH"));
jDialog1.getContentPane().add(BorderLayout.SOUTH,new JButton("SOUTH"));
jDialog1.setSize(300,200);
jDialog1.setVisible(true);
}
else if(e.getSource()==jButton2) {
//フローレイアウトの配置
jDialog2.getContentPane().setLayout(new FlowLayout());
jDialog2.getContentPane().add(new JButton("Flow1"));
jDialog2.getContentPane().add(new JButton("Flow2"));
jDialog2.getContentPane().add(new JButton("Flow3"));
jDialog2.setSize(300,200);
jDialog2.setVisible(true);
}
else if(e.getSource()==jButton3) {
//BOXレイアウトX軸の配置
jDialog3.getContentPane().setLayout(
new BoxLayout(jDialog3.getContentPane(),BoxLayout.X_AXIS));
jDialog3.getContentPane().add(new JButton("BOX X軸1"));
jDialog3.getContentPane().add(new JButton("BOX X軸2"));
jDialog3.getContentPane().add(new JButton("BOX X軸3"));
jDialog3.setSize(300,200);
jDialog3.setVisible(true);
}
else if(e.getSource()==jButton4) {
//BOXレイアウトY軸の配置
jDialog4.getContentPane().setLayout(
new BoxLayout(jDialog4.getContentPane(),BoxLayout.Y_AXIS));
jDialog4.getContentPane().add(new JButton("BOX Y軸1"));
jDialog4.getContentPane().add(new JButton("BOX Y軸2"));
jDialog4.getContentPane().add(new JButton("BOX Y軸3"));
jDialog4.setSize(300,200);
jDialog4.setVisible(true);
}
else if(e.getSource()==jButton5) {
JOptionPane.showMessageDialog(this, "ボタン5が押されました","information",
JOptionPane.INFORMATION_MESSAGE);
}
else if(e.getSource()==jButton6) {
JOptionPane.showMessageDialog(this, "ボタン6が押されました","information",
JOptionPane.INFORMATION_MESSAGE);
}
}
//public GuiVariousLayout(GraphicsConfiguration gc) {
//super(gc);
// TODO 自動生成されたコンストラクター・スタブ
//}
//public GuiVariousLayout(String title) throws HeadlessException {
//super(title);
// TODO 自動生成されたコンストラクター・スタブ
//}
//public GuiVariousLayout(String title, GraphicsConfiguration gc) {
//super(title, gc);
// TODO 自動生成されたコンストラクター・スタブ
//}
}