Pemrograman Java : Membuat Image Icon Efek Kaca pada Swing JLabel


Swing adalah salah satu package Java yang cukup menarik dan banyak sekali dipakai untuk pemrograman grafis. Tidak hanya mudah digunakan, tetapi juga mudah dimodifikasi. Bagian yang cukup menarik untuk dimodifikasi adalah tampilan dari objek swing tersebut.

Untuk menampilkan icon, biasaya digunakan objek class JLabel, dengan sebuah gambar dengan gambar PNG ukuran tertentu. Dari sisi desain, sebenarnya pembuatan icon tersebut bisa dimodifikasi sehingga tampilannya menjadi lebih menarik dengan efek kaca seperti contoh di bawah ini:

Screenshot from 2015-05-23 09:33:53

Langsung saja kita bahas cara pembuatannya.

Langkah pertama, membuat class bantuan untuk mencetak gambar efek kaca. Class bantuan ini dibuat agar method untuk membuat gambar efek kaca dapat dipakai di class lainnya, tidak hanya turunan JLabel yang akan dibuat tapi dapat digunakan oleh turunan kelas-kelas lainnya. Berikut adalah pembuatan Class dan import package yang dibutuhkan.

import java.awt.*;
import java.awt.image.BufferedImage;

/**
 *
 * @author ocol
 */
public final class ImageUtility {

}

Selanjutnya kita buat method untuk mengubah Image menjadi BufferedImage, sebab class yang digunakan sebagai icon pada komponen Swing adalah Image. Padahal, Image tidak dapat dimanipulasi secara langsung dengan menggunakan Java 2D API. Letakkan method ini di dalam class ImageUtility yang kita buat sebelumnya.

/**
*
* @param source image
* @return BufferedImage
*/
public static final BufferedImage getBuffered (final Image source){
    final int width = source.getWidth(null);
    final int height = source.getHeight(null);
        
    final BufferedImage dest = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
        
    final Graphics2D gd = (Graphics2D)dest.getGraphics();
    gd.drawImage(source, 0, 0, null);
    gd.dispose();
        
    return dest;
}

Berikutnya adalah membuat method untuk membuat efek kaca. Langkah ini adalah bagian terpenting dalam pembuatan icon efek kaca. Object gambar bertipe BufferedImage dimanipulasi sedemikian rupa menggunakan AlphaComposite sebagai mask untuk menampilkan gradasi. Hampir semua langkah dilakukan dalam object g yang merupakan instance Graphics2D dari BufferedImage yang akan dibuat.

    /**
     * 
     * @param source buffer image
     * @return BufferedImage
     */
    public static final BufferedImage getGlassEffect (final BufferedImage source) {
        final BufferedImage dest=
                new BufferedImage(source.getWidth(), source.getHeight() + source.getHeight()/2, BufferedImage.TYPE_INT_ARGB);
        
        final Graphics2D gd = (Graphics2D)dest.getGraphics();
        gd.drawImage(source, 0, 0, null);
        gd.scale(1, -1);
        gd.drawImage(source, 0, -source.getHeight() * 2, null);
        gd.scale(1, -1);
        gd.translate(0, source.getHeight());
        gd.setPaint(new GradientPaint(0, 0, new Color(1F, 1F, 1F, 0.3F), 0, source.getHeight()/2, new Color(1F, 1F, 1F, 0F)));
        
        gd.setComposite(AlphaComposite.DstIn);
        gd.fillRect(0, 0, source.getWidth(), source.getHeight());
        gd.dispose();
        
        return dest;
    }
    
    /**
     * 
     * @param source image
     * @return BufferedImage
     */
    public static final BufferedImage getGlassEffect (final Image source) {
        return  ImageUtility.getGlassEffect(ImageUtility.getBuffered(source));
    }

Sekarang Class bantuan ImageUtility selesai dibuat. Saatnya membuat class turunan dari JLabel. Tujuan akhir pembuatan class ini adalah sebagai komponen yang dapat digunakan berkali-kali, baik secara manual maupun dengan menggunakan IDE. Untuk itu, penurunan class harus disesuaikan dengan design pattern dari komponen Swing yang lain. Langkah awal, membuat class tersebut kemudian mendeklarasikan object dari class javax.swing.Icon yang akan digunakan sebagai icon efek kaca.

import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import util.ImageUtility;

/**
 *
 * @author ocol
 */
public class Label extends JLabel {
    
    public Label() {
        super();
    }
    
    @Override
   public void setIcon(Icon defaultIcon) {
       if (defaultIcon instanceof ImageIcon) {
           ImageIcon icon = (ImageIcon) defaultIcon;
           icon = new ImageIcon(ImageUtility.getGlassEffect(icon.getImage()));
           super.setIcon(icon);
       } else {
           super.setIcon(defaultIcon);
       }
   }

}

Sekarang sudah dapat kita uji coba. Kita akan buat JFrame yang nantinya akan terdapat objek class Label yang sebelumnya kita buat. berikut adalah kodenya.

import customswing.Label;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;

/**
 *
 * @author ocol
 */
public class FrameApp extends JFrame {
    
    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {

            @Override
            public void run() {
                new FrameApp().setVisible(true);
            }
        });
    }
    
    public FrameApp() {
        super();
        
        Label label = new Label();
        label.setIcon(new ImageIcon(getClass().getResource("/images/orang run.png")));
        
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        add(label);
        pack();
    }

}

Hasil akhirnya seperti dibawah ini saat dijalankan.

Screenshot from 2015-05-23 09:33:53

Jika rekan-rekan kesulitan dalam pembuatannya, anda dapat mendownload source code projectnya di sini.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s