How can I create two dimensional SplitPane in Java Swing

Question

I want to create a two dimensional JSplitpane like design in Java swing. Such that the JFrame will be split into 4 parts, and upper and lower parts are separated by another split, and left and right part are separated by yet another split line. Also if I click and drag any part of vertical split line, the complete line should move in dragged direction.

I am trying to achieve this, by using split pane within split pane. But then on dragging vertical split line, it only drags either components below horizontal line or above horizontal split line.

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class Demo extends JFrame {

int screenwidth=760,screenheigth=550;

JSplitPane top_sp,bottom_sp,main_sp;

JButton b1,b2,b3,b4,b5,b6;
JButton b7,b8,b9,b10;

MailClient(){
    setSize(screenwidth,screenheigth);
    setLayout(new BorderLayout());
    setTitle("Demo");
    setDefaultCloseOperation(EXIT_ON_CLOSE);    
    setLocationRelativeTo(null);

    b1=new JButton("B1");
    b2=new JButton("B2");
    b3=new JButton("B3");
    b4=new JButton("B4");
    b5=new JButton("B5");
    b6=new JButton("B6");
    b7=new JButton("B7");
    b8=new JButton("B8");
    b9=new JButton("B9");
    b10=new JButton("B10");     

    JPanel topleft=new JPanel(new FlowLayout());
    topleft.add(b1);
    topleft.add(b2);

    JPanel topright=new JPanel(new FlowLayout(FlowLayout.CENTER));
    topright.add(b3);
    topright.add(b4);
    topright.add(b5);
    topright.add(b6);

    JPanel bottomleft=new JPanel(new FlowLayout(FlowLayout.CENTER));

    bottomleft.add(b7);
    bottomleft.add(b8);
    bottomleft.add(b9);
    bottomleft.add(b10);

    JPanel bottomright=new JPanel(new FlowLayout(FlowLayout.CENTER));
    bottomright.add(new JLabel("TABLE"));

    top_sp=new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,true,topleft,topright);
    bottom_sp=new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,true,bottomleft,bottomright);

    main_sp=new JSplitPane(JSplitPane.VERTICAL_SPLIT,true,top_sp,bottom_sp);

    add(main_sp,"Center");

    setVisible(true);
}

public static void main(String args[]){
    Demo demo=new Demo();

}

}

score 3 · Accepted Answer · answered Jun 06 '16 at 10:22

You can use a property change listener to detect when the split pane divider has been moved, and then set the location of the other split pane:

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

public class Example extends JFrame {

    public Example() {

        JPanel topLeftPanel = new JPanel();
        JPanel topRightPanel = new JPanel();
        JPanel bottomLeftPanel = new JPanel();
        JPanel bottomRightPanel = new JPanel();

        JSplitPane topPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, topLeftPanel, topRightPanel);

        JSplitPane bottomPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, bottomLeftPanel, bottomRightPanel);

        topPane.addPropertyChangeListener(JSplitPane.DIVIDER_LOCATION_PROPERTY, pce -> {
            bottomPane.setDividerLocation((int) pce.getNewValue());
        });

        bottomPane.addPropertyChangeListener(JSplitPane.DIVIDER_LOCATION_PROPERTY, pce -> {
            topPane.setDividerLocation((int) pce.getNewValue());
        });

        JSplitPane mainPane = new JSplitPane(JSplitPane.VERTICAL_SPLIT, topPane, bottomPane);

        setContentPane(mainPane);
        setLocationRelativeTo(null);
        setMinimumSize(new Dimension(400, 400));
        setVisible(true);
    }

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

score 1 · Answer 2 · edited May 23 '17 at 12:08

1

you have to listen to the split-change:

split.addPropertyChangeListener(JSplitPane.DIVIDER_LOCATION_PROPERTY, 
    new PropertyChangeListener() {
       @Override
       public void propertyChange(PropertyChangeEvent pce) {}
});

(see Detecting JSplitPane Divider Movement for further information)

whenever you change the size of one JSplitPane, you have to change the other as well.

split.setDividerLocation(proportionalLocation);

edited May 23 '17 at 12:08

Community

1
1

answered Jun 06 '16 at 10:19

Martin Frank

3,445
1
27
47

Be sure in each splitpane's PropertyChangeListener that you only change the other splitpane's position if your own position is actually changing (new position != old position), else you could get into an endless cycle of changes between the two splitpanes! – Kevin Anderson Jun 06 '16 at 11:42

score 1 · Answer 3 · answered Jun 06 '16 at 14:35

You can also check out the Split Pane Synchronizer.

This is a reusable class that allows you to synchronize 2 (or more) split panes. The classes uses a single PropertyChangeListener to manage the change in divider location so your application code doesn't need to keep track of each split pane separately.

How can I create two dimensional SplitPane in Java Swing

3 Answers3