Macam - macam layout containers pada library python yaitu PySide

Belajarpython – assalamualaikum wr. wb.

Jumpa lagi nih temen – temen… pada postingan saya ai ini saya akan mencoba untuk melanjutkan postingan saya yang sebelumnya.. yaitu sebuah postingan saya mengenai jenis – jenis dari layout management.. lalu apa yang akan saya bahas pada postingan saya kali ini ? jadi, pada postingan saya kali ini, saya akan mencoba untuk membahas mengenai macam – macam dari layout containers. Apa itu layout containers ? nah jika belum tau, yuk baca juga postingan saya sebelumnya DISINI.

jadi, layout containers ini memiliki macam – macam tersendiri…  terhitung yang saya ketahui terdapat 4 macam dari layout containers ini. Pakah 4 macam itu ? 4 macam tersebut adalah sebagai berikut ini …

1. Box Layout – yang merupakan sebuah layout yang bentuk nya lebih mirip seperti ebuah  kotak.
2. Grid layout – merupakan sebuah layout yang mirip seperti sebuah kolom.
3. Form layout – layout yang biasa digunakan untuk membuat formulir.
4. Stacked layout – merupakan sebuah layout yang memungkinkan terjadinya sebuah penumpukan. 

Nah itu dia temen – temen macam – macam dari layout containers ini.. nah untuk penjelasan lebih lengkap dan contoh – contoh dari tiap – tiap macam  tersebut kalian bisa menyimak pembahasan saya di bawah ini.. yuk langsung saja kita simak sama – sama penjelasan saya...

Macam – macam Layout management : Box layout.

Jenis layout yang satu ini merupakan jenis layout yang mirip seperti kotak. Dan pada layout jenis ini pun, terdapat dua jenis. Yaitu layout horizontal dan vertical. Kalian bisa menggunakan salah satu dari keduanya sesuai kebutuhan kalian. Dari namanya saja kita sudah tau ya temen – temen… apa maksud dari jenis horizontal maupun vertical. Namun supaya lebih jelas akan saya jelaskan satu persatu di bawah ini…

Horizontal box layout.

Pada layout jenis ini, tentu kita bisa membayangkan bagaimana bentuknya. Karena horizontal sendiri dapat kita artikan sebagai garis yang melintang dari sisi kiri ke kanan maupun sebaliknya. Jadi dari kata tersebut bisa kita bayangkan bagaimana layoutnya. Karena layout yang akan dihasilkan akan seperti pengertian yang sudah saya katakana tadi. Yaitu membentuk susunan dari samping kiri ke kanan.

untuk memanggil atau mengatur agar window kita menjadi layout jenis ini, kita dapat menggunakan fungsi seperti di bawah ini :

horizontal = QtGui.QHBoxLayout()
title = QtGui.QLabel('horizontal box layout')
horizontal.addWidget(title)
setLayout(horizontal)

Dan untuk lebih jelasnya, kalian bisa mencoba program yang menggunakan layout horizontal box layout dibawah ini…

import sys
from PySide import QtGui

class Example(QtGui.QWidget):
    
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()
        
    def initUI(self):
        horisontal = QtGui.QHBoxLayout()
        
        title = QtGui.QLabel('horisontal layout')
        horisontal.addWidget(title)

        button = QtGui.QPushButton('layout')
        horisontal.addWidget(button)
        tombol = QtGui.QPushButton('horisontal')
        horisontal.addWidget(tombol)
        
        
        self.setLayout(horisontal)
        self.setGeometry(300,300,350,200)
        self.setWindowTitle('Horisontal box layout')    
        self.show()
def main():
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

nah itu dia temen – temen contoh program yang menggunakan horizontal box layout ini. Cukup mudah bukan ? silahkan di lihat dan dipahami bila perlu.. hehe .. seperti apakah ketika program diatas kita jalan kan ? yuk langsung saja kita simak screenshoot nya di bawah ini..



Nah itu dia contoh screenshoot dari program diatas… bagaimana ? sudah jelaskan bentuk layout dari Horizontal box ini ? ya saya rasa sudah jelas dengan adanya gambar diatas…

Vertical box layout.

Berbeda dengan horizontal, vertical ini dapat kita artikan sebagai sebagai garis yang membentang dari atas menuju kebawah maupun sebaliknya. Jadi, dari pengertian tersebut, tentu kita dapat menembak bagaimana susunan dan bentuk dari vertical box layout ini. Nah untuk mengatur atau menyetel layout window kita menjadi vertical box layout, kalian bisa menggunakan code di bawah ini.

vertikal = QtGui.QVBoxLayout()
title = QtGui.QLabel('vertikal box layout')
vertikal.addWidget(title)
setLayout(vertikal)

untuk lebih memperjelas pengertian saya mengenai layout yang satu ini, kalian bisa mencoba program dibawah ini ya….

