How do I center label and button?

user_14326162 0
Viewed 131

I want my Game to look like this:

but it wont and I don't know why.. everything just doesn't go in the places I want it to be.

Could someone help me? What am I doing wrong? It looks like this:

The color-changing isn't the problem.. its just where all the stuff is located.

package view;

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class WelcomeScreen extends JFrame{
    JButton button;
    JLabel label;
    ActionListener action;
    GridBagLayout gb = new GridBagLayout();

    public <button> WelcomeScreen(ActionListener action){
        JPanel panel = new JPanel();
        this.setSize(800,600);

        GridBagConstraints gcon = new GridBagConstraints();
        gcon.weightx = 1;
        gcon.weighty = 1;
        gcon.fill = GridBagConstraints.HORIZONTAL;
        gcon.insets = new Insets(5,5,5,5);

        button = new JButton("Start");
        button.setPreferredSize(new Dimension(200, 50));
        button.setFont(new Font("Arial", Font.PLAIN, 20 ));
        button.setBorder(BorderFactory.createEmptyBorder(2, 10, 2, 2));
        button.setHorizontalAlignment(SwingConstants.LEFT);

        label = new JLabel("Game");
        label.setPreferredSize(new Dimension(200, 50));
        label.setFont(new Font("Arial", Font.PLAIN, 60 ));

        this.action = action;
        panel.setBorder(BorderFactory.createEmptyBorder(20, 10, 20, 10));
        panel.setLayout(gb);
        //label
        gcon.gridx = 2;
        gcon.gridy = 0;
        //gcon.gridwidth = 4;
        //gcon.gridheight = 1;
        gb.setConstraints(label,gcon);
        panel.add(label);

        //button
        gcon.gridx = 2;
        gcon.gridy = 1;
        //gcon.gridwidth = 2;
        //gcon.gridheight = 1;
        gb.setConstraints(button,gcon);
        panel.add(button);
        this.add(panel,BorderLayout.CENTER);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setTitle("Start");
        this.setVisible(true);
        button.addActionListener(action);
    }
}
gridbaglayout layout-manager awt swing java
2 Answers

As I understand you want the label and the button to be centered in the frame. For this purpose do not set weightx and weighty since they will tell to layout manager to expand to the available space.

So remove

    gcon.weightx = 1;
    gcon.weighty = 1;

then, replace the following code

    //label
    gcon.gridx = 2;
    gcon.gridy = 0;
    //gcon.gridwidth = 4;
    //gcon.gridheight = 1;
    gb.setConstraints(label,gcon);
    panel.add(label);


    //button
    gcon.gridx = 2;
    gcon.gridy = 1;
    //gcon.gridwidth = 2;
    //gcon.gridheight = 1;
    gb.setConstraints(button,gcon);
    panel.add(button);

with this

    //label
    gcon.gridx = 0;
    gcon.gridy = 0;
    panel.add(label, gcon);

    //button
    gcon.gridx = 0;
    gcon.gridy = 1;
    panel.add(button, gcon);

Since no row and column has weight greater than 0 the layout manager will automatically place the label-button block in the middle.

Result

Complete code

package test;

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import java.awt.event.ActionListener;

import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingConstants;

public class WelcomeScreen extends JFrame{
    JButton button;
    JLabel label;
    ActionListener action;
    GridBagLayout gb = new GridBagLayout();



    public <button> WelcomeScreen(ActionListener action){
        JPanel panel = new JPanel();
        this.setSize(800,600);

        GridBagConstraints gcon = new GridBagConstraints();
        gcon.fill = GridBagConstraints.HORIZONTAL;
        gcon.insets = new Insets(5,5,5,5);

        button = new JButton("Start");
            button.setPreferredSize(new Dimension(200, 50));
            button.setFont(new Font("Arial", Font.PLAIN, 20 ));
            button.setBorder(BorderFactory.createEmptyBorder(2, 10, 2, 2));
            button.setHorizontalAlignment(SwingConstants.CENTER);

        label = new JLabel("Game");
            label.setPreferredSize(new Dimension(200, 50));
            label.setFont(new Font("Arial", Font.PLAIN, 60 ));

        this.action = action;
        panel.setBorder(BorderFactory.createEmptyBorder(20, 10, 20, 10));
        panel.setLayout(gb);
        //label
        gcon.gridx = 0;
        gcon.gridy = 0;
        panel.add(label, gcon);


        //button
        gcon.gridx = 0;
        gcon.gridy = 1;
        panel.add(button, gcon);
        this.add(panel,BorderLayout.CENTER);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setTitle("Start");
        this.setVisible(true);
        button.addActionListener(action);





    }
    
    public static void main(String[] args) {
        new WelcomeScreen(null).setVisible(true);
    }
}
user_156112700

If you're willing to use Libraries I can recommend MigLayout.

Solution:

With MigLayout the code looks a bit more readable and it's generally easier:

JPanel contentPane = new JPanel(new MigLayout("", "[grow, center]", "[grow, center]"));
JPanel panel = new JPanel(new MigLayout("wrap 1", "[grow, fill]", "[]20px[]"));

JLabel label = new JLabel("Game");
label.setFont(new Font("Arial", Font.PLAIN, 60 ));
panel.add(label);


JButton button = new JButton("Start");
button.setFont(new Font("Arial", Font.PLAIN, 20 ));
button.setBorder(BorderFactory.createEmptyBorder(2, 10, 2, 2));
button.setHorizontalAlignment(SwingConstants.LEFT);
panel.add(button);

contentPane.add(panel);
setContentPane(contentPane);

Explanation:

The 'panel' is still the JPanel holding the components. The content is controlled by the layouts contraints:

  1. The first argument of its MigLayout are the layout contrains and in that case it just auto wraps to the next line after each added component.
  2. The second argument are the column contraints. Here it makes sure that the 'cells' (the layout manager works like a table) expand with 'grow' and the component inside that cell fill the whole cell with 'fill'.
  3. The third argument are the row constraints. Here they just defines the gap between the rows. The '[]' in the column & row contrains stand for a column / row respectively. Anything inside that bracket defines how the cell and its content behaves, anything outside the brackets is used for defining gaps.

The 'contentPane' just makes sure that the 'panel' is centered inside using the same methods described above. It can then be added to a bigger component (like a frame) and expand, still keeping the content centered.

You should find all the info abould the Layouts capabilities at http://www.miglayout.com/whitepaper.html

user_57842650
Related