Blog
Layouts: Flotantes Layout
En este tutorial básico de Kivy, vamos a hablar sobre otro tipo de diseño: el Float Layout.
from kivy.app import App
#kivy.require("1.8.0")
from kivy.uix.floatlayout import FloatLayout
class SimpleKivy4(App):
def build(self):
return FloatLayout()
if __name__ == "__main__":
SimpleKivy4().run()
Este código debería ser muy familiar.
Los únicos cambios importantes aquí son que estamos importando FloatLayout, y estamos haciendo que SimpleKivy4 (nuestra clase principal aquí) devuelva FloatLayout.
Ahora para nuestro archivo SimpleKivy4.kv:
<Button>:
font_size: 40
color: 0,1,0,1
size_hint: 0.3, 0.2
<FloatLayout>:
Button:
text: "Kivy"
pos_hint: {"x": 0, 'y':0}
Button:
text: "Tutorials"
pos_hint: {"right": 0.5, 'top':1}
Ahora, vemos algunos términos nuevos dentro de nuestro archivo .kv.
Primero, vemos esta variable size_hint. Size_hint da una pista sobre el tamaño de un elemento, en función de las partes del “total” disponible. 0.3, 0.2 significa que el elemento será 30% de la ventana ancha, y 20% de la ventana alta.
A continuación, detectamos pos_hint. Pos_hint da una pista sobre la posición, que se mide relativamente entre 0 y 1, donde 1 es “completamente” algo y 0 es “no” algo.
Pos_hint me confundió por un tiempo, y todavía tengo que pensar un poco sobre lo que realmente significa … pero simplemente agrego “ness” al término que estoy modificando. Entonces, si decimos que pos_hint es {“right”: 0.5 y “top”: 1}, entonces estamos diciendo que tiene “half-right-ness” y full “top-ness”.
Al usar estos términos, con diseño flotante, ahora puede tener una ventana con widgets, botones, etiquetas y cualquier otra cosa que cambie de tamaño, independientemente del tamaño de la ventana o de la orientación de la ventana ( retrato vs paisaje).
Ahora, nuestra aplicación puede hacer:
O…
Como puedes ver, podemos ajustar la posición del píxel, así como el tamaño, de forma relativamente relativa según el tamaño y la forma de la ventana real.
