GUIアプリ②レイアウト

GUIアプリの連載の続きです。
今回は、レイアウトについてです。
ボタンやコンボボックスなどをコンポーネントと呼ぶのですが、
それを配置する方法について学んでいきたいと思います。

■レイアウトの種類を示します。

#レイアウト種別説明
1ボーダーレイアウト(BorderLayout)CENTER、NORTH、SOUTH、WEST、EASTにコンポーネントを配置します。
2フローレイアウト(FlowLayout)水平方向にコンポーネントを配置します。
3ボックスレイアウト(BoxLayout)X軸、Y軸方向にコンポーネントを配置します。
4グリッドレイアウト(GridLayout)行数、列数を指定してコンポーネントを配置します。

■Javaソース資源

#ファイル名概要修正/新規
1GuiVariousLayout.javaフレームクラス新規

■作成手順

作成手順備考
1Javaプロジェクトの作成プロジェクト名:GuiVariousLayout
2Javaソースの作成・クラスの作成
・メイン
・コンストラクタ
・アクションパフォームド

#1 Javaプロジェクトの作成

#2 Javaソースの作成

継承元クラスを前回と同じくJFrameクラスを選択します。

Actionistenerインターフェイスも前回と同様に追加します。

クラス名は、GuiVariousLayoutにします。

実装されていないメソッドがあるので、エラーになっています。
クラス名にカーソルを合わせると、このエラーメッセージが表示されるので、
「実装されていないメソッドの追加」をクリックします。

行数説明
16クラス名:GuiVariousLayout
継承元クラス名:JFrame(GUIのフレームを作成できるクラスです)
継承元インターフェイス:ActionListener(イベントを受け取ることのできるインターフェイスです)
18ボーダーレイアウト表示用のボタンのインスタンス作成
19フローレイアウト表示用のボタンのインスタンス作成
20BOXレイアウトX軸表示用のボタンのインスタンス作成
21BOXレイアウトY軸表示用のボタンのインスタンス作成
22ボタン5のインスタンス作成(おまけです)
23ボタン6のインスタンス作成(おまけです)
24ボーダーレイアウト用ダイアログのインスタンス作成
※ダイアログは業界用語かもしれないですが、子画面と思っていただいて大丈夫です。
25フローレイアウト用ダイアログのインスタンス作成
26BOXレイアウトX軸用ダイアログのインスタンス作成
27BOXレイアウトY軸用ダイアログのインスタンス作成

行数説明
29メソッド名:GuiVariousLayout(コンストラクタ)
32getContentPane()は、自身のフレームのコンテンツ・ペインの取得の意味です。
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(イベントの判別に利用します)
60e.getSource()とJButton1か判別しています。
62~66jDaialog1(ダイアログ)に、ボーダーレイアウト方式でボタンを配置しています。
67jDaialog1(ダイアログ)サイズを幅300ピクセル、高さ200ピクセルに設定しています。
68jDaialog1(ダイアログ)を表示します。

行数説明
70e.getSource()とJButton2か判別しています。
72jDaialog2(ダイアログ)に、フローレイアウト方式でボタンを配置しています。
73~75jDaialog2(ダイアログ)に、Flow1~3ボタンを配置しています。
67jDaialog2(ダイアログ)サイズを幅300ピクセル、高さ200ピクセルに設定しています。
68jDaialog2(ダイアログ)を表示します。

行数説明
79e.getSource()とJButton3か判別しています。
81jDaialog3(ダイアログ)に、BOX X軸レイアウト方式でボタンを配置しています。
83~85jDaialog3(ダイアログ)に、BOX X軸1~3ボタンを配置しています。
86jDaialog3(ダイアログ)サイズを幅300ピクセル、高さ200ピクセルに設定しています。
87jDaialog3(ダイアログ)を表示します。

行数説明
89e.getSource()とJButton4か判別しています。
91jDaialog4(ダイアログ)に、BOX Y軸レイアウト方式でボタンを配置しています。
93~95jDaialog4(ダイアログ)に、BOX Y軸1~3ボタンを配置しています。
96jDaialog4(ダイアログ)サイズを幅300ピクセル、高さ200ピクセルに設定しています。
97jDaialog4(ダイアログ)を表示します。
行数説明
99e.getSource()とJButton5か判別しています。
100~101「ボタン5が押されました」のメッセージダイアログを表示します。
103e.getSource()とJButton5か判別しています。
104~105「ボタン5が押されました」のメッセージダイアログを表示します。

ここまでできれば、準備完了です。では実行してみましょう。

起動画面です。これは2行、3列でグリッド配置できています。

ボーダーレイアウトボタンを押下します。東西南北、中央と5つボタンを表示します。

フローレイアウトボタンを押下します。

BOXレイアウトX軸ボタンを押下します。

BOXレイアウトY軸ボタンを押下します。

ボタン5を押下します。

ボタン6を押下します。

ここまで表示できれば成功です!お疲れ様でした!

ボタン5とボタン6はおまけでした。
グリッドのボタン数をどうしても2行、3列にしたかったため、追加させて頂きました。

☆まとめ☆ 今回は、GUIのレイアウトについて学びました。
ポイントとしては、以下の4種類のレイアウトを覚えていただけばと思います。
・ボーダーレイアウト(BorderLayout)
・フローレイアウト(FlowLayout)
・ボックスレイアウト(X軸、Y軸)(BoxLayout)
・グリッドレイアウト(GridLayout)

■ソースコードのコピーペースト用に記載します。

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 自動生成されたコンストラクター・スタブ
  //}
}

Follow me!