The tkinter module possess the following three layout managers:
Arranging widgets on the screen includes determining the size and position of components. Widgets can provide size and alignment information to geometry managers, but the geometry managers has always the final say on the positioning and sizing. The three layout managers should never be mixed in the same master window.
The pack() method
Instead of having to declare precisely where a widget should appear on the display screen, we can declare the positions of widgets with the pack command relative to each other as it takes care of the details. Though the pack command is easier to use, this layout managers is limited in its possibilities compared to the grid and place mangers. For simple applications it is definitely the manager of choice.
See the example below:
from tkinter import *
root = Tk()
root.title('Using pack()')
Label(root, text="Red Sun", bg="red", fg="white").pack()
Label(root, text="Green Grass", bg="green", fg="black").pack()
Label(root, text="Blue Sky", bg="blue", fg="white").pack()
mainloop()
The output of the program is shown below:
In the above program we have packed three labels into the parent widget "root". We used the pack() without any options which decides in what way to arrange the labels. As we can see, it has chosen to place the label widgets on top of each other and center them with each label has been given the size of the text.
To make all the widgets look uniform we can use the fill = X option as shown in the program below:
from tkinter import *
root = Tk()
root.title('Using pack()')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X)
mainloop()
The output of the program is shown below:
The pack() manager has padding options which are:
1. external padding in y direction
2. external padding in x direction
3. internal padding in x direction
4. internal padding y direction
Lets implement these padding in the following programs:
1. external padding in y direction
The following program shows implementation of external padding in y direction or Vertical external padding:
from tkinter import *
root = Tk()
root.title('Vertical external padding')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X,pady=10)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X,pady=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X,pady=10)
mainloop()
The output of the program is shown below:
2. external padding in x direction
The following program shows implementation of external padding in x direction or Horizontal external padding:
from tkinter import *
root = Tk()
root.title('Horizontal external padding')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X,padx=10)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X,padx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X,padx=10)
mainloop()
The output of the program is shown below:
3. internal padding in y direction
The following program shows implementation of internal padding in y direction or Vertical internal padding:
from tkinter import *
root = Tk()
root.title('Vertical external padding')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack()
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(ipadx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(ipady=10)
mainloop()
The output of the program is shown below:
4. internal padding in x direction
The following program shows implementation of internal padding in x direction or Horizontal internal padding:
from tkinter import *
root = Tk()
root.title('Vertical external padding')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack()
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(ipadx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack()
mainloop()
The output of the program is shown below:
If we want to place the three label side by side now and shorten the text slightly we can do in the following way:
from tkinter import *
root = Tk()
root.title('Side by side')
w = Label(root, text="red", bg="red", fg="white")
w.pack(padx=5, pady=10, side=LEFT)
w = Label(root, text="green", bg="green", fg="black")
w.pack(padx=5, pady=20, side=LEFT)
w = Label(root, text="blue", bg="blue", fg="white")
w.pack(padx=5, pady=20, side=LEFT)
mainloop()
The output of the program is shown below:
If we change LEFT to RIGHT in the previous example, we get the colors in reverse order:
from tkinter import *
root = Tk()
root.title('Side by side')
w = Label(root, text="red", bg="red", fg="white")
w.pack(padx=5, pady=10, side=RIGHT)
w = Label(root, text="green", bg="green", fg="black")
w.pack(padx=5, pady=20, side=RIGHT)
w = Label(root, text="blue", bg="blue", fg="white")
w.pack(padx=5, pady=20, side=RIGHT)
mainloop()
The Place Geometry Manager
The Place geometry manager allows us to explicitly set the position and size of a window, either in absolute terms, or relative to another window. The place manager can be accessed through the place method and can be applied to all standard widgets.
We use the place geometry manager in the following example. In the following program we assign to every label a different color, which we randomly create using the randrange method of the random module. We calculate the brightness (grey value) of each color. If the brightness is less than 120, we set the foreground colour (fg) of the label to White otherwise to black, so that the text can be easier read. See the code below:
from tkinter import *
import random
root = Tk()
root.title('Place geometry manager')
root.geometry("170x200+30+30")
languages = ['Python','Perl','C++','Java','Tcl/Tk']
labels = range(5)
for i in range(5):
ct = [random.randrange(256) for x in range(3)]
brightness = int(round(0.299*ct[0] + 0.587*ct[1] + 0.114*ct[2]))
ct_hex = "%02x%02x%02x" % tuple(ct)
bg_colour = '#' + "".join(ct_hex)
l = Label(root,
text=languages[i],
fg='White' if brightness < 120 else 'Black',
bg=bg_colour)
l.place(x = 20, y = 30 + i*30, width=120, height=25)
root.mainloop()
The output of the program is shown below:
The Grid Manager
The Grid geometry manager places the widgets in a 2-dimensional table, which consists of a number of rows and columns. The position of a widget is defined by a row and a column number. Widgets with the same column number and different row numbers will be above or below each other. Correspondingly, widgets with the same row number but different column numbers will be on the same "line" and will be beside of each other, i.e. to the left or the right.
Using the grid manager means that we create a widget, and use the grid method to tell the manager in which row and column to place them. The size of the grid doesn't have to be defined, because the manager automatically determines the best dimensions for the widgets used. See the code below:
from tkinter import *
import random
root = Tk()
root.title('Grid Manager')
colours = ['red','green','orange','white','yellow','blue']
r = 0
for c in colours:
Label(text=c, relief=RIDGE,width=15).grid(row=r,column=0)
Entry(bg=c, relief=SUNKEN,width=10).grid(row=r,column=1)
r = r + 1
root.mainloop()
The output of the program is shown below:
Try to make some more programs to practice these Layout Managers. I'll end this post now and till we meet next, keep learning and practicing Python as Python is easy to learn!
- pack
- grid
- place
- arrange widgets on the screen
- register widgets with the underlying windowing system
- manage the display of widgets on the screen
Arranging widgets on the screen includes determining the size and position of components. Widgets can provide size and alignment information to geometry managers, but the geometry managers has always the final say on the positioning and sizing. The three layout managers should never be mixed in the same master window.
The pack() method
Instead of having to declare precisely where a widget should appear on the display screen, we can declare the positions of widgets with the pack command relative to each other as it takes care of the details. Though the pack command is easier to use, this layout managers is limited in its possibilities compared to the grid and place mangers. For simple applications it is definitely the manager of choice.
See the example below:
from tkinter import *
root = Tk()
root.title('Using pack()')
Label(root, text="Red Sun", bg="red", fg="white").pack()
Label(root, text="Green Grass", bg="green", fg="black").pack()
Label(root, text="Blue Sky", bg="blue", fg="white").pack()
mainloop()
The output of the program is shown below:
In the above program we have packed three labels into the parent widget "root". We used the pack() without any options which decides in what way to arrange the labels. As we can see, it has chosen to place the label widgets on top of each other and center them with each label has been given the size of the text.
To make all the widgets look uniform we can use the fill = X option as shown in the program below:
from tkinter import *
root = Tk()
root.title('Using pack()')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X)
mainloop()
The output of the program is shown below:
The pack() manager has padding options which are:
1. external padding in y direction
2. external padding in x direction
3. internal padding in x direction
4. internal padding y direction
Lets implement these padding in the following programs:
1. external padding in y direction
The following program shows implementation of external padding in y direction or Vertical external padding:
from tkinter import *
root = Tk()
root.title('Vertical external padding')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X,pady=10)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X,pady=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X,pady=10)
mainloop()
The output of the program is shown below:
2. external padding in x direction
The following program shows implementation of external padding in x direction or Horizontal external padding:
from tkinter import *
root = Tk()
root.title('Horizontal external padding')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack(fill=X,padx=10)
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(fill=X,padx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(fill=X,padx=10)
mainloop()
The output of the program is shown below:
3. internal padding in y direction
The following program shows implementation of internal padding in y direction or Vertical internal padding:
from tkinter import *
root = Tk()
root.title('Vertical external padding')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack()
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(ipadx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack(ipady=10)
mainloop()
The output of the program is shown below:
4. internal padding in x direction
The following program shows implementation of internal padding in x direction or Horizontal internal padding:
from tkinter import *
root = Tk()
root.title('Vertical external padding')
w = Label(root, text="Red Sun", bg="red", fg="white")
w.pack()
w = Label(root, text="Green Grass", bg="green", fg="black")
w.pack(ipadx=10)
w = Label(root, text="Blue Sky", bg="blue", fg="white")
w.pack()
mainloop()
The output of the program is shown below:
If we want to place the three label side by side now and shorten the text slightly we can do in the following way:
from tkinter import *
root = Tk()
root.title('Side by side')
w = Label(root, text="red", bg="red", fg="white")
w.pack(padx=5, pady=10, side=LEFT)
w = Label(root, text="green", bg="green", fg="black")
w.pack(padx=5, pady=20, side=LEFT)
w = Label(root, text="blue", bg="blue", fg="white")
w.pack(padx=5, pady=20, side=LEFT)
mainloop()
The output of the program is shown below:
If we change LEFT to RIGHT in the previous example, we get the colors in reverse order:
from tkinter import *
root = Tk()
root.title('Side by side')
w = Label(root, text="red", bg="red", fg="white")
w.pack(padx=5, pady=10, side=RIGHT)
w = Label(root, text="green", bg="green", fg="black")
w.pack(padx=5, pady=20, side=RIGHT)
w = Label(root, text="blue", bg="blue", fg="white")
w.pack(padx=5, pady=20, side=RIGHT)
mainloop()
The output of the program is shown below:
The Place Geometry Manager
The Place geometry manager allows us to explicitly set the position and size of a window, either in absolute terms, or relative to another window. The place manager can be accessed through the place method and can be applied to all standard widgets.
We use the place geometry manager in the following example. In the following program we assign to every label a different color, which we randomly create using the randrange method of the random module. We calculate the brightness (grey value) of each color. If the brightness is less than 120, we set the foreground colour (fg) of the label to White otherwise to black, so that the text can be easier read. See the code below:
from tkinter import *
import random
root = Tk()
root.title('Place geometry manager')
root.geometry("170x200+30+30")
languages = ['Python','Perl','C++','Java','Tcl/Tk']
labels = range(5)
for i in range(5):
ct = [random.randrange(256) for x in range(3)]
brightness = int(round(0.299*ct[0] + 0.587*ct[1] + 0.114*ct[2]))
ct_hex = "%02x%02x%02x" % tuple(ct)
bg_colour = '#' + "".join(ct_hex)
l = Label(root,
text=languages[i],
fg='White' if brightness < 120 else 'Black',
bg=bg_colour)
l.place(x = 20, y = 30 + i*30, width=120, height=25)
root.mainloop()
The output of the program is shown below:
The Grid Manager
The Grid geometry manager places the widgets in a 2-dimensional table, which consists of a number of rows and columns. The position of a widget is defined by a row and a column number. Widgets with the same column number and different row numbers will be above or below each other. Correspondingly, widgets with the same row number but different column numbers will be on the same "line" and will be beside of each other, i.e. to the left or the right.
Using the grid manager means that we create a widget, and use the grid method to tell the manager in which row and column to place them. The size of the grid doesn't have to be defined, because the manager automatically determines the best dimensions for the widgets used. See the code below:
from tkinter import *
import random
root = Tk()
root.title('Grid Manager')
colours = ['red','green','orange','white','yellow','blue']
r = 0
for c in colours:
Label(text=c, relief=RIDGE,width=15).grid(row=r,column=0)
Entry(bg=c, relief=SUNKEN,width=10).grid(row=r,column=1)
r = r + 1
root.mainloop()
The output of the program is shown below:
Try to make some more programs to practice these Layout Managers. I'll end this post now and till we meet next, keep learning and practicing Python as Python is easy to learn!
0 comments:
Post a Comment