import sys
from PySide import QtGui

class Example(QtGui.QWidget):
   
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()
       
    def initUI(self):
        vertikal = QtGui.QVBoxLayout()
       
        title = QtGui.QLabel('vertikal layout')
        vertikal.addWidget(title)

        button = QtGui.QPushButton('layout')
        vertikal.addWidget(button)
        tombol = QtGui.QPushButton('vertikal')
        vertikal.addWidget(tombol)
       
       
        self.setLayout(vertikal)
        self.setGeometry(300,300,350,200)
        self.setWindowTitle('layout vertikal box')  
        self.show()

def main():
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

nah itu dia programnya temen – temen… gimana ? masih sama kan dengan program horizontal box ? namun hanya ada sedikit perbedaan saja. Lalu seperti apakah hasil dari program diatas ketika saya jalankan ? apakah sama dengan yang di atas ? untuk menjawab pertanyaan – pertanyaan tersebut, yuk langsung saja kita simak hasil screenshoot ketika programnya saya jalankan seperti di bawah ini…



Nah itu dia hasilnya temen – temen… bisa kita lihat ya perbedaan perbedaan nya antara horizontal box layout dan vertical layout…

Macam – macam Layout management : Grid layout.

Layout jenis ini merupakan sebuah layout yang bisa kita analogikan posisinya seperti sebuah table. Jadi layaknya sebuah tabel, untuk menentukan posisinya kita harus memasukkan sebuah kode letak dari widget yang akan kita tempatkan nantinya. Kode – kode letak tersebut bisa kita lihat seperti tabel di bawah ini…

Lokasi	0	1	2
0	0,0	0,1	0,2
1	1,0	1,1	1,2
2	2,0	1,2	2,2

Nah sepeti itulah penempatan lokasi dari layout ini… yang sangat mirip dan bisa kita analagikan seperti layaknya sebuah tabel.. dan untuk cara menggunakan layout jenis ini, kalian bisa lihat code di bawah ini..

grid = QtGui.QGridLayout()
title = QtGui.QLabel('Grid layout')
grid.addWidget(title,0,0)
setLayout(grid)

jadi bisa kita lihat pada program diatas, dua angka 0 diatas merupakan posisi yang akan menambahkan label atau tulisan “grid layout” pada window. Yang artinya kita akan meletakkan tulisan “grid layout” pada posisi kolom 0 dan baris 0 seperti pada tabel.
Untuk mengatur layout ini kita bisa menulikan code “setLayout(QtGui.QGridLayout())” kedalam program kalian… nah untuk lebih jelasnya, kalian bisa melihat code program di bawah ini… atau bisa langsung menyalin lalu menjalankan program tersebut di PC kalian..

import sys
from PySide import QtGui

class Example(QtGui.QWidget):
 
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()
     
    def initUI(self):
        grid = QtGui.QGridLayout()
     
        title = QtGui.QLabel('Grid layout')
        grid.addWidget(title,0,0)

        button = QtGui.QPushButton('layout')
        grid.addWidget(button,0,1)
        tombol = QtGui.QPushButton('grid')
        grid.addWidget(tombol,1,0)
     
     
        self.setLayout(grid)
        self.setGeometry(300,300,350,200)
        self.setWindowTitle('Grid layout')  
        self.show()

def main():
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

nah itu dia program nya temen – temen… Cukup simple kan temen – temen ? lalu seperti apakah ketika program diatas kita jalankan ? yuk langsung saja kita simak dibawah ini contoh screenshoot window yang akan di hasilkan ketika program di atas kita jalankan..



Nah itu dia hasilnya temen – temen … sudah jelaskan bagaimana contoh layout dari grid layout ini ? ya saya yakin kalian pun paham dengannya…

Macam – macam Layout management : form layout.

Melalui namanya saja, tentu kita tau bagaimana tampilan fisik dari layout jenis ini.. jadi seperti namanya, form layout ini merupakan jenis layout yang mirip seperti tampilan formulir atu form. Mirip dengan jenis layout lainnya, untuk memanggil atau menggunakan layout ini dapat menggunakan code seperti berikut ini..

form = QtGui.QFormLayout()
title = QtGui.QLabel('form layout')
txtUsername = QtGui.QLineEdit()
form.addRow(title, txtUsername)
setLayout(form)

nah bisa kita perhatikan code program diatas.. berbeda dengan jenis – jeni layout sebelumnya, layout ini dapat menggunakan fungsi “addROw” yang akan memudahkan kita menambahkan label maupun widget sekaligus agar bisa berjejer rapi layaknya sebuah formulir pada umumnya yang biasa kita lihat pada computer maupun print out di kertas.

Dan untuk lebih jelasnya, kalian bisa mencoba program di bawah ini. Program dibawah ini sudah menggunakan layout form. Sehingga kalian bisa melihat tampilan fisik dari form layout ini.. yuk langsung saja kita lihat code programnya di bawah ini ya….

