如何将多个元素相互对齐？

Question

I am having difficulty in aligning Swing elements flow below each other. Using GridLayout does not help me because it divides screen to rows which have equal sizes. I need to put one component to each row and the next component should be in very bottom of the last component.

Mi problem is that if the choices of the question are more than one line, this layout squeeze them to the rows and there is a huge gap between picture and question "3+3?"

Answer 1

There are a number of possible solutions, probably the most useful however is GridBagLayout , while complex, it is very flexible.

import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.JCheckBox;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() {
            setLayout(new GridBagLayout());

            JLabel label = new JLabel("Cool");
            label.setFont(label.getFont().deriveFont(Font.BOLD, 48f));
            label.setOpaque(true);
            label.setBackground(Color.WHITE);

            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridwidth = GridBagConstraints.REMAINDER;

            add(label, gbc);
            add(new JLabel("3+5="), gbc);
            add(new JCheckBox("5"), gbc);
            add(new JCheckBox("3"), gbc);
            add(new JCheckBox("6"), gbc);
            add(new JCheckBox("9"), gbc);
            add(new JCheckBox("23"), gbc);
        }

    }

}

You could even use an anchor to move the components to different positions within there cells...

gbc.anchor = GridBagConstraints.WEST;

These can, obviously, be applied to individual components as well, so each component can have it's own set of constraints

Have a look at How to Use GridBagLayout for more details

Answer 2

You can use GridBagLayout for this. It is very easy to use. Here is a sample implementation.

import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JRadioButton;

class MyFrame extends JFrame {

    public MyFrame() {
        JPanel panel = new JPanel(new GridBagLayout());

        JLabel image = new JLabel();
        image.setIcon(new ImageIcon(getClass().getResource("/image.png")));

        JLabel question = new JLabel("3 + 3 = ?");

        JRadioButton rb1 = new JRadioButton("5");
        JRadioButton rb2 = new JRadioButton("3");
        JRadioButton rb3 = new JRadioButton("6");
        JRadioButton rb4 = new JRadioButton("9");
        JRadioButton rb5 = new JRadioButton("23");

        GridBagConstraints c = new GridBagConstraints();

        c.gridx = 0;//set the x location of the grid for the next component
        c.gridy = 0;//set the y location of the grid for the next component
        panel.add(image,c);

        c.gridy = 1;//change the y location
        c.anchor=GridBagConstraints.WEST;//left align components after this point
        panel.add(question,c);

        c.gridy = 2;//change the y location
        panel.add(rb1,c);

        c.gridy = 3;//change the y location
        panel.add(rb2,c);

        c.gridy = 4;//change the y location
        panel.add(rb3,c);

        c.gridy = 5;//change the y location
        panel.add(rb4,c);

        c.gridy =6;//change the y location
        panel.add(rb5,c);

        this.getContentPane().add(panel);

        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.pack();
    }

    public static void main(String[] args) {
        MyFrame myFrame = new MyFrame();
        myFrame.setVisible(true);
    }

}

References: https://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html