Complex layout of multiple components

问题

I am designing a GUI where I have the components shown below. But in the second row, I would like to manage spaces between the components. For example, in the second row, I would like to fit both the JLabel "Move to time" and the JTextField without so much spacing. As I can see, right now MigLayout places the JTextField in line with the second component in the first row. Then, the JButton "Move" in the 2nd row should be aligned to the 2nd component in the first row. How do I achieve this? Below is my code. I looked up many cheat sheets and quick start guides on MigLayout but I couldn't manage yet. Can somebody recommend changes in my code snippet? Thank you.

`

    JPanel helper = new JPanel( new MigLayout( "" ) );
    helper.add( new JButton( "Add puncta coordinates from CSV" ), "width 250:20" );
    helper.add( new JButton( "Add track coordinates from CSV" ), "wrap" );
    helper.add( new JLabel( "Move to time:" ) );
    JTextField tMoveTime = new JTextField();
    helper.add( tMoveTime, " gap 2px, width 75:20" );
    JButton bMoveTime = initMoveButton();
    helper.add( bMoveTime, "width 75:20" );

`

Actually, I intend to make the following GUI in full with all buttons and textfields, is any other layout more suited? If yes, can an example code snippet for the recommended layout be pointed to? Thank you.

回答1:

You can consider two basic approaches : One is to use highly flexible layout manager, like MigLayout. I am not familiar with it, but I can recommend GridbagLayout for the job:

    JPanel helper = new JPanel(  );
    GridBagLayout gbl_helper = new GridBagLayout();
    gbl_helper.columnWidths = new int[]{200, 7, 200, 60, 18, 0};
    gbl_helper.rowHeights = new int[]{20, 20};
    gbl_helper.columnWeights = new double[]{1.0, 0.0, 1.0, 0.0, 0.0, Double.MIN_VALUE};
    gbl_helper.rowWeights = new double[]{0.0, 0};
    helper.setLayout(gbl_helper);

    GridBagConstraints gbc1 = new GridBagConstraints();
    gbc1.fill = GridBagConstraints.HORIZONTAL;
    gbc1.gridwidth = 2;
    gbc1.anchor = GridBagConstraints.NORTHWEST;
    gbc1.insets = new Insets(5,5,5,5);
    gbc1.gridx = 0;
    gbc1.gridy = 0;
    JButton button1 = new JButton( "Add puncta coordinates from CSV" );
    helper.add( button1, gbc1 );

    GridBagConstraints gbc2 = new GridBagConstraints();
    gbc2.fill = GridBagConstraints.HORIZONTAL;
    gbc2.gridwidth = 2;
    gbc2.anchor = GridBagConstraints.NORTHWEST;
    gbc2.insets = new Insets(5,5,5,5);
    gbc2.gridx = 2;
    gbc2.gridy = 0;
    JButton button2 = new JButton( "Add track coordinates from CSV" );

    helper.add( button2, gbc2 );

    GridBagConstraints gbc3 = new GridBagConstraints();
    gbc3.insets = new Insets(0, 0, 0, 5);
    gbc3.gridx = 0;
    gbc3.gridy = 1;
    JLabel label = new JLabel( "Move to time:" );
    helper.add( label, gbc3 );

    JTextField tMoveTime = new JTextField();
    tMoveTime.setColumns(15);
    GridBagConstraints gbc4 = new GridBagConstraints();
    gbc4.anchor = GridBagConstraints.WEST;
    gbc4.insets = new Insets(0, 0, 0, 5);
    gbc4.gridx = 1;
    gbc4.gridy = 1;
    helper.add( tMoveTime, gbc4);

    JButton bMoveTime = new JButton("Move");
    GridBagConstraints gbc5 = new GridBagConstraints();
    gbc5.insets = new Insets(0, 0, 0, 5);
    gbc5.anchor = GridBagConstraints.NORTHEAST;
    gbc5.gridx = 3;
    gbc5.gridy = 1;
    helper.add( bMoveTime, gbc5 );

A different approach is to divide a complex layout to simpler layouts by using sub - panels, each with it's own layout manager:

    JPanel helper = new JPanel(  );
    helper.setLayout(new BoxLayout(helper, BoxLayout.Y_AXIS));
    getContentPane().add(helper);

    JPanel topPanel = new JPanel();
    helper.add(topPanel);
    JButton button1 = new JButton( "Add puncta coordinates from CSV" );
    topPanel.add(button1);
    JButton button2 = new JButton( "Add track coordinates from CSV" );
    topPanel.add(button2);

    JPanel bottomPanel = new JPanel();
    helper.add(bottomPanel);
    bottomPanel.setLayout(new BoxLayout(bottomPanel, BoxLayout.X_AXIS));

    JPanel bottomRIght = new JPanel();
    bottomPanel.add(bottomRIght);
    JLabel label = new JLabel( "Move to time:" );
    bottomRIght.add(label);
    JTextField tMoveTime = new JTextField();
    bottomRIght.add(tMoveTime);
    tMoveTime.setColumns(15);

    JPanel bottomleftPanel = new JPanel();
    bottomPanel.add(bottomleftPanel);
    bottomleftPanel.setLayout(new FlowLayout(FlowLayout.RIGHT, 5, 5));
    JButton bMoveTime = new JButton("Move");
    bottomleftPanel.add(bMoveTime);

来源：https://stackoverflow.com/questions/53997402/complex-layout-of-multiple-components