awt, swingを使用し、ログイン画面を作成したいがLayoutがうまくいきません。。

前提

javaのawt, swingを使用して、ログイン画面を作成しています。
タイトルにもある通り、Layoutがうまくいかず、詰まってしまいました。

実現したいこと

logoの下に、ID・PASSWORDの入力フォームが表示されるようにしたい。

発生している問題

logoの下に、ID・PASSWORDの入力フォームが表示したいが、何も出てこない状態。

試したこと

import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.Container;
import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JDialog;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.JTextField;

public class Test2 extends JFrame {

    CardLayout main_l_card;
    JLabel order_lb_info;

 public Test2() {
	 
     this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
     this.setTitle("ログイン画面");
     this.setSize(800,500);
     this.setLayout(new BorderLayout());

     add(new Login());

     setVisible(true);



}

 class Login extends JPanel {
     Login() {
    	 //ロゴ
    	 JLabel logo = new JLabel(new ImageIcon("./res/main.png"));
         this.add(logo, BorderLayout.NORTH);
         
         
         JPanel info = new JPanel();
         info.setLayout(new GridLayout(1,4));
         
         //入力フォーム１
         info.add(new JLabel("ID"));
         JTextField id = new JTextField("", 10);
         info.add(id);
         
         //入力フォーム2
         info.add(new JLabel("PASSWORD"));
         JPasswordField pw = new JPasswordField("",10);
         info.add(pw);                           
         
         setVisible(true);
     }

 }


 public static void main(String[] args) {
     new Test2();

 }
}

GridLayoutや、BorderLayoutなどいろいろ変えて試してみましたが、並列に表示されてしまったりと、うまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

java SE 1.8を使用。

変更後

入力のフォームは表示されるようになったが、logoの下には表示されない。

import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.Container;
import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JDialog;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.JTextField;

public class Test2 extends JFrame {

    CardLayout main_l_card;
    JLabel order_lb_info;

 public Test2() {
	 
     this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
     this.setTitle("ログイン画面");
     this.setSize(800,500);
     this.setLayout(new BorderLayout());

     add(new Login());

     setVisible(true);

}

 class Login extends JPanel {
     Login() {
    	 //ロゴ
    	 JLabel logo = new JLabel(new ImageIcon("./res/main.png"));
         this.add(logo, BorderLayout.NORTH);
         
         JPanel info = new JPanel();
         info.setLayout(new GridLayout(1,5));
         this.add(info, BorderLayout.CENTER);                                 //追加
         
         //１
         info.add(new JLabel("ID"));
         //2
         JTextField id = new JTextField("", 10);
         info.add(id);
         //3
         info.add(new JLabel("PASSWORD"));
         //4
         JPasswordField pw = new JPasswordField("",10);
         info.add(pw);
         //5
         //Button追加予定
         setVisible(true);
     }

 }



 public static void main(String[] args) {
     new Test2();

 }
}

このように、入力フォームが大きくなってしまう。

行動規範の内容に同意します

回答1件

ベストアンサー

Login クラスのコンストラクタで、ロゴは this.add(logo, BorderLayout.NORTH); としていますが、JTextField や JPasswordField が add されているパネル = info を this に add している個所が見当たりません。

info.add(pw); の後に this.add(info, BorderLayout.CENTER); としてみては如何でしょう。

GridBagLayout を使って想像でボタンまで配置してみました。

