Tkinter Layout Managers - Simple Crash Course

Key Takeaways

what is going on guys welcome back in this video today we're going to do a quick crash course on TK inter layout managers so let us get right into [Music] it all right so let us get right into it TK inter basically offers three different types of layout managers or layouts called pack grit and place and in this video today we're going to learn how to use them what the differences are and how we can also combine them into professional graphical user interfaces so how can we mix a pack layout with a grid layout and so on now for this we don't need to have any external packages installed we can just go ahead and say import TK inter s TK and the basic idea of a layout or a layout manager is how you place or how you put your UI elements like labels buttons text boxes and so on into your parent window into the window itself so do you just specify coordinates do you just stack them on top of each other do you have a grid layout and so on those are the differences here when we use layout managers so let us get started with a very basic application let's say we have some root window which is equal to tk. TK and then we say root. main Loop that's the most basic user interface in TK enter when I run this you will see we have just an empty window here without any UI elements so the thing is right now when I go ahead and I create let's say a label and an entry and then maybe one more so let's go ahead and say a label equals TK label part of the root window and I say that the text of the label should be uh label one or something and then I have maybe uh a text box or let's just call it entry and let's maybe call this label one entry one then we're going to say tk. entry it's part of the root element um and then we can copy this maybe and say we want to have have also a label two and an entry two and then finally maybe want to have a button so we want to have a button or maybe let's do two buttons TK button part of root text is equal to button one and then we copy this button two button two so these are now the UI elements that we defined they're not part of the graphical user interface I can run this and you can still see we have an empty window so what we need to do in order to see these UI elements in our window is we need to add them we need to actually use a layout manager to put them into uh the graphical user interface and as I said we have three ways to do that we have the Pack layout we have the grid layout and we have the place I'm not sure if place is even a layout it's just a function where you can specify coordinates so let us get started with pack because Pack is very straightforward and very simple what you do with pack is you basically just put these elements uh um you just stack them so you basically say something like label one. pack and then label two. pack and then entry one. pack and maybe we should actually do the correct order here entry 2. Pac button one. pack and button two. pack and the order is important because the way you pack them is the way or the order in which you pack them is going to be the order in which you see them in the graphical user interface so you can see we have label one text entry label two text entry button button so we have just everything stacked on top if I change the order of packing doesn't matter how I Define them up here if I pack button two as the first thing you're going to see that button two is going to be on top so that is the pack layout in general now you can specify a couple of things here first of all a very basic thing that you uh most of the time will probably do is you can specify a padding so a padding X and a padding y so an out outer padding for the horizontal axis and one for the vertical axis and then you also have inner padding if you want to so iPad X and iPad y I mostly use just padding X and padding y so you can say pad x equals 5 pad y equals 5 then we can copy this and we can just uh put this here in our pack function now you can see we have a little bit more space around the individual UI elements that is the idea of Pat now what we can also do is we can specify a side when we pack so we can say side equals tk. left for example and I can do that here for um these four elements I can run this and now you can see that even though it's a pack layout there are some differences we stack the first four elements we pack them to the left so we have we still stack them we still have label one entry one label two entry two but we do that on the left so or to the left you could say uh and the last two elements we then stack on top of each other so we say button one button two come afterwards uh and they're uh vertically stacked which is the default so that is the idea of packing the idea of packing is just stacking together and you can specify a side but you're basically just stacking together it's very simple now another way to add these things to the UI is to use the grid layout and the grid layout is a very structured layout it's also very rigid you basically have rows columns and you place the individual elements into specific positions so you specify row column and also stuff like row span column span so maybe you want to have a button that spans three columns so you can specify that but you basically uh have this very rigid layout where you have the individual cells and you put these elements there so for example I can say label one grit and now I have to specify okay where exactly am I going to put the label now maybe I want to put it at row zero and column zero and I want to add maybe petting x = 5 and petting yal 5 as well now I can copy this here for entry one label two and entry 2 and I can change now just the row and the column so I can say entry one should be right next to the label in the same row but a different column then this is the next row and this is the next row and the second column and then May for the buttons what I want to do is I want to say so let's copy this again for the buttons what I want to do is I want to say button one grid button two grid I want to put them here in row two Row three and in column zero column zero but you're going to see one thing here uh you can see that this worked but the button is now to the left I want the button to span all of this all this space here how I do that is by specifying the column span so I can do column span equals 2 so span it across two columns column zero and column one like this and then you can see now they're centered here and this is the grid layout that's the basic idea of the grid layout so I often times use this when I want to have a specific uh structure I want to have a rigid grid where I can just place the individual UI elements into the individual uh cells or uh yeah basically slots you could say uh pack is a very simple one you just stack them and then you have the quote unquote manual way where you take the UI elements and you place them at specific coordinates so you can do that with place you can say label one. place and then you can specify here X and Y coordinates now for this I'm going to just specify up here root. geometry is going to be equal to and then I'm going to um use a specific size so that I can fit this stuff in I'm going to go with 230 * 170 just because this is what I prepared in my code here um and then I can specify that I want to place the label at x = 10 and Y = 10 as well and then I can copy this I can do this for entry one entry two as well and the idea now is that I can say for example I want to put this to x = 50 here I want to put this x equal 10 again but maybe to y equal uh 50 and here 50 50 so if I just run this now you can see I placed these things but I actually don't have enough space to even see the full label so maybe we should change that maybe we should say that this starts at 70 uh there you go maybe we should also change the geometry to 250 or something there you go but you can see this can get very messy because now we're manually ually placing the elements we're manually specifying coordinates and you know it's not a rigid structure that is automatically going to look ordered or structured you going to have to take care of this yourself you're going to have to adjust the size of the entries the size of the buttons and uh consider all the coordinates and so on um so yeah maybe one more thing that I want to show you here is uh we can also if we go back to the to the GD layout what we could also do is we can specify we can specify a couple of keywords here so for example here I can say expand equals true for the buttons that span over two columns expand equals true and then I can specify Phil equals tk. both for example I'm going to explain what this means here in a second pk. both on there you go and oh actually this doesn't work with uh this doesn't work with grit this only works with pack so let me do this with pack uh actually we don't want to get rid of all this we want to go up until there there you go and of course um yeah this should work so what you can see is when I get rid of all this you can see that the buttons are just the buttons so they have some space left and right if I want to stretch them on the x-axis what I can do is I can say expand equals true and then actually the only thing I have to do is TK X so I want to stretch them on the horizontal axis uh and it would fill up all the space now if I have some space up and down so above and below um I could also specify TK y or TK both to stretch into X and Y to fill up the whole Space basically this just a detail that I wanted to mention here now let us get to the interesting stuff now because this is actually where it um where it starts getting interesting when you actually build a graphical user interface you might want to combine these layouts so you might want to have uh let me maybe use some some drawing here uh you might want to have a window and in this window you might want to have different sections so you might want to have a section up here um and you might want to have a section down here so maybe this is a calculator you have some buttons here uh that are structured in a grid layout you want to have the button structured in a grit layout and some of them span over multiple columns uh so you have this grit layout down here but then you want to have maybe uh oh come on uh maybe you want to have a pack layout up here because you have some screen here and you have some stuff here so this is a pack layout and the whole thing is a pack layout so you have a Pack layout um let me change the color here you maybe have a pack layout uh inside of this thing here then you have a grid layout inside of this thing here but then these two things are also packed in a pack layout so how do you combine multiple layouts inside of TK in the way you do that is by using frames so what you can do is you can say frame 1 equals TK frame and the frame is part of the root element then you have a second frame maybe that's also part of the root element and then what you do is you take these elements and instead of saying that they're part of root directly you put them into frames so you can say for example that this year is part of frame one this year is part of frame one frame one and this here is part of frame two for example and um basically now you have to do the same thing you have to pack them or use a grit layout or something but you do that for the frame so what you do is you say uh label one. pack and then uh you do that for label two and you do that for entry one and entry two and then you can do the same thing for button let's just go with uh pack but let's do a different pack Let's uh do or actually let's just do the ordinary pack here as well so basically you have now all this stuff packed and now you also have to pack the frames themselves so you have to say or you have to put in the frames themselves so frame one. pack and maybe you want to do site um site is equal to tk. left and you want to do that for frame two as well and what you can see now is that we have two different frames we have the frame here that has these four elements stacked and we have the frame on the right with these two elements uh so these four elements and these two elements stacked here or packed here and then the whole frames are packed as well and of course this doesn't only work with pack you can also use um you can use a grid layout for these for example and you can use a pack layout for D so you can go ahead and say here grit grit grit grit and then row equal 0 column equal 0 then you can just paste this here change this like this and this also works so you have a grd layout here on the left and then you have a Pack layout here and the two frames are also combined with a pack layout and you can keep going you know you can have frames and frames and frames and so on so you can make complicated layouts by mixing grid and pack mainly but you can of course also play around with place so yeah these are the layout managers in TK in this is how you build professional graphical user interfaces so that's it for today's video I hope you enjoyed it and hope you learned something if so let me know by hitting a like button and leaving a comment in the comment section down below and of course don't forget to subscribe to this Channel and hit the notification Bell to not miss a single future video for free other than that thank you much for watching see you in the next video and bye I