Introduction
Kivy is an independent GUI tool in Python that can be used to create Android, IOS, Linux, and Windows applications. Kivy provides the functionality to write the code for once and run it on different platforms. Though, most applications built on kivy are Android applications we can use it for desktop applications as well.
Unlike any other layout rather than setting the widgets as a portion of the window, Page Layout makes the widgets pages that are overlapping each other which allows us to flip through the pages using the borders. The whole concept is of the components being stacked one over another and we can only see the top page at any moment.
Page Layout class is used to create this simple multi-page layout which enables a flipping functionality that allows easy flipping from one page to another.
In this blog, we will learn how we can implement this PageLayout in a .kv file.
Creating a PageLayout
In order to use PageLayout we first need to import it using:
from kivy.uix.pagelayout import Pagelayout
However, Pagelayout does not require a size_hint, size_hint_min, or any other property and thus can not be used in a page layout.
All the transitions occurring here are made by swiping in from the border on the right or left side. Also taking the page as a parent element we can have a different layout inside it using any other layout as well.
PageLayout contains some of the things that make it easier to be used:
- border: This contains the width of the border around the current page that shows the next or previous page and is used to swipe to move. It has a default value of 50dp.
- page: It is the number of the current page displayed and defaults to 0.
- swipe_threshold: It defines how much area a swipe must cover to trigger a swipe in terms of percentage. It defaults to 0.5.
Example
In this example, we will take 3 widgets and show how we can set the page layout.
pagelayout.py
#first we import all the required dependencies
import kivy
from kivy.app import App
kivy.require('1.9.0')
#we only require the page layout import in this case
from kivy.uix.pagelayout import PageLayout
#create a base element to contain all the other elements as pages.
#no need to insert any widget here as we will do it in the .kv file
class PgLayout(PageLayout):
pass
#create the function that we run
class PageLayoutApp(App):
def build(self):
return PgLayout()
#run the app
root = PageLayoutApp()
root.run()
PageLayout.kv
After creating the py file we need to create the .kv file which is comparatively easier in this case as we just need to mention the buttons as pages.
<PageLayout>:
# creating Page 1
Button:
text: "Page 1"
# creating Page 2
Button:
text: "Page 2"
# creating Page 3
Button:
text: "Page 3"
# creating Page 3
Button:
text: "Page 4"
Output
We can create multiple such layouts by using any other layout as well. We will do an example below
PageLayout.kv
Here we use the different layouts in the page layout so as to use know how we can create any layout we require using these.
<Button>:
font_size: 15
size_hint: 0.25, 0.25
<PageLayout>:
# creating Page 1
Button:
text: "Page 1"
# creating Page 2
BoxLayout:
orientation: 'vertical'
Button:
text: "Page 2"
Button:
text: "Page 3"
# creating Page 3
RelativeLayout:
Button:
text: "Page 4"
pos_hint: {"right": 1, "y": 0}
Button:
text: "Page 5"
pos_hint: {"x": 0, "top": 1}
#creating page 4
GridLayout:
rows: 3
AnchorLayout:
anchor_x: 'left'
anchor_y: 'top'
Button:
text: 'page 6'
AnchorLayout:
anchor_x: 'right'
anchor_y: 'bottom'
Button:
text: 'page 6'