vi
new
0
Avatar
Huy Hoàng @hhoang
14.2K 213 1.7K
Đã đăng vào khoảng 4 giờ trước 3 phút đọc
16

Series Java Swing Bài 22: JToolBar - Thiết kế thanh công cụ truy cập nhanh

Nếu JMenuBar cung cấp một hệ thống danh mục đầy đủ nhưng yêu cầu người dùng phải thực hiện 2 thao tác (click mở Menu -> click chọn Item), thì JToolBar sinh ra để tối ưu hóa quy trình đó.

JToolBar là thanh ngang chứa một dãy các nút bấm (thường chỉ hiển thị Icon thay vì Text) nằm ngay bên dưới thanh Menu. Nó giúp người dùng thao tác các chức năng quan trọng nhất (như Save, Copy, Paste) chỉ bằng 1 thao tác click duy nhất.

1. Khởi tạo và bản chất "Draggable" (Kéo thả tự do)

Một tính năng vô cùng độc đáo mặc định của JToolBar là nó có thể bị "bóc" ra khỏi cửa sổ chính. Người dùng có thể click chuột vào phần đầu của thanh ToolBar và kéo nó ra ngoài thành một cửa sổ nổi độc lập (Floating Window), hoặc gắn nó sang cạnh trái/phải của ứng dụng.

Java

// Khởi tạo ToolBar mặc định (Nằm ngang)
JToolBar toolBar = new JToolBar();

// Hoặc khởi tạo ToolBar nằm dọc ngay từ đầu
JToolBar verticalToolBar = new JToolBar(JToolBar.VERTICAL);

// KHÓA CHỨC NĂNG KÉO THẢ (Khuyên dùng trong phần mềm hiện đại)
toolBar.setFloatable(false);

(Mẹo: Giao diện kéo thả Floating Window trông rất giống các phần mềm cổ lỗ sĩ thập niên 2000. Trong các dự án hiện đại, bạn nên dùng lệnh setFloatable(false) để ghim chết thanh ToolBar lại).

2. Thêm Component vào JToolBar

Bạn có thể add() bất kỳ Component nào vào JToolBar (nút bấm, ô chữ, combo box). Tuy nhiên, thành phần chủ lực luôn là JButton.

Khi nhét JButton vào JToolBar, bạn nên tuân thủ quy tắc UI chuẩn:

  1. Dùng Icon thay vì Text: Giúp tiết kiệm không gian.

  2. Luôn có ToolTipText: Khi người dùng rê chuột lên Icon, phải có một dòng chữ nhỏ hiện lên giải thích nút đó làm gì.

  3. Dấu phân cách (Separator): Dùng addSeparator() để chia nhóm các nút (ví dụ: nhóm File riêng, nhóm Edit riêng).

Java

// Tạo nút chỉ có Icon
JButton btnSave = new JButton(new ImageIcon("icons/save.png"));

// Thêm Tooltip giải thích
btnSave.setToolTipText("Lưu tài liệu (Ctrl+S)");

// Đưa vào ToolBar
toolBar.add(btnSave);
toolBar.addSeparator(); // Đường kẻ dọc chia nhóm

3. Quy tắc đặt Layout cho JToolBar

Vì thanh công cụ thường nằm ngay bên dưới thanh Menu (ở mép trên cùng của màn hình), bạn bắt buộc phải thiết lập Layout tổng của cửa sổ là BorderLayout (hoặc GridBagLayout), sau đó đặt JToolBar vào vùng BorderLayout.NORTH.

Java

frame.setLayout(new BorderLayout());
frame.add(toolBar, BorderLayout.NORTH);

4. Source Code Thực Chiến: WordPad Mini (Tích hợp MenuBar và ToolBar)

Đoạn mã sau sẽ mô phỏng giao diện của phần mềm WordPad với đầy đủ cả JMenuBar (Bài 21) và JToolBar kết hợp. Thanh công cụ sẽ chứa nút Lưu, Copy, Paste và một JComboBox để chọn kích cỡ chữ.

Java

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

public class JToolBarDemo extends JFrame {

