En el mundo del desarrollo multiplataforma para plataformas móviles, ahora, probablemente, lamentablemente, dominan dos marcos: Xamarin y React Native. Xamarin, porque es el "hijo adoptivo" de Microsoft y, orgullosamente blandiendo muletas, está promoviendo activamente este último, y React Native es la descendencia de Facebook no menos famoso, que con no menos orgullo crece la barba para los programadores que están cansados de desarrollarlo. Para mí, hace tiempo que he encontrado una alternativa, y para aquellos que no están familiarizados con el marco de desarrollo multiplataforma de Kivy, bienvenidos a ...
¿Qué es bueno Kivy? El primero es que no es JavaScript. Este es Python. De ahí la velocidad de desarrollo, la brevedad del código, la capacidad de cambiar instantáneamente y rastrear los cambios en las aplicaciones, esta es la capacidad de simplemente escribir código en un momento en que otros crecen barbas en intentos fallidos de terminar su aplicación o hacer otras muletas modernas para sus proyectos. En segundo lugar, es un marco multiplataforma real del 99.9% con el que puede estar seguro de que su código, una vez escrito, se lanzará y funcionará en todas las plataformas disponibles. Como referencia: Xamarin es solo el 60% del código que se puede reutilizar, a pesar de que los desarrolladores afirman ser el 80%. Kivy es un marco maduro que se ha desarrollado desde 2011, más antiguo que su compañero React Native (2015) y el mismo Xamarin (2011).
Para el artículo de hoy, preparé un pequeño ejemplo que demuestra claramente todas las ventajas anteriores de Kivy. Crearemos un nuevo proyecto utilizando la utilidad de consola
CreatorKivyProject , veremos cómo animar widgets en Kivy y crear una pantalla con los siguientes contenidos:
Por lo tanto, descargue la utilidad
CreatorKivyProject y cree un nuevo proyecto siguiendo las instrucciones en README. Después de ejecutar un comando simple, se creará un proyecto vacío con una pantalla principal y dos pantallas adicionales 'Acerca de' y 'Licencia', que se pueden abrir en el menú del cajón de navegación. Esta no es una aplicación preparada para plataformas móviles, pero ya se puede ejecutar y probar directamente desde las fuentes en su computadora. Para comenzar el proyecto, debe ejecutar el script main.py, que es el punto de entrada a la aplicación.
Después del lanzamiento, las siguientes pantallas estarán disponibles:
Nuestra tarea es integrar en la pantalla una pila de cuatro botones del tipo FloatingActionButton, etiquetas flotantes para ellos y una funcionalidad mínima para eventos de botón. Por una pila de botones, me refiero a los botones que se colocan en la esquina inferior derecha de la pantalla y se superponen entre sí. Dado que dicha pila puede ser útil en más de un proyecto, crearemos un módulo floatingactionsbuttons.py, que luego podremos usar en todas partes, en cualquier proyecto y en cualquier plataforma. Abra el
directorio libs / applibs , donde se encuentran los paquetes y módulos de la aplicación, y cree el paquete
floatingactionsbuttons con los archivos
__init__.py ,
floatingactionsbuttons.kv y
floatingactionsbuttons.py :
El archivo
floatingactionsbuttons.kv describe la disposición de los elementos de la interfaz de usuario en el lenguaje Kv especial, que es mucho más simple y comprensible que XAML en Xamarin, xml en Java o marcado JSX en React Native.
El archivo
floatingactionsbuttons.py controla el comportamiento de los elementos y su lógica, que se describen en
floatingactionsbuttons.kv .
Así es como el diseño de la pila con nuestros botones se ve tan claro y estructurado con una jerarquía de elementos fácilmente visible:
floatingactionsbuttons.kv#: import Window kivy.core.window.Window #: import MDFloatingActionButton kivymd.button.MDFloatingActionButton <FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25) size_hint: None, None size: dp(46), dp(46) elevation: 5 md_bg_color: app.theme_cls.primary_color on_release: self.parent.callback(self) <FloatingLabel>: size_hint: None, None height: dp(20) width: label.texture_size[0] border_color_a: .5 md_bg_color: app.theme_cls.primary_color x: -self.width Label: id: label color: 0, 0, 0, 1 bold: True markup: True text: ' %s ' % root.text <FloatingActionButtons>: FloatingButton: id: f_btn_1 icon: list(root.floating_data.values())[0] FloatingButton: id: f_btn_2 icon: list(root.floating_data.values())[1] FloatingButton: id: f_btn_3 icon: list(root.floating_data.values())[2] FloatingLabel: id: f_lbl_1 text: list(root.floating_data.keys())[0] y: dp(117) FloatingLabel: id: f_lbl_2 text: list(root.floating_data.keys())[1] y: dp(170) FloatingLabel: id: f_lbl_3 text: list(root.floating_data.keys())[2] y: dp(226) MDFloatingActionButton: icon: root.icon size: dp(56), dp(56) x: Window.width - (self.width + dp(15)) md_bg_color: app.theme_cls.primary_color y: dp(15) on_release: root.show_floating_buttons()
Veamos qué elementos de nuestra pila corresponden al marcado. Hemos creado una firma que corresponderá a cada botón:
botón que estará en la pila:
botón principal, que está anclado en la esquina inferior derecha de la pantalla:
y colocó todo esto en la pantalla, indicando a las firmas las posiciones en el lado izquierdo de la pantalla (fuera de visibilidad), y para todos los botones, las posiciones en la esquina inferior derecha:
Los botones simplemente se superponen. Ahora es el momento de revivirlos. Abrir archivo
floatingactionsbuttons.py import os from kivy.animation import Animation from kivy.lang import Builder from kivy.core.window import Window from kivy.uix.floatlayout import FloatLayout from kivy.logger import PY2 from kivy.lang import Builder from kivy.properties import StringProperty, DictProperty, ObjectProperty from kivy.metrics import dp from kivymd.card import MDCard kv_file = os.path.splitext(__file__)[0] + '.kv' if PY2: Builder.load_file(kv_file) else: with open(kv_file, encoding='utf-8') as kv: Builder.load_string(kv.read()) class FloatingLabel(MDCard): text = StringProperty() class FloatingActionButtons(FloatLayout): icon = StringProperty('checkbox-blank-circle') callback = ObjectProperty(lambda x: None) floating_data = DictProperty() show = False def __init__(self, **kwargs): super(FloatingActionButtons, self).__init__(**kwargs) self.lbl_list = [self.ids.f_lbl_1, self.ids.f_lbl_2, self.ids.f_lbl_3] self.btn_list = [self.ids.f_btn_1, self.ids.f_btn_2, self.ids.f_btn_3] def show_floating_buttons(self): step = dp(46) for btn in self.btn_list: step += dp(56) Animation(y=step, d=.5, t='out_elastic').start(btn) self.show = True if not self.show else False self.show_floating_labels() if self.show \ else self.hide_floating_labels() def show_floating_labels(self): i = 0 for lbl in self.lbl_list: i += .5 pos_x = Window.width - (lbl.width + dp(46 + 21 * 1.5)) Animation(x=pos_x, d=i, t='out_elastic').start(lbl) def hide_floating_buttons(self): for btn in self.btn_list: Animation(y=25, d=.5, t='in_elastic').start(btn) def hide_floating_labels(self): i = 1 for lbl in self.lbl_list: i -= .3 Animation(x=-lbl.width, d=i, t='out_elastic').start(lbl) self.hide_floating_buttons()
Kivy crea animaciones usando la clase Animación. Como en Java, es suficiente especificar el parámetro del elemento que queremos animar, pasando el valor final. Por ejemplo, tenga en cuenta que la altura de nuestros botones en el diseño kv está establecida en 25, es decir, 25 píxeles desde la parte inferior de la pantalla:
<FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25)
Como tenemos tres botones, en el bucle indicamos cada altura (parámetro
"y" ), a la que debe elevarse, y le pasamos el nombre de la función (
"out_elastic" ), que es responsable del tipo de animación (en nuestro proyecto, utilicé animación de resorte elástico) , y todo lo demás se hace automáticamente:
def show_floating_buttons(self): ''' . Puthon/C++/Php. ''' step = dp(46) for btn in self.btn_list: step += dp(56) Animation(y=step, d=.5, t='out_elastic').start(btn)
La animación de firmas es exactamente la misma, excepto que en Animación pasamos el valor al parámetro
x , la posición horizontal del elemento:
def show_floating_labels(self): ''' . Puthon/C++/Php. ''' i = 0
El paquete esta listo. ¿Cómo agregarlo a nuestra pantalla única? Abra el archivo de control de la pantalla principal
AnimatedButtons / libs / uix / baseclass / basescreen.py :
... importe el paquete que creamos y agréguelo a la pantalla:
from libs.applibs.floatingactionbuttons import FloatingActionButtons class BaseScreen(Screen): ''' .''' def on_enter(self): ''' .'''
Como puede ver, todo es simple, transparente y rápido. Me temo imaginar cómo la implementación de dicha funcionalidad, dada la cantidad de código que le tomó al autor implementar una aplicación como "Hello World" en
este artículo , se verá como React Native. Al lado de Kivy, solo puedo poner Xamarin, que, al compilar paquetes, extrae Mono y otras bibliotecas, al igual que Kivy extrae el intérprete de Python. Las aplicaciones listas para usar en Kivy y Xamarin tienen el mismo tamaño y velocidad de lanzamiento aproximada, pero Xamarin tiene muchos más problemas en este momento, así que puedo decir con confianza que hoy Kivy es el marco de desarrollo multiplataforma # 1.
Puede descargar el código fuente del proyecto en
GitHub .
Ejemplos de aplicaciones Kivy:
vimeo.com/29348760vimeo.com/206290310vimeo.com/25680681www.youtube.com/watch?v=u4NRu7mBXtAwww.youtube.com/watch?v=9rk9OQLSoJwwww.youtube.com/watch?v=aa9LXpg_gd0www.youtube.com/watch?v=FhRXAD8-UkEwww.youtube.com/watch?v=GJ3f88ebDqc&t=111swww.youtube.com/watch?v=D_M1I9GvpYswww.youtube.com/watch?v=VotPQafL7Nwyoutu.be/-gfwyi7TgLIplay.google.com/store/apps/details?id=org.kognitivo.kognitivoplay.google.com/store/apps/details?id=net.inclem.pyonicinterpreterplay.google.com/store/apps/details?id=com.madhattersoft.guessthequoteplay.google.com/store/apps/details?id=com.prog.ders.ceyhanplay.google.com/store/apps/details?id=com.heattheatr.quotessaints