Home

Java Swing, Membuat Icon dari Font

Mari berdiskusi bersama kami di Group Facebook Kurung Kurawal

fontasicon

Judulnya terdengar seperti iconfont ? Memang ide ini muncul dari konsep tersebut.

Jadi, ada kebutuhan membuat JButton di Swing, maunya sederhana, dan agak aneh, biasanya, icon di JButton dibuat semenarik mungkin, dengan gambar-gambar ilustrasi yang mewakili action dari Button tersebut. Tapi khusus dalam kasus ini, maunya adalah icon tersebut adalah berupa huruf pertama dari teks di tombol.

Jadi, jika teks di tombolnya adalah Proses, maka icon yang diinginkan adalah berupa huruf P. Gimana caranya ?

Gampang, (cara mereka dulu) buka image editor misalnya, Toko Foto (terjemahkan ke bahasa Inggris), dan buat saja icon-icon dengan 1 huruf, A sampai Z, nanti tinggal dipakai di Swing, dengan JButton.setIcon(icon). Beres kan ?

Betul, tidak salah, cara itu bisa digunakan.

Tapi, bagaimana jika gunakan murni koding saja? Tanpa perlu image editor untuk membuat icon-icon sederhana tersebut. Kita mulai.

file test.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import javax.swing.*;
import java.awt.*;
 
/**
 * Created by konglie on 6/30/16.
 */
public class test {
    /**
     * main class, hanya menampilkan tombol dengan teks, seperti gambar di atas
     * @param args
     */
    public static void main(String args[]){
        Font font = new Font("HelveticaNueue", Font.PLAIN, 32);
        Color color = Color.BLUE;
 
        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(frame.EXIT_ON_CLOSE);
        ((JComponent)frame.getContentPane()).setBorder(BorderFactory.createEmptyBorder(5,5,5,5));
 
        JLabel title = new JLabel("<html><center>Menggunakan Font<br/>sebagai Icon</center></html>");
        title.setFont(font);
        title.setHorizontalAlignment(SwingConstants.CENTER);
        frame.getContentPane().add(title, BorderLayout.NORTH);
 
        JPanel body = new JPanel(new FlowLayout(FlowLayout.CENTER, 5, 5));
 
        String[] buttons = "Proses,Tunda,Lapor,Batal".split(",");
        for(int i = 0; i < buttons.length; i++){
            JButton btn = new JButton("tombol " + buttons[i]);
            btn.setIcon(FontAsIcon.createIcon(buttons[i].substring(0,1), font, color));
            body.add(btn);
        }
        frame.getContentPane().add(body, BorderLayout.CENTER);
 
        frame.setSize(500, 300);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

import javax.swing.*;
import java.awt.*;
import java.awt.image.BufferedImage;
 
/**
 * Created by konglie on 6/30/16.
 */
public class FontAsIcon {
    /**
     * membuat Icon warna hitam dengan gambar berupa teks
     *
     * @param text teks yang diinginkan
     * @param font font yang diinginkan
     * @return icon
     */
    public static Icon createIcon(String text, Font font){
        return createIcon(text, font, Color.BLACK);
    }
 
    /**
     * membuat Icon dengan gambar berupa teks
     *
     * @param text teks yang diinginkan
     * @param font font yang digunakan
     * @param color warna icon
     * @return icon
     */
    public static Icon createIcon(String text, Font font, Color color){
        // ukur dulu ukuran gambar yang akan dihasilkan
        BufferedImage img = new BufferedImage(1, 1, BufferedImage.TYPE_INT_ARGB);
        Graphics2D g2d = img.createGraphics();
        g2d.setFont(font);
 
        // dengan menggunakan FontMetrics, karena ukuran icon tergantung dari ukuran font
        // dan ukuran font berbeda-beda, jika menggunakan font-family yang berbeda
        FontMetrics fm = g2d.getFontMetrics();
        int width = fm.stringWidth(text);
        int height = fm.getHeight();
        g2d.dispose();
 
        // buat gamba
        img = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
        g2d = img.createGraphics();
        g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
        g2d.setRenderingHint(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
        g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
        g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
        g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
        g2d.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);
        g2d.setFont(font);
        fm = g2d.getFontMetrics();
 
        // set warna
        g2d.setColor(color);
 
        // "tulis" ke gambar tersebut
        g2d.drawString(text, 0, fm.getAscent());
 
        // pekerjaan si gambar selesai
        g2d.dispose();
 
        // buat icon
        return new ImageIcon(img);
    }
}

Demikian, semoga bisa berguna untuk kita semua.