GUI programming using kivy ~ Part 6 Various layouts ~
Introduction
I explained the buttons in Part 4, but since there are multiple layouts, I would like to introduce various things. I will give a brief explanation and an example as before, for a detailed explanation, please see Reference I think.
Layout
We will introduce them in the order listed in the layout list of Reference.
kivy.uix.anchorlayout
It is a layout that allows you to easily place the objects to be placed on the screen, such as in the middle.
The location is specified for the variables ʻanchor_x and ʻanchor_y.
ʻAnchor_x is left, center, right With ʻanchor_y, you can specify from a total of 9 combinations of top, center, and bottom.
Also note that you can only add one widget to an AnchorLayout. If you want to place more than one, I think you can add another layout to AnchorLayout.
import random
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.button import Button
class Test(AnchorLayout):
def __init__(self, **kwargs):
super(Test, self).__init__(**kwargs)
self.x_positon = ["left", "center", "right"]
self.y_positon = ["top", "center", "bottom"]
self.anchor_x = "center"
self.anchor_y = "center"
btn = Button(text='Hello World', size_hint=(0.5,0.5), on_press=self.click)
self.add_widget(btn)
def click(self,btn):
x = random.choice(self.x_positon)
y = random.choice(self.y_positon)
self.anchor_x = x
self.anchor_y = y
btn.text = "x : {}\ny : {}".format(x, y)
class Sample(App):
def build(self):
return Test()
if __name__ == '__main__':
Sample().run()
kivy.uix.boxlayout
A layout that arranges widgets horizontally or vertically.
By default, widgets are added horizontally. To change the orientation, substitute `vertical``` if you want to make the variable ```orientation` vertical, or `horizontal` if you want to arrange it horizontally. You can change it. I don't think it's possible to change the direction of adding widgets on the way, so I think it's like adding_wiget a new BoxLayout to change the placement.
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
class Test(BoxLayout):
def __init__(self, **kwargs):
super(Test, self).__init__(**kwargs)
self.count = 0
#The default is"horizontal"It is placed horizontally.
self.orientation = "horizontal"
#self.orientation = "vertical"
btn = Button(text='Hello World', on_press=self.click)
self.add_widget(btn)
def click(self,btn):
self.count += 1
self.add_widget(Button(text="{}".format(self.count),on_press=self.dismiss))
def dismiss(self, a):
self.remove_widget(a)
class Sample(App):
def build(self):
return Test()
if __name__ == '__main__':
Sample().run()
kivy.uix.floatlayout
Unlike the layout introduced above, FloatLayout can be placed by specifying the absolute position. Since it is an absolute position, it should be noted that the position of the object does not change according to the window even if the size of the window is changed after the widget is placed.
import random
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
class Test(FloatLayout):
def __init__(self, **kwargs):
super(Test, self).__init__(**kwargs)
btn = Button(text='Hello World', size_hint=(0.1,0.1), on_press=self.click)
self.add_widget(btn)
def click(self,btn):
x = int(random.uniform(0,self.width))
y = int(random.uniform(0,self.height))
self.add_widget(Button(text="x : {}\ny : {}".format(x, y), pos=(x,y), size_hint=(0.1,0.1)))
class Sample(App):
def build(self):
return Test()
if __name__ == '__main__':
Sample().run()
kivy.uix.relativelayout
I didn't know how to use it. I would like to update the article as soon as I understand it.
kivy.uix.gridlayout
GridLayout is arranged to add widgets in the form of spreadsheet like grid.
The placement can be specified from `cols` and `rows`. If you substitute a numerical value for `cols```, a new column will be created below it and more will be added when the placement is completed horizontally by that numerical value. rows``` specifies the maximum value in the vertical direction and adds widgets in the horizontal direction, but I didn't understand the behavior. You can use `` cols and `` `rows at the same time to create a grid of cols × rows.
from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
class Test(GridLayout):
def __init__(self, **kwargs):
super(Test, self).__init__(**kwargs)
self.count = 0
btn = Button(text='Hello World', on_press=self.click)
self.cols = 5
#self.rows = 5
self.add_widget(btn)
def click(self,btn):
self.count += 1
self.add_widget(Button(text="{}".format(self.count)))
class Sample(App):
def build(self):
return Test()
if __name__ == '__main__':
Sample().run()
kivy.uix.pagelayout
PageLayout has a layout that allows you to place another screen on the screen, and I think you can do something like a simple screen transition. If you click the line on the edge of the screen (it's hard to see, but) and drag it sideways, another screen will appear (it's a little difficult to operate w). In the example, the button is pasted as it is, but I think that it will be used like adding_widget another layout to PageLayout.
from kivy.app import App
from kivy.uix.pagelayout import PageLayout
from kivy.uix.button import Button
class Test(PageLayout):
def __init__(self, **kwargs):
super(Test, self).__init__(**kwargs)
btn1 = Button(text='Hello World1', size_hint=(0.5, 0.5))
self.add_widget(btn1)
btn2 = Button(text='Hello World2', size_hint=(0.5, 0.5))
self.add_widget(btn2)
btn3 = Button(text='Hello World3', size_hint=(0.5, 0.5))
self.add_widget(btn3)
class Sample(App):
def build(self):
return Test()
if __name__ == '__main__':
Sample().run()
kivy.uix.scatterlayout
ScatterLayout is a layout that allows you to reposition and resize with the mouse. In the example, I'm trying to move BoxLayout with two labels on ScatterLayout (I added a dashed line because it was hard to see if it was just the label). Normally, I think that you would use it such as enlarging the screen with an image application. It feels more like a smartphone app than a computer.
from kivy.app import App
from kivy.uix.scatterlayout import ScatterLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.config import Config
#Show dashed line
Config.set('modules', 'ShowBorder', '')
class Test(ScatterLayout):
def __init__(self, **kwargs):
super(Test, self).__init__(**kwargs)
layout = BoxLayout()
label = Label(text="Hello World!")
layout.add_widget(label)
label2 = Label(text="Hello World!")
layout.add_widget(label2)
self.add_widget(layout)
class Sample(App):
def build(self):
return Test()
if __name__ == '__main__':
Sample().run()
kivy.uix.stacklayout
StackLayout has a layout that specifies the orientation in the same way as BoxLayout.
The difference from BoxLayout is that you can specify the arrangement direction from 8 parameters, and when you are about to go off the screen,
The point is to change the layout to the next level or sideways. The direction of arranging can be specified from the variable orientation, and the direction is specified by combining the parameters `lr``` and tb```. Although it is ``` lr-tb``` written in the example, ``` lr``` is from left (left) to right (right), and `tb``` is from top (Top) to bottom (Bottom). ), Arrange from left to right, and add widgets from top to bottom when you reach the edge of the screen.
from kivy.app import App
from kivy.uix.stacklayout import StackLayout
from kivy.uix.button import Button
class Test(StackLayout):
def __init__(self, **kwargs):
super(Test, self).__init__(**kwargs)
ori = ["lr-tb","tb-lr","rl-tb","tb-rl","lr-bt","bt-lr","rl-bt","bt-rl"]
#The default is to the right, from top to bottom.
self.orientation="lr-tb"
for i in range(100):
btn = Button(text=str(i), width=40 + i * 5, size_hint=(None, 0.15))
self.add_widget(btn)
class Sample(App):
def build(self):
return Test()
if __name__ == '__main__':
Sample().run()
If you specify `lr-tb```, it will look like the image on the left, and if you specify `bt-rl```, it will look like the image on the right.
Summary
Since I usually use box layout, I had almost no knowledge of other layouts, so it was a good opportunity. After all, I checked it, but I didn't know how to use it for relative layout, so I wanted to check it again.
Reference site
https://pyky.github.io/kivy-doc-ja/gettingstarted/layouts.html
Recommended Posts