JSplitPane and Resizable Panels - potatoscript/JavaSwing GitHub Wiki

πŸ“‘ JSplitPane and Resizable Panels in Java Swing πŸ”„

πŸ“ What is JSplitPane?

JSplitPane in Java Swing is a container that allows you to divide your window into two resizable panels. These panels can be adjusted by dragging a divider, making it a useful component for layouts where you want the user to have control over the size of the panels.

Key Features:

  • Resizable Panels: The user can adjust the size of each panel by dragging the divider.
  • Horizontal and Vertical Split: You can choose to split the panel horizontally (left-right) or vertically (top-bottom).
  • Easy to Use: Provides an intuitive way to create flexible layouts.

βœ… How Does JSplitPane Work?

  • Split Orientation: You can create a horizontal or vertical split by setting the JSplitPane orientation.
  • Left/Right or Top/Bottom: The first panel (left/top) will be the primary panel, and the second (right/bottom) is secondary.
  • Divider: The divider allows the user to adjust the panel sizes.

πŸ“š Step 1: Simple JSplitPane Example

Let’s create a basic JSplitPane that splits the window into two panels. The left panel will contain a label, and the right panel will contain a text area.

πŸ“ Example: Basic JSplitPane with Resizable Panels

import javax.swing.*;

public class JSplitPaneExample {
    public static void main(String[] args) {
        // Create a JFrame to hold our JSplitPane
        JFrame frame = new JFrame("JSplitPane Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(500, 300);

        // Create components for the left and right panels
        JPanel leftPanel = new JPanel();
        leftPanel.add(new JLabel("Left Panel"));

        JPanel rightPanel = new JPanel();
        rightPanel.add(new JTextArea(10, 20));

        // Create a JSplitPane with horizontal split
        JSplitPane splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, leftPanel, rightPanel);
        splitPane.setDividerLocation(150); // Set initial divider position

        // Add the split pane to the frame
        frame.add(splitPane);

        // Display the frame
        frame.setVisible(true);
    }
}

🎨 Explanation

  • JSplitPane.HORIZONTAL_SPLIT: This splits the window horizontally, meaning left and right panels.
  • splitPane.setDividerLocation(150): This sets the initial position of the divider (150 pixels from the left).
  • Panels: We created a left panel with a label and a right panel with a text area.

πŸ‘©β€πŸŽ¨ Output:

When you run this code, you will see a window with a horizontal divider that separates the left and right panels. You can drag the divider to resize the panels.

πŸ“š Step 2: Vertical Split

Now, let’s create a vertical split where the left panel will contain a button, and the right panel will contain a list.

πŸ“ Example: Vertical Split with JSplitPane

import javax.swing.*;

public class JSplitPaneVerticalExample {
    public static void main(String[] args) {
        // Create a JFrame to hold our JSplitPane
        JFrame frame = new JFrame("Vertical JSplitPane Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(500, 300);

        // Create components for the top and bottom panels
        JPanel topPanel = new JPanel();
        topPanel.add(new JButton("Click Me"));

        JPanel bottomPanel = new JPanel();
        bottomPanel.add(new JList<>(new String[]{"Item 1", "Item 2", "Item 3"}));

        // Create a JSplitPane with vertical split
        JSplitPane splitPane = new JSplitPane(JSplitPane.VERTICAL_SPLIT, topPanel, bottomPanel);
        splitPane.setDividerLocation(150); // Set initial divider position

        // Add the split pane to the frame
        frame.add(splitPane);

        // Display the frame
        frame.setVisible(true);
    }
}

🎨 Explanation

  • JSplitPane.VERTICAL_SPLIT: This splits the window vertically, meaning top and bottom panels.
  • splitPane.setDividerLocation(150): This sets the initial position of the divider (150 pixels from the top).

πŸ‘©β€πŸŽ¨ Output:

Running this code will show a window with a vertical divider that separates the top panel (with a button) and the bottom panel (with a list). The user can adjust the divider by dragging.

πŸ“š Step 3: Customizing the Divider

You can customize the appearance and behavior of the divider. For example, you can change the divider's size or make it invisible.

πŸ“ Example: Customizing Divider

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

public class JSplitPaneCustomizedDivider {
    public static void main(String[] args) {
        // Create a JFrame to hold our JSplitPane
        JFrame frame = new JFrame("Customized Divider Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(500, 300);

        // Create components for the left and right panels
        JPanel leftPanel = new JPanel();
        leftPanel.setBackground(Color.CYAN);
        leftPanel.add(new JLabel("Left Panel"));

        JPanel rightPanel = new JPanel();
        rightPanel.setBackground(Color.PINK);
        rightPanel.add(new JLabel("Right Panel"));

        // Create a JSplitPane with horizontal split
        JSplitPane splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, leftPanel, rightPanel);
        
        // Customize the divider
        splitPane.setDividerSize(10); // Set divider thickness
        splitPane.setDividerLocation(200); // Set initial divider position

        // Make the divider invisible (optional)
        // splitPane.setDividerLocation(0); // Set divider to the far left

        // Add the split pane to the frame
        frame.add(splitPane);

        // Display the frame
        frame.setVisible(true);
    }
}

🎨 Explanation

  • splitPane.setDividerSize(10): This changes the thickness of the divider to 10 pixels.
  • Custom Backgrounds: We added some color to the panels to make the layout more visually appealing.
  • Optional Divider Settings: You can also make the divider invisible by setting its location to zero or modifying its appearance further.

πŸ‘©β€πŸŽ¨ Output:

You will see the window with two colored panels. The divider will be thicker (10 pixels), and you can resize the panels by dragging it.

πŸ“š Step 4: Disable Divider Movement

In some cases, you may want to prevent the user from resizing the panels. You can disable the divider's movement to fix the panel sizes.

πŸ“ Example: Disable Divider Movement

import javax.swing.*;

public class JSplitPaneNoResize {
    public static void main(String[] args) {
        // Create a JFrame to hold our JSplitPane
        JFrame frame = new JFrame("No Resize JSplitPane");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(500, 300);

        // Create components for the left and right panels
        JPanel leftPanel = new JPanel();
        leftPanel.add(new JLabel("Left Panel"));

        JPanel rightPanel = new JPanel();
        rightPanel.add(new JTextArea(10, 20));

        // Create a JSplitPane with horizontal split
        JSplitPane splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, leftPanel, rightPanel);
        splitPane.setDividerLocation(150); // Set initial divider position
        
        // Disable divider movement
        splitPane.setEnabled(false); // The user cannot move the divider

        // Add the split pane to the frame
        frame.add(splitPane);

        // Display the frame
        frame.setVisible(true);
    }
}

🎨 Explanation

  • splitPane.setEnabled(false): This disables the ability to resize the panels by dragging the divider.

πŸ‘©β€πŸŽ¨ Output:

In this case, the user cannot drag the divider to resize the panels. The layout will remain fixed.