CODEWITHSUNDEEP
pythontkinterlayout
armrib
armrib

Reputation: 23

How to achieve complex layouts with Tkinter?

I would like to achieve this layout with Tkinter but I don't really understand how Tkinter layout works...

Layout needed

The footer has a top/bottom padding, so the height is "fixed" and the buttongroup should be centered horizontally. The Image2 has a fixed width and takes the all remaining height. The Image 1 takes all the remaining space. (the window should be resizable)

So, I have two main trouble to achieve this :

  1. How to place the bottom buttongroup to be centred, horizontally-distribued, and sticking the bottom ?
  2. How to make the Image1 expand to the remaing space (I'm currently using the tecnique with the empty Label widget with a PIL ImageTk.PhotoImage to display the images) ?

More generally, if I can see a full exemple to achieve this, I think I will much more undertand Tkinter layouts (for now, I'm quite lost...)

Here is the best code I achieved :

import tkinter as tk
from tkinter import Button, Label, Frame
from PIL import Image, ImageTk

# configure root
root = tk.Tk()
root.title('app')
root.geometry('800x600')

# images
main_frame = Frame(root)
main_frame.pack(expand=1, fill='both')
image_path = 'C:/Users/Administrator/Desktop/sample_image.jpg'
image = ImageTk.PhotoImage(Image.open(image_path))
image1 = Label(main_frame, text='image1', image=image,
               bg='red').pack(side='left', expand=1, fill='both')
image2 = Label(main_frame, text='image2', image=image, width=250,
               bg='green').pack(side='left', fill='both')

# buttons
footer_frame = Frame(root, pady=5)
Button(footer_frame, text='Positif').pack(side='left', padx=2)
Button(footer_frame, text='Indéterminé').pack(side='left', padx=2)
Button(footer_frame, text='Négatif').pack(side='left', padx=2)
footer_frame.pack(side='bottom')

root.mainloop()

But I've got issues with the size of image1 (when the windows size is less than the image size, it hides the buttons or the image2:

showing the buttons getting squished

Upvotes: 0

Views: 505

Answers (1)

acw1668
acw1668

Reputation: 46678

Note that the order of packing widgets matters:

  • pack footer_frame before main_frame
  • pack image2 before image1

Below is the updated code:

import tkinter as tk
from tkinter import Button, Label, Frame
from PIL import Image, ImageTk

# configure root
root = tk.Tk()
root.title('app')
root.geometry('800x600')

# images
main_frame = Frame(root)
image_path = 'C:/Users/Administrator/Desktop/sample_image.jpg'
image = ImageTk.PhotoImage(Image.open(image_path))

# pack image2 before image1
image2 = Label(main_frame, text='image2', image=image, width=250,
               bg='green').pack(side='right', fill='y')
image1 = Label(main_frame, text='image1', image=image,
               bg='red').pack(side='left', expand=1, fill='both')

# buttons
footer_frame = Frame(root, pady=5)
Button(footer_frame, text='Positif').pack(side='left', padx=2)
Button(footer_frame, text='Indéterminé').pack(side='left', padx=2)
Button(footer_frame, text='Négatif').pack(side='left', padx=2)

# pack footer_frame before main_frame
footer_frame.pack(side='bottom')
main_frame.pack(expand=1, fill='both')

root.mainloop()

Upvotes: 2

Related Questions