CODEWITHSUNDEEP
javaswing
jobukkit
jobukkit

Reputation: 2670

How to get this GUI layout right?

I want to have this:

sketch

I tried this:

    // Vertically center
    formatbp.setLayout (new GridBagLayout()); // formatbp is a JPanel
    GridBagConstraints gbc = new GridBagConstraints();
    gbc.gridx = 0;
    gbc.gridy = GridBagConstraints.RELATIVE;

    rbpanel.setLayout(new BoxLayout(rbpanel, BoxLayout.PAGE_AXIS)); // rbpanel is also a JPanel
    rb = new ButtonGroup();
    rbpanel.add(new JLabel("Words are seperated by: "));

    rbLinesOrTabs.setSelected(true);
    rb.add(rbLinesOrTabs);
    rbpanel.add(rbLinesOrTabs);
    rbLinesOrTabs.addActionListener(this);

    rbotherpanel = new JPanel(new FlowLayout());
    rb.add(rbOther);
    rbpanel.add(rbOther);
    rbOther.addActionListener(this);

    othercharfield.setEnabled(false); // Is going to be enabled when rbOther gets selected (and disabled again when rbLinesOrTabs is selected again), that is where the actionlisteners are for
    rbotherpanel.add(othercharfield);

    rbpanel.add(rbotherpanel);

    formatbp.add(rbpanel,gbc);
    formatbp.add(formatb,gbc); // formatb is the button

(most objects where initialized earlier in the code)

But this is the result:

result1

What am I doing wrong?

EDIT: I discovered I made a mistake here:

rbpanel.add(rbOther);

That should have been:

rbotherpanel.add(rbOther);

Now I get:

result2

Better, but the Other item is not aligned right. (it's a bit to the right as you can see)

Upvotes: 4

Views: 194

Answers (3)

kleopatra
kleopatra

Reputation: 51535

An all-in-one approach using MigLayout (yeah, it's really my current favourite :-)

    MigLayout layout = new MigLayout("debug", "[][]");
    JComponent content = new JPanel(layout);
    content.add(new JLabel("Words are separated by: "), "span");
    JRadioButton radio = new JRadioButton("Lines or tabs");
    content.add(radio, "wrap");
    // split the cell so it will contain both the other button
    // and the textfield
    content.add(new JRadioButton("Other:"), "split 2");
    // get the right margin of the upper radiobutton
    int rightMargin = radio.getInsets().right; 
    content.add(new JTextField(), "grow, wrap, " +
        // remove the gap to the preceding radiobutton
            "gapx 0, " +
        // set the padding to compensate the right edge
            "pad 0 0 0 -" + rightMargin + "px");
    content.add(new JButton("Format"), "span, center");
    showInFrame(content, "align to button text");

The visual outcome of the fine-tweaks in the shared cell is a bit LAF dependent. Looks good in Windows, not so good in Nimbus (the latter looks best without any compensation), so you would need to experiment a bit.

Upvotes: 2

Pritesh Shah
Pritesh Shah

Reputation: 887

Try below code,

public static void main(String[] args)
 {
        SwingUtilities.invokeLater(new Runnable()
        {

            @Override
            public void run()
            {
                JFrame frame = new JFrame();
                frame.setBounds(0, 0, 300, 300);
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


                JPanel formatbp = new JPanel(); 
                formatbp.setLayout (new GridBagLayout()); // formatbp is a JPanel
                GridBagConstraints gbc = new GridBagConstraints();
                gbc.gridx = 0;
                gbc.gridy = GridBagConstraints.RELATIVE;

                JPanel rbpanel = new JPanel();
                rbpanel.setLayout(new BoxLayout(rbpanel, BoxLayout.Y_AXIS)); // rbpanel is also a JPanel
                ButtonGroup rb = new ButtonGroup();
                rbpanel.add(new JLabel("Words are seperated by: "));

                JRadioButton rbLinesOrTabs = new JRadioButton("line or tabs");
                rbLinesOrTabs.setSelected(true);
                rb.add(rbLinesOrTabs);
                rbpanel.add(rbLinesOrTabs);
//                rbLinesOrTabs.addActionListener(this);
                JRadioButton rbOther = new JRadioButton("others:");
                JPanel rbotherpanel = new JPanel();
                rb.add(rbOther);
                rbotherpanel.add(rbOther);
//                rbOther.addActionListener(this);
                JTextField othercharfield = new JTextField("test", 4);
//                othercharfield.setColumns(800);
//                othercharfield.setEnabled(false); // Is going to be enabled when rbOther gets selected (and disabled again when rbLinesOrTabs is selected again), that is where the actionlisteners are for
                rbotherpanel.add(othercharfield);

                rbpanel.add(rbotherpanel);

                formatbp.add(rbpanel,gbc);
                JButton formatb = new JButton("format");
                formatbp.add(formatb,gbc); // formatb is the button
                frame.getContentPane().add(formatbp);
                frame.pack();
                frame.setVisible(true);                
            }
        });

    }

Upvotes: 0

Oliver Watkins
Oliver Watkins

Reputation: 13539

You are adding four things to rbPanel, which means you will get four rows (which is just like your screenshot example). The Other and textfield needs to be on the same row, so you should put them in their own panel, or use GridbagConstraints to position all the components correctly.

Use GridX and GridY instead of RELATIVE, as that makes the code easier to understand.

Upvotes: 2

Related Questions