Cómo crear navegación inferior usando Kivymd y Python

En este artículo, veremos cómo agregar la Navegación inferior en nuestra aplicación usando KivyMD en Python.

Instalación:

Para instalar este módulo, escriba el siguiente comando en la terminal.

pip instalar kivy

pip instalar kivymd

Método de navegación MDBottom:

 La navegación inferior se utiliza para navegar de una pantalla a otra con la ayuda de los botones de la parte inferior.

Paso 1. Importe los paquetes necesarios.

Para esto, necesitaremos Builder de kivy y MDApp del paquete kivymd.

Nota: No importaremos MDNavigation y MDScreen porque estamos diseñando nuestra pantalla usando el lenguaje kv. 

# import packages
from kivy.lang import Builder
from kivymd.app import MDApp

Paso 2. Disposición del diseño.

Estaremos diseñando nuestro diseño usando lenguaje kv. Primero, declararemos la clase de widget de pantalla llamada MDScreen y luego la clase de widget secundaria. Aquí MDBottomNavigation es una clase secundaria, MDBottonNavigation y MDLabel son clases secundarias.

Sintaxis:

Pantalla MDS:

MDBottomNavigation:

MDBottomNavigationItem:
MDLabel:

Hablando de los parámetros utilizados.

• Pasaremos los parámetros de nombre, texto e icono a MDBottomNavigationItem. El parámetro de nombre es completamente opcional aquí, pero lo usamos para clasificar pantallas. El icono se utiliza para declarar iconos en la pantalla. El parámetro de texto es la salida de texto en la parte inferior de Navegación.
• Pasaremos los parámetros de texto y alineación en MDLabel. Donde el texto funciona igual que en MDBottomNavigationItem pero mostrará texto en la pantalla principal y se usa halign para declarar la alineación del contenido en la etiqueta.

# writing kv lang
KV='''
# declaring layout/screen
MDScreen:
  
    # this will create a space navigation bottom
    MDBottomNavigation:
  
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 1'
            text: 'Python'
            icon: 'language-python'
              
            # this will be triggered when screen 1 is selected
            # creates a label
            MDLabel:
                text: 'Python'
                halign: 'center'
          
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 2'
            text: 'Java'
            icon: 'language-java'
  
            # this will be triggered when screen 2 is selected
            # creates a label
            MDLabel:
                text: 'Java'
                halign: 'center'
  
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 3'
            text: 'CPP'
            icon: 'language-cpp'
  
            # this will be triggered when screen 3 is selected
            # creates a label
            MDLabel:
                text: 'CPP'
                halign: 'center'
'''

Paso 3. Escribiendo el programa principal.

Para ejecutar el archivo kv, usaremos load_string() y le pasaremos nuestro idioma kv. Por lo tanto, definiremos una función para este nombre build() y, de guardia, cargará kv y devolverá la pantalla. run() se usa para ejecutar la clase y no requiere ningún parámetro.

# App class
class Test(MDApp):
  
    def build(self):
        
        # this will load kv lang
        screen = Builder.load_string(KV)
  
        # returning screen
        return screen
  
# running app
Test().run()

Agregar los pasos anteriores:

# import packages
from kivy.lang import Builder
from kivymd.app import MDApp
  
# writing kv lang
KV = '''
# declaring layout/screen
MDScreen:
  
    # this will create a space navigation bottom
    MDBottomNavigation:
  
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 1'
            text: 'Python'
            icon: 'language-python'
  
            # this will be triggered when screen 1 is selected
            # creates a label
            MDLabel:
                text: 'Python'
                halign: 'center'
  
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 2'
            text: 'Java'
            icon: 'language-java'
  
            # this will be triggered when screen 2 is selected
            # creates a label
            MDLabel:
                text: 'Java'
                halign: 'center'
  
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 3'
            text: 'CPP'
            icon: 'language-cpp'
  
            # this will be triggered when screen 3 is selected
            # creates a label
            MDLabel:
                text: 'CPP'
                halign: 'center'
'''
  
# App class
class Test(MDApp):
  
    def build(self):
        
        # this will load kv lang
        screen = Builder.load_string(KV)
  
        # returning screen
        return screen
  
# running app
Test().run()

Producción:

Ejemplo:

 Para este ejemplo, cambiaremos los parámetros y cambiaremos el color de navegación inferior. Los pasos seguirán siendo los mismos que los anteriores, pero tendremos algunos complementos para cambiar el color de navegación inferior.

Sintaxis:

MDBottomNavigation:

color_panel: 1,0,0,1
color_texto_activo: 0, 1, 0, 1

• panel_color cambiará el color de la navegación inferior. Aquí estamos pasando el valor rgba que significa rojo.
• text_color_active cambiará el color de MDBottomNavigationItem cuando hagamos clic en él. Aquí el color es verde.

Nota: El valor máximo de un color que puede pasar es 1.

También cambiamos el texto y los íconos para este ejemplo. Aquí está la lista de todos los íconos disponibles de KivyMD. Haga clic aquí.

Nota: También puede tener un ícono personalizado para el que solo necesita reemplazar el parámetro del ícono con su archivo multimedia.

Ejemplo:

icono: ‘icono.png’

# import packages
from kivy.lang import Builder
from kivymd.app import MDApp
  
# writing kv lang
KV = '''
# declaring layout/screen
MDScreen:
  
    # this will create a space navigation bottom
    MDBottomNavigation:
        panel_color: 1,0,0,1
        text_color_active: 0, 1, 0, 1
  
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 1'
            text: 'Camera'
            icon: 'camera'
  
            # this will be triggered when screen 1 is selected
            # creates a label
            MDLabel:
                text: 'You have selected Camera'
                halign: 'center'
  
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 2'
            text: 'Microphone'
            icon: 'microphone'
  
            # this will be triggered when screen 2 is selected
            # creates a label
            MDLabel:
                text: 'You have selected Microphone'
                halign: 'center'
  
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 3'
            text: 'Wi-FI'
            icon: 'wifi'
  
            # this will be triggered when screen 3 is selected
            # creates a label
            MDLabel:
                text: 'You have selected Wi-Fi'
                halign: 'center'
'''
  
# App class
class Test(MDApp):
  
    def build(self):
        
        # this will load kv lang
        screen = Builder.load_string(KV)
  
        # returning screen
        return screen
  
# running app
Test().run()

Producción: