CODEWITHSUNDEEP
javaswinglayout-manager
1547kime
1547kime

Reputation: 31

Java GUI having two columns layout using JFrame

I'm learning Java GUI and struggling dividing layout.

My current output looks like this

Current Output:

https://i.sstatic.net/ics4m.png

But I wanna make list view and one button on the left side, and other components on the right side like this

Result Output should be like this:

https://i.sstatic.net/5rsJK.png

I tried to divide into two columns by adding BorderLayout For example,

JFrame frame = new JFrame();
frame.setLayout(new FlowLayout());

//List on the left side
String[] tests = new String[] { "test1", "test2", "test3", "test4", "test5" };
JList<String> list = new JList<String>();
list.setListData(tests);
list.setSelectionBackground(Color.BLUE);
list.setSelectionForeground(Color.WHITE);
list.setFixedCellWidth(100);
frame.add(list, BorderLayout.WEST);
//List on the left side

//All Components on the right Side
JPanel namePanel = new JPanel();
JPanel emailPanel = new JPanel();
JLabel nameLabel = new JLabel("Name");
JLabel emailLabel = new JLabel("Email");
JTextField name = new JTextField(10);
JTextField email = new JTextField(10);

namePanel.add(nameLabel);
namePanel.add(name);
emailPanel.add(emailLabel);
emailPanel.add(email);
frame.add(namePanel, BorderLayout.EAST);
frame.add(emailPanel, BorderLayout.EAST);


// CheckBox Panel
JPanel checkBoxPanel = new JPanel();
JLabel lblHobby = new JLabel("Programming Language:");

// CHECKBOX LIST
JCheckBox check1 = new JCheckBox("Java");
JCheckBox check2 = new JCheckBox("C++");
JCheckBox check3 = new JCheckBox("C");
JCheckBox check4 = new JCheckBox("Python");
JCheckBox check5 = new JCheckBox("Other");
checkBoxPanel.add(lblHobby);
checkBoxPanel.add(check1);
checkBoxPanel.add(check2);
checkBoxPanel.add(check3);
checkBoxPanel.add(check4);
checkBoxPanel.add(check5);
frame.add(checkBoxPanel, BorderLayout.EAST);
// CheckBox Panel

// BUTTON
JButton saveButton = new JButton("Save");
JButton newButton = new JButton("New");
frame.add(saveButton, BorderLayout.EAST);
frame.add(newButton, BorderLayout.EAST);
// BUTTON

//Set size, title and visible
frame.setSize(500, 400);
//frame.setResizable(false);
frame.setTitle("Test");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);

What do I need to do in order to make two columns in GUI?

Upvotes: 1

Views: 1112

Answers (2)

Andrew Thompson
Andrew Thompson

Reputation: 168825

This is how I'd look to layout this GUI:
enter image description here

Starting from the inside and going out, these layouts would be:

  • GREEN - FlowLayout the middle one from the top, centered, the other two left aligned.
  • PINK - a GridBagLayout. 2 columns down to Text field2:, single column thereafter.
  • RED - a BorderLayout with the list in the LINE_START, the fields and Save / New buttons in the CENTER, and the (flow layout with the left aligned) button in the PAGE_END.

While it's likely possible to create the entire view with a single grid bag layout, that would not lead to the easy to maintain code which would result from the above 'divide & conquer' approach.

Upvotes: 1

camickr
camickr

Reputation: 324128

frame.setLayout(new FlowLayout());

Don't change the layout. The FlowLayout just flows components from one line to another. Try resizing your frame wider and see how the component wrap from line to line.

The default layout manager of the content pane of the frame is the BorderLayout. You generally want to keep that unless you have a good reason to change it.

Then you design your GUI into logical panels. Each panel can use a different layout manager. Read the Swing tutorial on Layout Manager.

So maybe you add the JList to the left side of the frame:

JList<String> list = new JList<>(...);
JScrollPane scrollPane = new JScrollPane( list );
frame.add(scrollPane, BorderLayout.LINE_START);

Then you create a panel to be added to the center:

JPanel center = new JPanel(...);
center.add(...);
frame.add(center, BorderLayout.CENTER);

So pick a layout manager for the CENTER. Maybe you use a BoxLayout and then you add child panels for each row of components.

Upvotes: 3

Related Questions