java
1import java.awt.*;
2
3import javax.swing.*;
4
5public class Test2Frame extends JFrame {
6  public static void main(String[] args) {
7    SwingUtilities.invokeLater(()-> new Test2Frame().setVisible(true));
8  }
9
10  public Test2Frame() {
11    super("ログイン画面");
12    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
13    //this.setSize(800,500);
14
15    add(new LoginPanel());
16    pack();
17  }
18
19  private static class LoginPanel extends JPanel {
20    LoginPanel() {
21      super(new GridBagLayout());
22      setBorder(BorderFactory.createEmptyBorder(0,0,20,0));
23
24      GridBagConstraints gbc = new GridBagConstraints();
25
26      //ロゴ
27      gbc.gridx = 0;
28      gbc.gridy = 0;
29      gbc.gridwidth = 2; //幅2つを使う
30      add(new JLabel(new ImageIcon("./res/main.png")), gbc);
31      //空白
32      gbc.gridy ++;
33      gbc.gridwidth = 1; //幅1つを使う
34      add(Box.createVerticalStrut(20), gbc);
35      //１
36      gbc.gridx = 0;
37      gbc.gridy ++;
38      gbc.weightx = 1; //コンテナが広い時の空白の分配率
39      gbc.anchor = GridBagConstraints.EAST; //右詰め
40      gbc.insets = new Insets(0, 0, 0, 10); //余白
41      add(new JLabel("ID"), gbc);
42      //2
43      gbc.gridx ++;
44      JTextField idField = new JTextField("", 10);
45      gbc.anchor = GridBagConstraints.WEST; //左詰め
46      gbc.insets = new Insets(0, 0, 0, 0); //余白指定無し(デフォルト)
47      add(idField, gbc);
48      //空白
49      gbc.gridy ++;
50      add(Box.createVerticalStrut(10), gbc);
51      //3
52      gbc.gridx = 0;
53      gbc.gridy ++;
54      gbc.anchor = GridBagConstraints.EAST; //右詰め
55      gbc.insets = new Insets(0, 0, 0, 10); //余白
56      add(new JLabel("PASSWORD"), gbc);
57      //4
58      gbc.gridx ++;
59      gbc.anchor = GridBagConstraints.WEST; //左詰め
60      gbc.insets = new Insets(0, 0, 0, 0); //余白指定無し
61      JPasswordField passwordField = new JPasswordField("",10);
62      add(passwordField, gbc);
63      //空白
64      gbc.gridy ++;
65      add(Box.createVerticalStrut(20), gbc);
66      //5
67      gbc.gridx = 0;
68      gbc.gridy ++;
69      gbc.anchor = GridBagConstraints.CENTER; //中央(デフォルト)
70      JButton cancelButton = new JButton("CANCEL");
71      add(cancelButton, gbc);
72
73      gbc.gridx ++;
74      JButton loginButton = new JButton("LOGIN");
75      add(loginButton, gbc);
76    }
77  }
78}

(ロゴ画像は質問の画像から切り取っているので大きさが違うかもしれません。)

投稿2022/11/15 08:42

編集2022/11/16 07:36

jimbe

総合スコア13320

ktmr

2022/11/15 09:03

よろしければ、補足説明お願いいたします。

ktmr

2022/11/15 10:08

コメントありがとうございます。すみません。説明の意味が理解できませんでした。どのようにして、thisにaddすればいいのでしょうか。参考にさせてください。

ktmr

2022/11/15 10:32

ありがとうございます。理解できました。 infoをthisにaddして、入力フォームが表示されるようにはなったのですが、logoの下に表示化されない状態です。 Layoutの問題なのでしょうか。変更後の情報を追加いたしました。

jimbe

2022/11/15 11:22 編集

JPanel のデフォルトのレイアウトは FlowLayout (横に並べるやつ)です。 Login のコンストラクタの最初で Login() { super(new BorderLayout()); //追加 : } としてみては。 (JPanel はコンストラクタでレイアウトマネージャを指定出来ます。 info の方も JPanel info = new JPanel(new GridLayout(1,5)); //info.setLayout(new GridLayout(1,5)); //↑のようにしていればこの行は不要と出来ます。 ) それと合わせてですが、 JPanel や JFrame 等の swing/AWT のコンポーネントを継承した時は基本的にコンストラクタの先頭で super( ※パラメータはそれぞれ ) を呼ぶようにしてください。 (ちなみに JFrame のコンストラクタでは文字列を指定することでタイトルの指定が出来ます。 public Test2() { super("ログイン画面"); //this.setTitle("ログイン画面"); //super でやっていれば不要 : } )

ktmr

2022/11/15 12:18

ありがとうございます。試してみたところ、logoの下に入力フォームが来るようになりました。ですが、その入力フォームが画像のように大きくなってしまって、どのように変更すればよいでしょうか？

jimbe

2022/11/15 12:45

GridLayout は、領域を行・列で分割した領域いっぱいに拡大するのが仕様です。 https://docs.oracle.com/javase/jp/8/docs/api/java/awt/GridLayout.html 失礼ながら、もしかしてご希望の形になるまでずっと続けるおつもりでしょうか…。どのような並びにしたいのか、手書きでも絵を書いて頂いたほうが早いと思います。

ktmr

2022/11/15 12:54

仕様だったのですね！教えていただきありがとうございます。何度も真摯に教えてくださり、ありがとうございました。FlowLayoutを使用してみたいと思います。

jimbe

2022/11/15 13:31

使い方が難しいものになりますが、その分個々の配置とか工夫が出来る GridBagLayout というのもあります。 https://docs.oracle.com/javase/jp/8/docs/api/java/awt/GridBagLayout.html https://www.javadrive.jp/tutorial/gridbaglayout/

ktmr

2022/11/16 08:28

ここまでやっていただいて、本当にありがとうございます... ぜひ参考にさせていただき、今後も勉強に精進していきたいと思います！！

行動規範の内容に同意します