GUI - MIG Layout

Hallo Community,

ich möchte gerne eine Oberfläche mithilfe des MIG-Layouts zusammenbasteln. Bin mit dem MIG-Layout noch nicht so vertraut…
Leider entsteht beim Vergrößern des Fensters eine Lücke auf der rechten Seite. Wie im Bild zusehen ist, möchte ich gerne diese Komponenten zentrieren sodass nur links und rechts
Lücken beim Vergrößern enstehen.

Hier ist mein Quellcode zu der GUI:


import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

import net.miginfocom.swing.MigLayout;

public class TestGUI extends JFrame {
	
	public static final Font FONT_HEADER = new Font("Arial", Font.PLAIN, 24);
	public static final Font FONT_NORMAL = new Font("Arial", Font.PLAIN, 18);
	
	public TestGUI() {
		initFrame();
		initFrameContent();
		
		setVisible(true);
	}
	
	private void initFrameContent() {
		JPanel panel = new JPanel();
		panel.setLayout(new MigLayout("insets 0"));

		// TOP Panel
		JPanel top = new JPanel();
		top.setBackground(Color.BLACK);
		top.setLayout(new MigLayout());
		
		JLabel title = new JLabel("Top Panel");
		title.setForeground(Color.WHITE);
		title.setFont(FONT_HEADER);
		top.add(title, "gap top 10, gap bottom 10, span, align center, wrap");
		
		JLabel username = new JLabel("Username: ");
		username.setForeground(Color.WHITE);
		username.setFont(FONT_NORMAL);
		top.add(username, "split, align center");
		
		JTextField fieldUsername = new JTextField(20);
		fieldUsername.setFont(FONT_NORMAL);
		top.add(fieldUsername, "growx, pushx,  align center");
		
		JLabel host = new JLabel("Host: ");
		host.setForeground(Color.WHITE);
		host.setFont(FONT_NORMAL);
		top.add(host, "gap left 30, split,  align center");
		
		JTextField fieldHost= new JTextField(20);
		fieldHost.setFont(FONT_NORMAL);
		top.add(fieldHost, "growx, pushx,  align center");
		
		JButton changeHost = new JButton("Change");
		changeHost.setBackground(Color.WHITE);
		changeHost.setFont(FONT_NORMAL);
		changeHost.setFocusPainted(false);
		top.add(changeHost, "gap left 20");
		
		panel.add(top, "span, wrap");
		
		// TODO CENTER PANEL
		// TODO BOTTOM PANEL
		
		this.add(panel);
	}
	
	private void initFrame() {
		this.setTitle("GUI");
		this.setSize(800, 600);
		this.setDefaultCloseOperation(EXIT_ON_CLOSE);
		this.setResizable(true);
		this.setMinimumSize(new Dimension(600, 400));
		this.setLocationRelativeTo(null);
		this.setLayout(new BorderLayout());
	}
	
	public static void main(String[] args) {
		new TestGUI();
	}	
}```

kurzer Blick ins Layout, in die Befehle,
ich tippe auf:

panel.add(top, „span, wrap“);

hier muss noch ein grow rein?

edit:
aber das würde wohl alles mehr ausbreiten, kein Rand links/ rechts
ob es für Rand links/ rechts was fertiges gibt? kann ich nun leider nicht sagen,
wenn innerhalb von top gelöst, ist das grow für top wohl dennoch nötig,

sonst evtl. top in eine Zeile mit links und rechts leeres Label, diese beiden bekommen grow, top nicht…,
oder etwas mit ‚center‘ für top?

Generell empfehle ich Layouts durch die Verschachtelung einfacher Layouts zu erreichen (etwa BorderLayout), anstatt alles auf einen Schlag in einem komplexeren Layout machen zu wollen. Meist lassen sich Anordnungsprobleme dann leicht lokalisieren und dort recht einfach beheben, ohne eventuell alles andere zu beeinflussen.

@SlaterB Danke das mit den Labels hat funktioniert. :slight_smile: Habe aber stattdessen JPanels genommen. Auch wenn es sicherlich keine schöne Variante ist es so zu umgehen.
@Crian Das war auch nur zur Testzwecken gedacht. Habe noch nie wirklich mit dem MIG-Layout gearbeitet und wollte eine GUI mal komplett mit dem MIG-Layout gestalten…