Python | PageLayout in Kivy using .kv file

Kivy — it is a platform independent GUI tool in Python. Since it can run on Android, IOS, Linux, Windows, etc. It is mainly used to develop Android application, but that does not mean that it cannot be used in desktop applications.

Page Layout:

PageLayout works differently from other layouts. It is a dynamic layout in the sense that it allows you to flip through pages using its borders. The idea is that its components are located opposite each other, and we can only see the one that is on top.
PageLayout is like copy pages so that we can move / resize pages to the right or left.

The PageLayout class is used to create a simple multi-page layout that makes it easy to switch from one page to another using a border.

To use PageLayout, you must import it with the following command:

 from kivy.uix.pagelayout import PageLayout

Notes:
Currently PageLayout does not respect the size_hint, size_hint_min, size_hint_max or pos_hint properties. This means we cannot use all of this in the page layout.

Example :

 PageLayout: Button: text: `page1` Button: text: `page2` Button: text:` page3`

Transitions from one page to another are carried out by scrolling from the borders of the area to the right or to the left. If you want to use multiple widgets on a page, use layouts for that. Ideally, each page should consist of a single layout widget that contains the remaining widgets on that page.

The page layout contains many things you can use to make it more efficient in a .kv file .

border: the width of the border around the current page, used to display the previous / next page scroll areas when needed. The border is NumericProperty and defaults to 50dp.
page: the currently displayed page. The page is a NumericProperty and defaults to 0.
swipe_threshold: the threshold used to trigger scrolling as a percentage of the widget size. swipe_threshold is a numeric property and defaults to .5.

A basic approach to creating a page layout using a .kv file

 1) import kivy 2) import kivyApp 3) import Pagelayout 4) Set minimum version (optional) 5) create Layout class 6) create App class - create build () function 7) Set up .kv file (name same as the App class) 8) return Layout / widget / Class (according to requirement) 9) Run an instance of the class

Below is the implementation .kv files in this code:

1). kv file is just Simply how to create pages in .kv file
2). kv file is how can yo add features like: color, text, image, canvas, swipe_threshold, button in the pages.

Implementing the —

main.py file

## Sample Python application demonstrating
## working with PageLayout in Kivy using a .kv file

####################################### ##########
# import nimble module

import kivy

# The base class of your application is inherited comes from the application class.
# app: always refers to your application instance

from kivy.app import App

# this limits the kivy version ie
# below this version you cannot
# use the application or software

kivy.require ( `1.9.0` )

# The PageLayout class is used to create
# simple multi-page layout, # in a way that makes it easy to switch from # from one page to another, using borders.


  from   kivy.uix.pagelayout   import   PageLayout 
   
  # create the root widget used in the .kv file  
  class   PageLayout (PageLayout):  
   pass  
  
  # create an application class named  
  The # .kv file must be named PageLayout.kv  
  class   PageLayoutApp (App): 
   # build () definition

def build ( self ):

# return a root class instance

return PageLayout ()

# creating an object of the PageLayoutApp () class

plApp = PageLayoutApp ()

# run the class
plApp.run ()

1 ) .kv simple page file

Exit :

Page 1 Image

Page 2 Image

Looks like this is page 3 and 4.

2) .kv file with some functions on page anisach

# create a simple Pagelayout with .kv

& lt; PageLayout & gt ;:


  
   # create page 1  
   Button: 
   text:   "Page 1"  
  
   # create page 2  
   Button:  
   text:   "Page 2"  
  
   # create page 3  
   Button: 
   text:   "Page 3"  
  
   # create page 3  
   Button: 
   text:  " Page 4 " 
   
   # create the page however you want

Exit :

Page 1

Page 2

Page 3

Page 4

Video output :

Submit new EBook

# create a simple Pagelayout with .kv

# create page layout
& lt; PageLayout & gt ;:

# Create page 1

# Using BoxLayout inside PageLayout

BoxLayout:

# create canvas

canvas:

Color:

rgb: 0 ,. 5 ,. 95 , 1

Rectangle:

pos: self . pos

size: self . size

# Provide orentation for BoxLayout

orientation: "vertical"

# create a button

Button:

text: "Page 1"

size_hint_y:. 4

# Adding a shortcut to page 1

Label:

markup: True

text: "GFG [b]:):):):) [/ b] "

color: 0 , 0 , 0 , 1

outline_color: 0 , 0.5 , 0.5 , 1

font_size: 30

# Create Page 2

BoxLayout:

orient ation: "vertical"

canvas:

Color:

rgba: 109 / 255. , 8 / 255. , 57 / 255. , 1

Rectangle:

pos: self . pos

size: self . size


   Label: 
   markup:   True  
   text:  " Kivy [b] PageLayout [/ b] !!!!! " 
    color:   0  ,   0  ,   0  ,   1  
   outline_color:   0  ,   0.5  ,   0.5  ,   1  
   font_size:   30  
  
  
   Button: 
   text:   "Page 2"  
   size_hint_y:.   2  
  
   
    # Create page 3  
   BoxLayout:   
  
   orientation:   `vertical`  

   
    canvas: 
    Color: 
   rgba:   100   /   555.  ,   9   /   155.  ,   37   /   455.  ,   1  

   Rectangle: 
   pos:   self  . pos  
   size:   self   .size 
  
   Label: 
   text:  ` page 3`  
  
   # This is an image directly from the internet resource   
   # Using AsyncImage you can use this  
    AsyncImage: 
    source:   ` http://kivy.org  / logos / kivy-logo-black-64.png`  

  
   
   
    # Create page 4  
   Button:   
   # Add an image  
   # image must be .png  
    # and is present in the same folder as  
   # .kv and main file saved  
  Image: 
   source:   "download .png " 
    center_x:   self  . parent.center_x 
   center_y:   self  . parent.center_y