For more information on laying out the user interface, check out the Kivy layout documentation.
Lay Out the User Interface (UI)
00:00 Laying Out the UI. Each GUI framework that you use has its own method of arranging widgets. For example, in wxPython, you would use sizers, whereas in Tkinter, you use a layout or geometry manager. With Kivy, you use layouts.
There are several different types of layouts that you can use. The most common ones are
Kivy’s documentation will give you a full list of available layouts. Here, you’ll try out
BoxLayout with the code that’s seen on-screen.
First, you import
kivy.uix.boxlayout. Next, you create some colors, which are lists of RGB and alpha values. These are then added to another list,
colors, which becomes a list of lists, allowing easy random selection of these preselected colors.
You create an instance of
BoxLayout and loop over a range of
5, creating a button,
btn, for each iteration. With the background color of the button set to a random color,
you then add the button to the layout. After the loop has ended and five buttons have been added to the
BoxLayout, the layout is returned.
When you run this code, you’ll see something similar to what’s seen on-screen, although your colors will be a random choice. When you create a layout, there are few arguments you should know.
padding: You can specify the padding in pixels between the layout and its children in one of three ways: A four-argument list
[padding_left, padding_top, padding_right,
padding_bottom], a two-argument list
padding_vertical], or a single argument of
spacing allows you to add space between the child widgets, and
orientation allows you to change the default orientation of the
BoxLayout from horizontal to vertical.
02:51 Like most GUI tool kits, Kivy is mostly event-based. The framework responds to user keypresses, mouse events, and touch events. Kivy has a concept of a clock that you can use to schedule function calls for some time in the future.
Kivy also has the concept of
Properties, which works with the
EventDispatcher. Properties help you to do validation checking. They also let you fire events whenever a widget changes its size or position.
Let’s add a button event to the previous example. First, an
.index attribute is added to the
Button object. This will be used by the function that you’ll add later. Next, you call
button.bind(), and this links the
on_press event to the
MainApp.on_press_button() method, which you’re going to code in a second.
The method implicitly takes the widget
instance, which in this case is the
button. Finally, the
.on_press_button() method is created.
This prints out a message to the terminal indicating which button has been pressed by making use of the
.index attribute that was added earlier on.
04:06 When you run the program, you’ll see something similar to what’s seen on-screen.
04:23 In the next part of the course, you’ll take a look at using the KV language to create your layouts.
Become a Member to join the conversation.