9

enter image description here

I would like to make a gui that looks like the above. right now I have a panel which will hold the name label, name textfield, brith date label and birthday textfield. My question is what would be the best layout manager to use on the panel so that the row of "name components" (lable + textfield) and the row of "birth date components" (lable + textfield), would be evenly spread vertically in the panel.

I thought about using flow layout, but that would result in no gap between the two rows of components. I thought about using a grid layout, but I do not know the gap size between the two rows of components.

A more complicated approach...i thought about putting the name label and textfield in one panel, and the birth date label and textfield in another panel, then make the base panel border layout and set name to be north, birthdate to be south...but then i would still have to make sure the name components are vertically centered in the name panel and birthdate components are vertically centered in the birth date panel.

Any help is appreciated. The goal is to make sure the row of name components and the row of birth date components are vertically spread out, with the name components being centered vertically on the top half, and the birth date components centered vertically on the bottom half. If anything sounds confusing please let me know I'll try to rephrase for a better understanding.

I am using strictly Java swing with eclipse, no GUI builder or anything like that.

1
  • It is certainly possible to achieve this with the FormLayout of JGoodies, but that is not included in the JDK.
    – Robin
    Nov 28, 2012 at 22:50

4 Answers 4

9

I like the MigLayout. In that case, it would be very easy to layout the components as the MigLayout has a table-like behaviour and the components would be arranged in that way. This is described in the QuickStartGuide.

Edit:

Here is a small example:

enter image description here

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
import net.miginfocom.swing.MigLayout;

public class Test {

    private JFrame frame;
    private JTextField nameTextField, birthDateTextField;
    private JLabel nameLabel, birthDateLabel;

    public Test() {
        initComponents();
    }

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

    private void initComponents() {
        frame = new JFrame("Test");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new MigLayout());

        nameTextField = new JTextField(30);
        birthDateTextField = new JTextField(30);
        nameLabel = new JLabel("Name:");
        birthDateLabel = new JLabel("Birth Date:");

        frame.add(nameLabel);
        frame.add(nameTextField, "wrap");
        frame.add(birthDateLabel);
        frame.add(birthDateTextField);
        frame.pack();
        frame.setVisible(true);
    }
}
2
  • 2
    I have used MigLayout professionally on some extremely complicated UIs and it has handled everything I have thrown at it. Nov 28, 2012 at 23:47
  • 1
    this is very interesting. i've actually never heard of it before but it looks like it would make designing a layout a lot easier. unfortunately i like ur answer but the other guy looked like he put a lot of effort into demoing so i gave u one up and him the check mark. Nov 29, 2012 at 0:42
3

I highly recommend you stay away from layouts designed to be automated by a layout manager --they can be flexible but they tend to be used as a hammer, a very awkward one that takes a lot of finess if you want components to resize in a natural way.

Learning to use layout managers is a bit of an art. You don't pick just one and use it for every problem, instead you take a few different types and nest them in a way that looks like your data.

In your case I think you'd get along pretty well with 3 flow layouts, two horizontal contained in one vertical, that kind of GUI is exactly what flowLayout was made for and you won't have to add any fiddling with parameters.

By the way, many problems can be solved by nesting Border and Flow layouts--Border can be exceptionally useful because of the way the middle acts to take as much space as it can, but leaving the 4 sides as much room as they need--in fact BorderLayout often only has 2 or 3 areas filled--but may easily nest other Border or flow layouts. These lead to GUIs that require very little placement specifics but still resize naturally.

EDIT: Here is some working code of two flow layouts nested in a box layout.

It's groovy (not java) but the difference is purely syntax--with less clutter.

Note the simplicty and lack of numbers to invent--it just works pretty much like you'd expect.

import javax.swing.*
import java.awt.*

f=new JFrame()
f.setSize(300,200)
p=f.getContentPane()
p.setLayout(new BoxLayout(p, BoxLayout.Y_AXIS))
p.add(panel("Button 1"))
p.add(panel("Button 2"))
f.show()

void addPanel(name) {
   def child=new JPanel()
   child.add(new JButton(name))
   child.add(new JTextField(20))
   return child
}
3
  • 1
    I disagree. Many of the built in Swing layout managers are definitely suited to be used in this fashion. But a terse full featured layout manager such as MigLayout (as recommended by htz) will definitely allow you to use a single layout for all of your needs and still provide predictable and easy rules to allow resizing in a natural way. Nov 28, 2012 at 23:45
  • i agree with both. i'm just a beginner learning about this GUI stuff...and while I can design a GUI using nested layouts (which allows me to think kinda like a puzzle), i sometimes would enjoy if I could get every done with just one layout Nov 29, 2012 at 0:39
  • 1
    The MigLayout is really a good manager, but I agree with Bill K in the point that you get the best results by mixing the different LayoutManagers. I usually use MigLayout, but sometimes the desired layout demands another manager, when you want to keep the code as simple as possible.
    – htz
    Nov 29, 2012 at 10:08
2

I personally like GridBagLayout.

Here is an example to demonstrate:

enter image description here

import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;
import javax.swing.UIManager;
import javax.swing.UIManager.LookAndFeelInfo;

public class Test {

    private JFrame frame;
    private JTextField nameTextField, birthDateTextField;
    private JLabel nameLabel, birthDateLabel;

    public Test() {
        initComponents();
    }

    public static void main(String args[]) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    for (LookAndFeelInfo info : UIManager.getInstalledLookAndFeels()) {
                        if ("Nimbus".equals(info.getName())) {
                            UIManager.setLookAndFeel(info.getClassName());
                            break;
                        }
                    }
                } catch (Exception e) {
                    // If Nimbus is not available, you can set the GUI to another look and feel.
                }
                new Test();
            }
        });
    }

    private void initComponents() {
        frame = new JFrame("Test");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new GridBagLayout());

        nameTextField = new JTextField(30);
        birthDateTextField = new JTextField(30);
        nameLabel = new JLabel("Name:");
        birthDateLabel = new JLabel("Birth Date:");

        GridBagConstraints gc = new GridBagConstraints();
        gc.fill = GridBagConstraints.HORIZONTAL;
        gc.insets = new Insets(10, 10, 10, 10);

        gc.gridx = 0;
        gc.gridy = 0;
        frame.add(nameLabel, gc);

        gc.gridx = 1;
        gc.gridy = 0;
        frame.add(nameTextField, gc);

        gc.gridx = 0;
        gc.gridy = 1;
        frame.add(birthDateLabel, gc);

        gc.gridx = 1;
        gc.gridy = 1;
        frame.add(birthDateTextField, gc);

        frame.pack();
        frame.setVisible(true);
    }
}
3
  • @Anthony So you propose the OP go to a LayoutManager not supplied in JDK for such a simple task simple because of a hypothetical situation? in that case most people would be down voted (and on that your down vote was because your opinion differed?! theres many ways to skin a cat), a single solution cannot cover all possibilities. This was fit for what the OP asked and is incorporated with JDK :P, And no it wont be difficult to do unless you have 0 logic Nov 29, 2012 at 17:06
  • I personally like GridBagLayout - you must be a masochist :-)
    – kleopatra
    Nov 30, 2012 at 11:37
  • Which layouts are completely cross platform. At work we generally use the AbsoluteLayout for in house work but many have voiced a dislike to that because it is not completely cross-platform independent?
    – Doug Hauf
    May 19, 2014 at 21:38
1

GroupLayout suits your needs. Take a look at it. It has the ability to auto-create gaps (or you can manage your own)and it's great for creating forms. It works either horizontally or vertically.

3
  • 1
    Last on list of layouts I would recommend in this case. Nov 29, 2012 at 1:07
  • +1 This is one thing GroupLayout does well, for example.
    – trashgod
    Nov 29, 2012 at 4:37
  • 1
    @Eddie To complicated to use and causes mess in your code. Mig and GridBag are far better to use. Nov 29, 2012 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.