Series Java Swing Bài 11: JLabel - Trái tim của việc hiển thị văn bản và hình ảnh

Chào mừng bạn bước sang Phần 3: Các thành phần giao diện cơ bản. Trong phần này, chúng ta sẽ bắt đầu với Component đơn giản nhất nhưng xuất hiện ở 100% các dự án giao diện: JLabel.

JLabel sinh ra với một mục đích duy nhất: Hiển thị nội dung chỉ đọc (Read-only). Người dùng không thể click vào để sửa chữ trên JLabel như JTextField được. Tuy nhiên, nó không hề nhàm chán, vì JLabel có thể hiển thị văn bản, hình ảnh, hoặc kết hợp cả hai.

1. Hiển thị Văn bản (Text)

Việc khởi tạo một JLabel hiển thị chữ vô cùng đơn giản. Sau khi khởi tạo, bạn có thể tùy biến Font chữ, màu sắc và vị trí căn lề của nó.

Java

// Khởi tạo JLabel với văn bản và căn giữa (tương tự text-align: center)
JLabel lblText = new JLabel("Xin chào Java Swing", SwingConstants.CENTER);

// Thay đổi nội dung sau khi khởi tạo
lblText.setText("Nội dung mới đã được cập nhật!");

// Tùy chỉnh Font chữ (Tên Font, Kiểu dáng, Kích thước)
// Font.PLAIN (Thường), Font.BOLD (In đậm), Font.ITALIC (In nghiêng)
lblText.setFont(new Font("Arial", Font.BOLD, 24));

// Đổi màu chữ
lblText.setForeground(Color.BLUE); // Dùng màu mặc định
lblText.setForeground(new Color(255, 100, 50)); // Dùng mã màu RGB

2. Hiển thị Hình ảnh bằng ImageIcon

Để hiển thị một bức ảnh lên giao diện, Swing không có Component nào tên là "JImage". Thay vào đó, bạn sẽ nhét bức ảnh đó vào trong một cái JLabel thông qua lớp ImageIcon.

Java

// Đọc ảnh từ đường dẫn hoặc URL
ImageIcon myIcon = new ImageIcon("C:\\images\\avatar.png");
JLabel lblImage = new JLabel(myIcon);

Vấn đề muôn thuở: Chỉnh kích thước ảnh (Scaling Image)

Khi bạn load một bức ảnh có kích thước gốc là 1920x1080 (FullHD) vào JLabel, nó sẽ bê nguyên kích thước khổng lồ đó lên giao diện và làm vỡ tung Layout của bạn. JLabel không tự động thu nhỏ ảnh.

Để giải quyết, bạn phải thu nhỏ ảnh gốc thông qua đối tượng Image trước khi đưa vào ImageIcon:

Java

// 1. Tải ảnh gốc
ImageIcon originalIcon = new ImageIcon("duong_dan_anh.png");
Image originalImage = originalIcon.getImage();

// 2. Thu nhỏ ảnh về kích thước mong muốn (ví dụ 100x100 pixel)
// SCALE_SMOOTH giúp ảnh thu nhỏ không bị răng cưa
Image scaledImage = originalImage.getScaledInstance(100, 100, Image.SCALE_SMOOTH);

// 3. Đóng gói lại vào ImageIcon và đưa cho JLabel
ImageIcon scaledIcon = new ImageIcon(scaledImage);
JLabel lblAvatar = new JLabel(scaledIcon);

3. Kết hợp cả Chữ và Ảnh trên cùng một JLabel

Bạn hoàn toàn có thể tạo ra một JLabel vừa có ảnh (Icon), vừa có chữ (Text) bên cạnh. Đây là tính năng rất hay dùng để làm các thẻ nhân viên, danh sách sản phẩm.

Theo mặc định, chữ sẽ nằm ở bên phải, canh giữa theo chiều dọc so với ảnh. Bạn có thể thay đổi vị trí này thông qua hai phương thức:

• setHorizontalTextPosition(): Vị trí ngang của chữ (Trái / Phải / Giữa bức ảnh).

• setVerticalTextPosition(): Vị trí dọc của chữ (Trên / Dưới / Giữa bức ảnh).

Java

JLabel lblCombined = new JLabel("Lưu dữ liệu", iconSave);

// Đẩy chữ chui xuống DƯỚI bức ảnh
lblCombined.setVerticalTextPosition(SwingConstants.BOTTOM);
// Đưa chữ vào CHÍNH GIỮA theo chiều ngang của bức ảnh
lblCombined.setHorizontalTextPosition(SwingConstants.CENTER);

4. Source Code Thực Chiến

Đoạn code dưới đây sẽ hiển thị 3 loại JLabel: Chữ thường, Ảnh được thu nhỏ (lấy trực tiếp từ Internet qua URL để bạn copy chạy được luôn), và sự kết hợp Ảnh + Chữ.

Java

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

public class JLabelDemo extends JFrame {

    public JLabelDemo() {
        setTitle("Khám phá JLabel");
        setSize(400, 450);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        
        // Dùng GridLayout chia màn hình thành 3 dòng, 1 cột
        setLayout(new GridLayout(3, 1, 10, 10));
        getContentPane().setBackground(Color.WHITE);

        // ==========================================
        // 1. JLabel Chỉ có chữ (Tùy biến Font & Màu)
        // ==========================================
        JLabel lblTextOnly = new JLabel("1. Lập Trình Java Swing", SwingConstants.CENTER);
        lblTextOnly.setFont(new Font("Tahoma", Font.BOLD, 22));
        lblTextOnly.setForeground(new Color(41, 128, 185)); // Màu xanh dương
        
        // ==========================================
        // 2. JLabel Chỉ có ảnh (Scale ảnh mượt mà)
        // ==========================================
        JLabel lblImageOnly = new JLabel(SwingConstants.CENTER);
        try {
            // Tải một icon ngẫu nhiên từ internet
            URL url = new URL("https://cdn-icons-png.flaticon.com/128/226/226777.png");
            ImageIcon originalIcon = new ImageIcon(url);
            
            // Ép kích thước ảnh về 64x64
            Image scaledImg = originalIcon.getImage().getScaledInstance(64, 64, Image.SCALE_SMOOTH);
            lblImageOnly.setIcon(new ImageIcon(scaledImg));
            
        } catch (Exception e) {
            lblImageOnly.setText("Không tải được ảnh");
        }

        // ==========================================
        // 3. JLabel Chữ + Ảnh (Chữ nằm dưới ảnh)
        // ==========================================
        JLabel lblCombined = new JLabel("2. Biểu tượng Java");
        try {
            URL url = new URL("https://cdn-icons-png.flaticon.com/128/5968/5968282.png");
            Image scaledImg = new ImageIcon(url).getImage().getScaledInstance(50, 50, Image.SCALE_SMOOTH);
            lblCombined.setIcon(new ImageIcon(scaledImg));
        } catch (Exception e) {}
        
        // Đặt vị trí chữ
        lblCombined.setHorizontalAlignment(SwingConstants.CENTER); // Căn giữa toàn bộ Label
        lblCombined.setVerticalTextPosition(SwingConstants.BOTTOM); // Chữ nằm dưới ảnh
        lblCombined.setHorizontalTextPosition(SwingConstants.CENTER); // Chữ ngay chính giữa ảnh
        lblCombined.setFont(new Font("Arial", Font.ITALIC, 14));

        // Thêm vào Frame
        add(lblTextOnly);
        add(lblImageOnly);
        add(lblCombined);
    }

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