    public JToolBarDemo() {
        setTitle("WordPad Mini - JToolBar Demo");
        setSize(700, 500);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        
        // Đảm bảo Layout chính là BorderLayout
        setLayout(new BorderLayout());

        // ==========================================
        // KHU VỰC 1: MENU BAR (Phía trên cùng)
        // ==========================================
        JMenuBar menuBar = new JMenuBar();
        JMenu menuFile = new JMenu("File");
        menuFile.add(new JMenuItem("New"));
        menuFile.add(new JMenuItem("Open..."));
        menuBar.add(menuFile);
        setJMenuBar(menuBar); // Gắn MenuBar

        // ==========================================
        // KHU VỰC 2: JTOOLBAR (Nằm dưới MenuBar)
        // ==========================================
        JToolBar toolBar = new JToolBar();
        toolBar.setFloatable(false); // Cố định thanh ToolBar, không cho kéo thả
        toolBar.setRollover(true); // Hiệu ứng hover nổi viền mượt mà cho các nút

        // ----- Nhóm nút thao tác File -----
        JButton btnNew = createToolBarButton("https://cdn-icons-png.flaticon.com/32/2983/2983783.png", "Tạo file mới");
        JButton btnSave = createToolBarButton("https://cdn-icons-png.flaticon.com/32/2874/2874052.png", "Lưu file");
        
        toolBar.add(btnNew);
        toolBar.add(btnSave);
        toolBar.addSeparator(); // Vạch kẻ phân cách

        // ----- Nhóm nút thao tác Edit -----
        JButton btnCopy = createToolBarButton("https://cdn-icons-png.flaticon.com/32/1621/1621635.png", "Copy (Ctrl+C)");
        JButton btnPaste = createToolBarButton("https://cdn-icons-png.flaticon.com/32/1056/1056461.png", "Paste (Ctrl+V)");
        
        toolBar.add(btnCopy);
        toolBar.add(btnPaste);
        toolBar.addSeparator();

        // ----- Tích hợp Component khác vào ToolBar (JComboBox) -----
        toolBar.add(new JLabel(" Kích thước chữ: "));
        String[] fontSizes = {"12", "14", "16", "18", "24", "32"};
        JComboBox<String> cbFontSize = new JComboBox<>(fontSizes);
        cbFontSize.setSelectedIndex(2); // Chọn mặc định size 16
        // Ép kích thước tối đa để ComboBox không phình to chiếm hết ToolBar
        cbFontSize.setMaximumSize(new Dimension(60, 30)); 
        
        toolBar.add(cbFontSize);

        // Gắn ToolBar vào vùng BẮC của BorderLayout
        add(toolBar, BorderLayout.NORTH);

        // ==========================================
        // KHU VỰC 3: KHUNG SOẠN THẢO
        // ==========================================
        JTextArea textArea = new JTextArea("Xin chào! Hãy thử đổi kích thước chữ bằng JComboBox phía trên.");
        textArea.setFont(new Font("Arial", Font.PLAIN, 16));
        textArea.setLineWrap(true);
        add(new JScrollPane(textArea), BorderLayout.CENTER);

        // ==========================================
        // LOGIC SỰ KIỆN: Đổi cỡ chữ
        // ==========================================
        cbFontSize.addActionListener(e -> {
            int size = Integer.parseInt((String) cbFontSize.getSelectedItem());
            // Cập nhật lại Font cho TextArea với cỡ chữ mới
            Font currentFont = textArea.getFont();
            textArea.setFont(new Font(currentFont.getName(), currentFont.getStyle(), size));
        });
    }

    // Hàm tiện ích: Tạo nút bấm chuẩn cho ToolBar (Thu nhỏ icon từ internet)
    private JButton createToolBarButton(String iconUrl, String tooltip) {
        JButton button = new JButton();
        try {
            // Tải và thu nhỏ ảnh về kích thước 24x24 pixel
            Image img = new ImageIcon(new java.net.URL(iconUrl)).getImage();
            Image scaledImg = img.getScaledInstance(24, 24, Image.SCALE_SMOOTH);
            button.setIcon(new ImageIcon(scaledImg));
        } catch (Exception ex) {
            button.setText("?"); // Fallback nếu lỗi mạng
        }
        
        button.setToolTipText(tooltip);
        button.setFocusPainted(false);
        return button;
    }

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

Bạn hãy chạy code, rê chuột vào các biểu tượng hình ảnh để xem dòng Tooltip hướng dẫn hiện lên. Thử click vào JComboBox "16" chuyển sang "32" để thấy kích thước văn bản bên dưới lập tức thay đổi.

Backend

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí