Python | Diseño flotante en Kivy

Kivy es una herramienta GUI independiente de la plataforma en Python. Como se puede ejecutar en Android, IOS, Linux y Windows, etc. Básicamente se usa para desarrollar la aplicación de Android, pero eso no significa que no se pueda usar en aplicaciones de escritorio.

👉🏽 Tutorial de Kivy: aprenda Kivy con ejemplos .

Diseño flotante:

Floatlayout nos permite colocar los elementos relativamente en función del tamaño y la altura de la ventana actual, especialmente en los móviles, es decir Floatlayout , nos permite colocar los elementos usando algo llamado posición relativa. Esto significa que en lugar de definir la posición específica o las coordenadas, colocaremos todo usando el porcentaje con respecto al tamaño de la ventana. Cuando cambiamos las dimensiones de la ventana, todo lo que se coloque en la ventana ajustará su tamaño y posición en consecuencia. Esto hace que la aplicación sea más confiable y escalable al tamaño de la ventana.

Nota: FloatLayout respeta las propiedades pos_hint y size_hint de sus hijos.

Lo primero que debemos hacer para usar un FloatLayout es importarlo.

from kivy.uix.floatlayout import FloatLayout

Basic Approach:

1) import kivy
2) import kivyApp
3) import button
4) import Floatlayout
5) Set minimum version(optional)
6) create App class
7) return Layout/widget/Class(according to requirement)
8) Run an instance of the class

Por ejemplo, se crea un FloatLayout con un tamaño de (300, 300):

layout = FloatLayout(size=(300, 300))

De forma predeterminada, todos los widgets tienen su size_hint = (1, 1), por lo que este botón a continuación adoptará el mismo tamaño que el diseño:

button = Button(text='Hello world')
layout.add_widget(button)

Para crear un botón que tenga un ancho y alto específicos de diseño colocado en una posición particular, puede hacer lo siguiente:

Implementación del Enfoque:

# Sample Python application demonstrating the
# working of FloatLayout in Kivy
  
import kivy
  
# base Class of your App inherits from the App class.  
# app:always refers to the instance of your application  
from kivy.app import App
  
# creates the button in kivy 
# if not imported shows the error 
from kivy.uix.button import Button
  
# module consist the floatlayout
# to work with FloatLayout first
# you have to import it
from kivy.uix.floatlayout import FloatLayout
  
# To change the kivy default settings 
# we use this module config 
from kivy.config import Config 
    
# 0 being off 1 being on as in true / false 
# you can use 0 or 1 && True or False 
Config.set('graphics', 'resizable', True) 
  
# creating the App class
class MyApp(App):
  
    def build(self):
  
        # creating Floatlayout
        Fl = FloatLayout()
  
        # creating button
        # a button 30 % of the width and 20 %
        # of the height of the layout and
        # positioned at (300, 200), you can do:
        btn = Button(text ='Hello world',
                    size_hint =(.3, .2),
                    pos =(300, 200))
  
        # adding widget i.e button
        Fl.add_widget(btn)
  
        # return the layout
        return Fl
  
# run the App
if __name__ == "__main__":
    MyApp().run()

Producción:

Nota: Ahora, si cambia el tamaño de la ventana, también cambia su posición y tamaño. Este diseño se puede utilizar para una aplicación. La mayoría de las veces, utilizará el tamaño de la Ventana.

Ubicaciones dinámicas:
ahora falta algo o el código anterior no es perfecto, puede decir. Todavía tenemos que agregar la ubicación de los botones.

Tenemos 2 propiedades para crear una ubicación dinámica:

1) pos_hint: proporciona una pista de posición
. Podemos definir hasta 6 claves, es decir, toma argumentos en forma de diccionario.
pos_hint = {“x”:1, “y”:1, “izquierda”:1, “derecha”:1, “arriba”:1, “abajo”:1}

2) size_hint: proporciona una pista de tamaño
Contiene dos argumentos, es decir, ancho y alto

Nota:

1. Solo puede usar valores entre 0 y 1 para size_hint y pos_hint. Donde 0 = 0% y 1 = 100%.
2. ¡El sistema de coordenadas en kivy funciona desde la parte inferior izquierda! Esto será importante a la hora de colocar nuestros objetos. (es decir, (0, 0) es la parte inferior izquierda).

Código para implementar el posicionamiento dinámico:

# Sample Python application demonstrating the
# working of Dynamic placement in FloatLayout in Kivy
  
import kivy
  
# base Class of your App inherits from the App class.  
# app:always refers to the instance of your application  
from kivy.app import App
  
# creates the button in kivy 
# if not imported shows the error 
from kivy.uix.button import Button
  
# module consist the floatlayout
# to work with FloatLayout first
# you have to import it
from kivy.uix.floatlayout import FloatLayout
  
# To change the kivy default settings 
# we use this module config 
from kivy.config import Config 
    
# 0 being off 1 being on as in true / false 
# you can use 0 or 1 && True or False 
Config.set('graphics', 'resizable', True) 
  
# creating the App class
class MyApp(App):
  
    def build(self):
  
        # creating Floatlayout
        Fl = FloatLayout()
  
        # creating button
        # a button 30 % of the width and 50 %
        # of the height of the layout and
        # positioned at 20 % right and 20 % up
        # from bottom left, i.e x, y = 200, 200 from bottom left:
        btn = Button(text ='Hello world', size_hint =(.3, .5),
                     background_color =(.3, .6, .7, 1),
                    pos_hint ={'x':.2, 'y':.2 })
  
        # adding widget i.e button
        Fl.add_widget(btn)
  
        # return the layout
        return Fl
  
# run the App
if __name__ == "__main__":
    MyApp().run()

Producción:

Salida de vídeo:

 
Referencia:
https://kivy.org/doc/stable/api-kivy.uix.floatlayout.html
https://techwithtim.net/tutorials/kivy-tutorial/floatlayout/