[Tips Tkinter]: Menampilkan Image pada Komponen Button Tkinter

Pada setiap aplikasi, kita sering melihat adanya menu dalam bentuk toolbar. Toolbar ini berisi gambar dan teks. Nah, pada artikel ini, kami akan membagikan sebuah tips sederhana yaitu Bagaimana menampilkan gambar/image pada komponen Button Tkinter?. So…Langsung ke TKP saja ya…

Bentuk toolbar yang berisi gambar dan teks.

Bentuk toolbar yang berisi gambar dan teks.

Komponen Button – Tkinter

Selain berfungsi sebagai tombol dengan tampilan teks, komponen Button juga bisa menampilkan gambar saja, atau gabungan gambar dengan teks. Button memiliki sebuah pilihan (option) untuk menampilkan gambar, yaitu option ‘image‘.

Tipe File Gambar

Tipe file gambar yang bisa digunakan sebagai image di Button adalag file GIF. Sebenarnya Python juga bisa menampilkan file gambar lainnya seperti JPG, PNG, ICO, namun kita harus menambahkan aplikasi pihak ketiga (baca: instal) yaitu Pillow.

Tata Letak Teks dan Gambar

Untuk mengatur tata letak antara teks dengan gambar, Button memiliki option compound. Dimana kita bisa mengatur posisi teks terhadap gambar.

Berikut ini listing program menampilkan gambar pada komponen Button – Tkinter:

# file: image-button.py
# Deskripsi Program:
#   Menampilkan gambar pada komponen Button - Tkinter.
#
# Vesi Python: 3.2
# Update terakhir: 14 Mei 2014
# Dibuat oleh: Klinik Python ID

from tkinter import *
import tkinter.ttk as ttk
import tkinter.messagebox as mb


class ImageButton:
    def __init__(self, parent, title):
        self.parent = parent

        self.aturWindow(title)
        self.aturKomponen()

    def aturWindow(self, title):
        # atur ukuran window
        self.parent.geometry("500x75")

        # atur judul
        self.parent.title(title)

    def aturKomponen(self):
        # set frame utama --> mainFrame
        mainFrame = Frame(self.parent, bd=5)
        mainFrame.pack(fill=BOTH, expand=YES)

        # set toolbar (button dengan teks + gambar)
        #***********************************
        #************************************

        # set tombol Tambah
        self.imgTambah = PhotoImage(file='Add.gif')
        self.btnTambah = Button(mainFrame, text='Tambah', image=self.imgTambah,
                                compound='top', command=self.onKlikTambah,
                                width=70)
        self.btnTambah.pack(side=LEFT, fill=Y)

        # set tombol Hapus
        self.imgHapus = PhotoImage(file='erase.gif')
        self.btnHapus = Button(mainFrame, text='Hapus', image=self.imgHapus,
                                compound='top', command=self.onKlikHapus,
                                width=70)
        self.btnHapus.pack(side=LEFT, fill=Y)

        # set tombol Simpan
        self.imgSimpan = PhotoImage(file='save.gif')
        self.btnSimpan = Button(mainFrame, text='Simpan', image=self.imgSimpan,
                                compound='top', command=self.onKlikSimpan,
                                width=70)
        self.btnSimpan.pack(side=LEFT, fill=Y)

        # set tombol Bantuan
        self.imgBantuan = PhotoImage(file='help.gif')
        self.btnBantuan = Button(mainFrame, text='Bantuan', image=self.imgBantuan,
                                compound='top', command=self.onKlikBantuan,
                                width=70)
        self.btnBantuan.pack(side=LEFT, fill=Y)

        # set tombol Keluar
        self.imgKeluar = PhotoImage(file='exit.gif')
        self.btnKeluar = Button(mainFrame, text='Keluar', image=self.imgKeluar,
                                compound='top', command=self.onKlikKeluar,
                                width=70)
        self.btnKeluar.pack(side=RIGHT, fill=Y)

    def onKlikTambah(self, event=None):
        mb.showinfo('Informasi', 'Tombol Tambah terpilih', parent=self.parent)

    def onKlikHapus(self, event=None):
        mb.showinfo('Informasi', 'Tombol Hapus terpilih', parent=self.parent)

    def onKlikSimpan(self, event=None):
        mb.showinfo('Informasi', 'Tombol Simpan terpilih', parent=self.parent)

    def onKlikKeluar(self, event=None):
        if mb.askyesno('Konfirmasi', 'Keluar dari program?', parent=self.parent):
            self.parent.destroy()

    def onKlikBantuan(self, event=None):
        mb.showinfo('Informasi', 'Tombol Bantuan terpilih', parent=self.parent)

if __name__ == '__main__':
    root = Tk()

    app = ImageButton(root, ":: Demo Menampilkan Image pada Komponen Button Tkinter::")

    root.mainloop()

Tampilan Demo Program:

Toolbar dengan ikon gambar.

Toolbar dengan ikon gambar.

Download Kode Program:
Demo Menampilkan Image Pada Komponen Button – Tkinter

Woke!…Semoga Bermanfaat dan Salam PythonMania!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s