Kivy Two Flashcards
In your KV file, set the layout to horizontal
Put a ‘Button A’ to the left
Next add four vertical buttons, They should all be spaced 10pixels
Finally place your last button
BoxLayoutExample:
<BoxLayoutExample>:
Button:
text: 'A'
size_hint: 'A'
pos_hint: {'center_y': .5}
BoxLayout:
orientation: 'vertical'
spacing: '10dp'
Button:
text: 'B1'
text: 'B2'
text: 'B3'
text: 'B4'
Button:
text: 'C'
size_hint: 1, 1
pos_hint: 1, 1
</BoxLayoutExample>
Import and use something to make a layout where you can put boxes anywhere but start from the very center of the screen.
How would you put your button to the top left? of the screen?
from kivy.uix.anchorlayout import AnchorLayout
class AnchorLayoutExample(AnchorLayout):
pass
KV file
AnchorLayoutExample: <- this makes it the main interface
<AnchorLayoutExample>:
# right, left, center
anchor_x: 'right'
# bottom, top center
anchor_y
Button:
text: 'A'
size_hint: .1, .1
anchor_x: 'left'
anchor_y: 'top'
Button:
text: 'A'
size_hint: .1, .1
</AnchorLayoutExample>
Create two boxes side by side at the top center of the screen
AnchorLayoutExample:
<AnchorLayoutExample>:
anchor_x: 'center'
anchor_y: 'top'
BoxLayout:
size_hint: .2, .2
Button:
text: 'A'
Button:
text: 'B'
We specify the BoxLayout's size into relation of how much of the AnchorLayout it takes up, if we didn't do this, it would take up everything and the size_hints of the buttons themselves would place them however they would in a standard BoxLayout.
</AnchorLayoutExample>
Organize content with colons and arrows.
Create 6 buttons that will be in 3 columns wide and 2 rows down
Change the first button to be half the size wide, but with a normal sized height (REMBMER, this will be tricky since this will have to apply to both buttons in the same column)
Turn the second button into a Box layout of three buttons vertically
from kivy.uix.gridlayout import GridLayout
class GridLayoutExample(GridLayout):
pass
In KV file
GridLayoutExample:
<GridLayoutExample>:
"""Or you don't have to add the gridlayoutclass and can just do this: <GridLayoutExample@GridLayout>:"""
# Need one of two properties: rows, cols
cols: 3
Button:
size_hint: .5, 1
text: 'a'
BoxLayout:
Button:
text'a1'
Button:
text'b1'
Button:
text'c1'
Button:
text: 'c'
Button:
text: 'd'
size_hint: .5, 1
Button:
text: 'e'
Button:
text: 'f'
</GridLayoutExample>
Stack your buttons from left to right using a different method from kivi
If you use 20 percent for all of your buttons and put 6 in your code, how will they come out?
Now do this make buttons with this method using a construtor
from kivy.uix.stacklayout import StackLayout
class StackLayoutExample(StackLayout):
pass
from KV file
StackLayoutExample:
<StackLayoutExample>:
Button:
text: "A"
size_hint: .2, .2
Button:
text: "B"
size_hint: .2, .2
Button:
text: "B"
size_hint: .2, .2
If you have 6 buttons you will have 5 stacked from left to right and one below them on the left.
class StackLayoutExample(StackLayout):
def \_\_init\_\_(self, **kwargs)
def super().\_\_init\_\_(**kwargs)
b = Button(text='Z', size_hint(.2, .2))
self.add_widget(b)
If you do this with the code still in your kvfile as is, it will put the z button first and then go down the list of buttons (A, B, etc.)
</StackLayoutExample>
Using only the StackLayout class, make multiple buttons using a loop
from kv.uix.stacklayout import StackLayout
def __init__(self, kwargs):
def super().__init__(kwargs):
for i in range(0, 10):
Button(text=str(i + 1), size_hint(.2, .2))
If you were using dp here it would look like:
from kivy.uix.metrics import dp
size=(dp(100), dp(100))
In terms of StackLayout, what if we don’t want to stack from left to right and up to down?
Give padding (distance from wall)
Give space between
orientation: lr-tb
left-right
or
top-bottom
If doing this via the class
self.orientation = ‘lr-bt’
padding: (‘20dp’, ‘20dp’, ‘20dp’, ‘20dp’)
# Left, Right, Top, Bottom
spacing: ‘20dp’, ‘20dp’
# Horizontal, Vertical
Show How you would scroll your app
We want to scroll Vertically
Make sure you can’t over scoll
from kivy.uix.scrollview import ScrollView
class ScrollViewExample(ScrollView):
pass
from KV file
ScrollViewExample:
StackLayoutExample:
size_hint: 1, None
height: self.minimum_height
This is calling from our StackLayoutExample btw
StackLayoutExample is a child of ScrollViewExample here so it needs indentation.
Slide between your different pages of buttons
Each page is transparent, we will have to add a background to cover that up
PageLayoutExample:
PageLayoutExample@PageLayout:
MainWidget
You’ll notice your code <MainWidget> doesn't display on it's own unless you add "MainWidget" as a child to PageLayoutExample.</MainWidget>
