Series Java Swing Bài 8: GridLayout: Hiển thị các thành phần theo dạng lưới (Grid)

Nếu BorderLayout chia không gian thành 5 vùng đặc thù, thì GridLayout chia không gian làm việc thành một bảng lưới (grid) gồm các hàng và cột.

Hình ảnh dễ hình dung nhất của GridLayout chính là bàn phím số của máy tính bỏ túi (Calculator) hoặc một bàn cờ vua: mọi ô vuông đều được chia đều tăm tắp.

1. Ba đặc điểm "cứng nhắc" của GridLayout

1. Bình đẳng tuyệt đối về kích thước: Dù trong ô chứa một nút bấm có chữ rất dài hay một nút bấm chỉ có 1 ký tự, GridLayout sẽ ép tất cả các ô phải có kích thước rộng và cao bằng hệt nhau. Kích thước của mỗi ô = (Tổng kích thước cửa sổ) / (Số hàng x Số cột).

2. Vô hiệu hóa preferredSize: Các lệnh như setPreferredSize(), setMinimumSize() hay setMaximumSize() hoàn toàn vô tác dụng trong Layout này.

3. Thứ tự lấp đầy: Khi bạn gọi lệnh add(Component), các thành phần sẽ tự động lấp đầy vào lưới theo thứ tự: Từ trái sang phải, hết hàng trên sẽ tự động rớt xuống hàng dưới. Bạn không thể chỉ định đích danh "hãy đặt nút này vào tọa độ hàng 2 cột 3".

2. Các hàm khởi tạo (Constructors)

Bạn cần xác định trước số hàng (rows) và số cột (columns) khi khởi tạo Layout.

• GridLayout(int rows, int cols): Khởi tạo lưới không có khoảng trống giữa các ô.

• GridLayout(int rows, int cols, int hgap, int vgap): Khởi tạo lưới có khoảng trống theo chiều ngang (hgap) và chiều dọc (vgap).

Quy tắc đặc biệt (Mẹo nâng cao): Bạn không được phép thiết lập cả số hàng và số cột đều bằng 0 (sẽ báo lỗi). Tuy nhiên, bạn có thể thiết lập một trong hai giá trị bằng 0.

• new GridLayout(0, 3): Số cột cố định là 3, số hàng sẽ tự động sinh ra (dynamic) tùy thuộc vào việc bạn add() bao nhiêu Component vào lưới.

• new GridLayout(4, 0): Số hàng cố định là 4, số cột sẽ tự động phình ra.

3. Source code minh họa: Giao diện Máy tính bỏ túi

Ứng dụng kinh điển nhất của GridLayout là tạo bàn phím. Đoạn code sau sẽ tạo ra một bộ khung phím bấm máy tính cơ bản gồm 4 hàng và 4 cột.

Java

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

public class GridLayoutDemo extends JFrame {

    public GridLayoutDemo() {
        setTitle("Máy tính bỏ túi - GridLayout");
        setSize(300, 400);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        
        // Kết hợp BorderLayout ở cửa sổ chính
        setLayout(new BorderLayout());

        // 1. Phần hiển thị kết quả (Dùng vùng NORTH)
        JTextField txtDisplay = new JTextField("0");
        txtDisplay.setFont(new Font("Arial", Font.BOLD, 30));
        txtDisplay.setHorizontalAlignment(JTextField.RIGHT); // Căn lề phải
        txtDisplay.setEditable(false);
        txtDisplay.setPreferredSize(new Dimension(300, 60)); // Tăng chiều cao của ô nhập
        add(txtDisplay, BorderLayout.NORTH);

        // 2. Phần bàn phím số (Dùng JPanel + GridLayout chứa ở vùng CENTER)
        JPanel keypadPanel = new JPanel();
        // Lưới 4 hàng, 4 cột, khoảng cách ngang dọc là 5px
        keypadPanel.setLayout(new GridLayout(4, 4, 5, 5));
        
        // Mảng chứa nhãn của các nút bấm theo đúng thứ tự từ trái qua phải, trên xuống dưới
        String[] buttons = {
            "7", "8", "9", "/",
            "4", "5", "6", "*",
            "1", "2", "3", "-",
            "C", "0", "=", "+"
        };

        // Dùng vòng lặp để tạo và add các nút vào Panel
        for (String text : buttons) {
            JButton btn = new JButton(text);
            btn.setFont(new Font("Arial", Font.BOLD, 20));
            keypadPanel.add(btn);
        }

        // Add cụm bàn phím vào giữa cửa sổ
        add(keypadPanel, BorderLayout.CENTER);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            new GridLayoutDemo().setVisible(true);
        });
    }
}

4. Tổng kết: Khi nào nên dùng?

Nên dùng:

• Thiết kế bàn phím số (Numpad, Máy tính, POS tính tiền).

• Bàn cờ, ma trận game (Cờ vua, Dò mìn - Minesweeper, Tic-Tac-Toe).

• Hiển thị danh sách hình ảnh/sản phẩm có kích thước thumbnail bằng nhau (như Gallery).

Không nên dùng:

• Thiết kế Form nhập liệu. Do đặc tính ép các ô bằng nhau, nếu bạn dùng nó cho Form, cột chứa nhãn (JLabel) sẽ bị kéo rộng ra bằng đúng cột chứa ô nhập (JTextField), tạo ra các khoảng trắng khổng lồ rất thiếu thẩm mỹ. Để thiết kế Form, chúng ta sẽ cần đến GridBagLayout (Bài 10).