Combining tkinter layout methods (pack + grid + place)

in this video we are going to combine the different layout methods in tkinter what we are going to make is going to look something like this here we have a fairly complex UI that also scales along with the window this is what we're going to create and for that we're going to use Place pack and grid they all work together really well for all of this later on when we can style things this is going to look actually good but we are definitely making progress and before I jump in I do want to talk about the layout here it's quite important to understand on the most fundamental level we are separating the UI into two parts which is going to be two frames one is here and one is here both of those are placed with the place method inside of the left container this one here we are mostly using the grid method for example here's one row here's another row and here's a row at the end and then we have a couple of columns they are three in total you can see this quite well with the sliders they are on the left and on the right column although that being said in the bottom there is one frame that covers the entire width of the column inside of that one we are using the pack method to place these two check boxes finally the entry widget here at the bottom it's kind of hard to see this one is placed using the place method that way it's always at the bottom in the middle after that we have this entire area for this one I am using the pack method to create these two areas with each area being one frame and inside of the frame we are creating another directional layout that is just going to contain a label and a button I already have a few lines of code and I realized the title I didn't change from grid this should be combined layout but other than that we have a window that's 600 by 600 pixels although there's one thing I already want to do and that is I want to get my window and set a minimum size like so the minimum size should be 600 by 600 that way the window cannot be too small which would end up looking very strange once we have that we can start by creating the main layout widgets I call them for this one I have a menu frame and I have a main frame both of those are going to be ttk and frame with the parent being the window those two I now have to place and this I do let me add another comment Main Place layout I'm going to use the place method to place these two frames for example I want to have the menu frame I want to use place and now I have to specify an X position a y position a width and a height since I want to menu frame always to be on the left side x is going to be 0 and Y is also going to be 0. you could use relative values here but since we are using 0 it really doesn't matter it's going to give you the same result although for the wift I do want to get the relative width this is going to be 0.3 in my case and finally for the height I want to have a relative height that is going to be 1. if I run this now we can't see anything because frames by themselves are invisible although we can't make this visible by creating a ttk label with the parent being the menu frame and this one is going to have a background of red this I want to pack right away and in here I'm going to set expand to true and fail to both if I run this now we can see the entire area of the menu frame with that we can create the Mainframe and the Mainframe is going to take up the entire remaining space which means for place I want to set e relative X position and this one is going to be 0.3 I know I have to use 0.3 because the width of the menu is also 0.3 that way those two start on the same point the Y position though is still going to be zero both of the widgets are supposed to start on the top of the window after that I want to have a relative width and this is going to be 0.7 the number here should be obvious with the width and the height we have a total number of one so we are covering the entire rest of the window finally I want to have a relative height and this one is going to be 1. to visualize this I want to copy the label and change the background color to yellow and the master is going to be the main frame let's try this one now and there we go we have covered the entire area of the window I can also resize this and this is looking pretty good I guess if you make the window too large the left side is going to become quite large but I'm not going to worry too much about it let me comment out those two lines I'm going to reuse them in a bit for some debugging just to see what we are doing next up I want to create the menu layout widgets I guess we could just call this menu widgets for those I have to create quite a few different widgets to save some time let me just copy them in we have to create all of these widgets we have three buttons button one button two and button three then we have two sliders slider one and slider two then we have a toggle frame and inside of this toggle frame we have two toggles toggle one and toggle two both of the toggles are just going to be check buttons I guess just to get started I can comment out the toggle frame so we only have a couple of buttons and a couple of Sliders these I want to place now now I want to create the menu layout since I want the menu to have the grid layout I have to create the columns and the rows which I Do by getting my menu frame and then creating column configure I want to have three columns which means I'm going to create a tuple with 0 1 and 2. the weight I'm going to set to 1. besides that I want to create a row configure and I want to have three and four rows in total all of which have the weight of one once I have that I can actually place things for example I can get menu button one and I want to use the grid method the button here should be in row zero column 0 as well and let's just see what we get we get an error because I have made a typo this should be column configure let's try it now and there we go we can see button one in the top left the button doesn't cover the entire area for that we are going to need the sticky argument and I want a button to stick to the north south west and east of the container or the cell and now if I run this we have button one in the top left finally I want this button one to be a tiny bit wider for that I'm going to set the column span to two it's going to be very hard to see right now but this button is now going to span two columns once I have that I can duplicate the line and now I want to place button 2. this button is going to be on row 0 but on column 2. it is only going to span one column dough and I want to stick the widget to all four sides of the cell let's run this one now and there we go we have button one and button 2 with button one being much brighter than button 2. if I expand the window you can see this much better to really make these columns and rows consistent I want to add the uniform argument uniform and I'm going to set the argument here to a it doesn't really matter what it is as long as those two identical strings now if I run this we can actually see that button one is twice as wide as button two that looks much better after that I want to place menu button 3. this is again going to use the grid method I want to set the row to 1 and the column to zero column span is going to be free and sticky is going to be north south east and west with that we are creating a button that spans the entire second row the result is going to be three buttons in this kind of layout next up I want to place the sliders these two sliders here both already have the orientation of vertical that way they're going up and down and just to demonstrate I want to have the sliders here and here which means I want to get my menu slider 1 and I want to use the grid method again the row should be number two here and column is going to be zero I want the row span to be 2. and finally I want to set sticky to all four sides so north south east and west running this now gives me one of the sliders although I don't like how close this is to the buttons to account for that I want to set pad y to let's say 20 pixels and now we have a bit of a distance between the two which I think looks much better this I can now duplicate because I want to place slider 2. for this one I want to have column 2 and Row 2 can stay the same in fact all of the other arguments can also remain identical if I run this now we have both of the sliders this is looking really good with that we can place a slightly more complicated layout and that is the toggle layout the one I have created here and commented out for now this one is going to be one frame and the frame consists to toggle or two check buttons to be more specific in terms of my layout though I can work with these separately for example I first of all want to get my toggle frame and use the grid method to place it I want this one to be in row number four and the column is going to be zero although I want this frame to span the entire width of the container so column span is going to be free what I also shouldn't forget is I want to set this to Sticky with north south east and west just to be sure and if I run this now we can't see anything the reason is again frames are invisible we can use the ttk label again I created earlier I know what to set the toggle frame as the master run this again and there we can see we are covering the entire bottom bit so I want to comment this out again and now I want to use this area to place these two toggle buttons for that I am going to use the pack method I want to get my menu toggle one and pack the entire thing since I want both of these toggles next to each other I want to set the site to left and I want to set expand to root this line I can now duplicate and change toggle 1 to toggle 2. and let's see what we get that is looking really good we have both of the toggles right next to each other I hope here you can see how it is really easy to combine different kinds of layouts we have created the main layout using the place method then we have created a grid inside of one of the frames and inside of this grid we have created another frame with the pack method that way using containers gives you a ton of power finally what I want to do is I want to place the entry let me call it entry layout for this entry this entry doesn't exist right now actually I want to create it when I'm importing all of the widgets here I want to create an entry widget and this I do with ttk and entry the parent is going to be the menu frame this entry I now want to place using the place method since I want this entry widget to be in the middle at the bottom I want to use relative X being 0.5 then relative Y is going to be 0.95 and I want to set the relative width to 0.9 if I run this now we get something slightly weird or well if you understand place this should be familiar right now we are placing the top left point and this one is right in the center of the container right here the reason we get that is because we haven't updated the anchor for that we have the anchor argument and I want to place the center of this entry widget let's try it now and this is looking much better this entry widget is now always going to be all the way on the bottom of this container you could have also used another row inside of row configure to place the entry widget using the grid method although in my case I just want to demonstrate that you can combine different layout methods although that has its limits you couldn't combine a grid and a pack method for example if I wanted to comment out this one here and use entry dot pack without any arguments run this we're getting an error the error message we get is cannot use geometry manager with pack inside the reason is we already have the grid method in here this though only applies to entry place is perfectly fine ready next up we can create the main layout unfortunately for that we need a few more widgets so let me add another section called main widgets and I'm going to copy in the widgets I'm going to need like so I have one more frame that I called entry frame one inside of this Frame we have a label and a button alt label 1 and button one both are super super simple the one notable feature here is that both of them have the parent or the Masters entry frame one this one here this we're doing two times one time here and one time here entry Frame 2 main level 2 and button two are basically identical to the first one which means what I want to do if I run the entire thing again over this entire space here I want to use the pack method to create two large areas one could look like this and one is going to look like this both of these are going to be frames inside of each frame we are going to place the label and then we are going to place the button which means we have to get started by placing entry 1 and entry 2. for that I want to get entry 1 and use the pack method since I want both of these frames next to each other I want to set the side to left other than that I want to set expand to true so we are covering the entire horizontal space and I want to set fill to both this I can now duplicate and set entry 1 to entry 2. all of the arguments though can stay identical this if I run this again is not going to be visible because once again frames are invisible but I can once again use these two labels to make all of this visible the master for the first one is going to be entry frame 1 and the master for the second one is going to be entry frame 2. if I run this now this is looking pretty good although I do want to have some padding between the two I want to create pad X I went with 20 here and I want to create pad Y which I also set to 20. now if I run this again we have a bit of padding around them alrighty with that finally I can get rid of these two labels at the end and instead place all of these labels and buttons I'm going to start with main label one beside is going to be the top since that is the default argument I can just leave this empty although I do have to set expand to true and Bill to both this line I can duplicate again because now I want to place main button one this one up here this is also going to get expand true and fill both let's try it actually there we can see we have the label and the button what I don't like is that those two are right next to each other to account for that I'm going to give the button pad y of 10 pixels now we have a tiny bit of space between the two with that all I have to do is copy all of this duplicate it and I can just change main label one to two and Main button one to two the result is going to look like this and with that we have a fairly complicated layout that is well working quite well obviously we have no functionality but in terms of layouts this is basically as complex as taking the widgets are going to be now that being said all of this is still not particularly manageable because we have a ton of different sections and this isn't Pleasant to work with but all of this is going to be much easier managed when we are using classes and this is going to be the next video but if you want to challenge yourself a really good exercise could be to convert all of this to a class-based approach see if you can figure this one out although if you can't do it don't worry too much about it I'm going to cover all of this in the next video I'll guess I'll see you there

Channel: Atlas

Views: 9,232

Keywords:

Id: p7I92IMFa3c

Length: 19min 31sec (1171 seconds)

Published: Sun Dec 18 2022