import sys
from PySide import QtGui

class Example(QtGui.QWidget):
 
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()
     
    def initUI(self):
        self.SetLayout()
     
        self.setGeometry(300,300,350,200)
        self.setWindowTitle('layout vertikal box')  
        self.show()

    def SetLayout(self):
        formLayout = QtGui.QFormLayout(self)

        labelUsername = QtGui.QLabel("Username")
        txtUsername = QtGui.QLineEdit()

        labelPassword = QtGui.QLabel("Password")
        txtPassword = QtGui.QLineEdit()

        formLayout.addRow(labelUsername, txtUsername)
        formLayout.addRow(labelPassword, txtPassword)
     
        self.setLayout(formLayout)

def main():
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

nah itu dia temen – temen code programnya.. sedikit berbeda dengan code program pada layout – layout sebelumnya ya.. lalu seperti apakah penampilan fisik dari program diatas ketika saya jalankan ? nah untuk mengetahuinya, yuk tanpa lama – lama lagi kita simak contoh screenshoot ketika program ini kita jalankan dibawah ini..



Nah itu dia temen – temen GUI yang dihasilkan dari program di atas… bisa kita lihat pada program di atas, antara label teks dan kolom terlihat rapi dan tertata layak nya sebuah form pada umumnya.. hal ini berkat adanya sebuah form layout yang memiliki fungsi “addrow”.

Macam – macam Layout management : stacked layout.

Untuk layout jenis ini bentuk nya akan terlihat seperti namanya. Yaitu stacked yang berarti sebuah tumpukan. Jadi cara kerjanya adalah nantinya akan ada suatu widget yang akan menutupi widget yang lain. Tujuannya adalah untuk menutupi widget yang lainnya. Sehingga yang akan di lihat oleh user hanyalah widget yang ada pada posisi paling atas. Sudah jelas kan temen – temen ?
Nah untuk cara menggunakannya layout yang satu ini sama seperti pada layout - layout sebelumnya. Namun untuk lebih jelasnya kalian bisa lihat di bawah ini..

stack = QtGui.QStackedLayout()
tombol = QtGui.QPushButton('stacked layout')
stack.addWidget(tombol)

nah itu dia temen – temen… masih sama ya seperti pada layout – layout sebelumnya ya.. nah untuk lebih memperjelas dan untuk langsung memberikan contohnya, yuk silahkan di coba program dibawah ini…

import sys
from PySide import QtGui

class Example(QtGui.QWidget):
 
    def __init__(self):
        super(Example, self).__init__()
        self.initUI()
     
    def initUI(self):
        self.stacked = QtGui.QStackedLayout()

        self.tombol = QtGui.QPushButton('stacked')
        self.stacked.insertWidget(3,self.tombol)
        self.tombol.clicked.connect(self.tombol1)

        self.tulisan = QtGui.QLabel('itulah stacked layout')
        self.stacked.insertWidget(1,self.tulisan)

        self.setLayout(self.stacked)
        self.setGeometry(300,300,350,200)
        self.setWindowTitle('layout vertikal box')  
        self.show()

    def tombol1(self) :
        self.stacked.removeWidget(self.tombol)
     
     
def main():
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

nah itu dia temen – temen programnya…. Program tersebut nantinya akan menampilkan sebuah tombol yang penuh satu window.. dan ketika kita klik maka tombol tersebut akan hilang… nah untuk lebih jelasnya, yuk langsung saja kita lihat contoh screenshootnya ketika program diatas saya jalankan.. yuk lihat pada gambar dibawah ini ya..



Nah itu dia contoh screenshootnya temen – temen.. gimana? Sudah paham kan ? hehe semoga saja kalian bisa memahami apa yang sudah saya jelaskan tadi…

Nah itu dia macam – macam layout dari layout containers ini… semoga apa yang sudah saya sampaikan diatas dapat membuat kalian paham ya.. namun, jika ada penjelasan yang kurang jelas atau bahkan tidak bisa dipahami, kalian bisa langsung menanyakannya kepada saya pada kolom komentar yang ada di bawah postingan ini ya temen – temen.. atau bisa menggunakan kontak form yang telah saya sediakan di blog ini… dan bisa mencarinya di halaman paling bawah ya.. atau footer blog ini..

Sekian dulu ya temen – temen.. jangan lupa  di bagikan ketemen – temen kalian ya… baik lewat social media maupun media yang lainnya.. hal tersebut saya jadikan sebagai support kalian terhadap saya.. hehe dan terimakasih sudah mengunjungi blog saya.. dan ucapan terimakasih yang special saya ucapkan kepada kalian yang sudah share… terimakasih…

Wassalamualaikum wr. wb.

• Tweet
• Share
• Share
• Share
• Share

Related Post