Kivy - Cadre de développement multiplateforme n ° 1

Dans le monde du développement multiplateforme pour les plates-formes mobiles, maintenant, probablement, malheureusement, deux cadres dominent - Xamarin et React Native. Xamarin - parce qu'il est le "fils adoptif" de Microsoft et, brandissant fièrement des béquilles, promeut activement ce dernier, et React Native est la progéniture de Facebook non moins célèbre, qui avec non moins de fierté pousse la barbe pour les programmeurs qui en ont assez de le développer. Pour moi, j'ai longtemps trouvé une alternative, et pour ceux qui ne connaissent pas le cadre de développement multiplateforme Kivy, bienvenue dans le ...

Qu'est-ce que le bon Kivy? Le premier est qu'il ne s'agit pas de JavaScript. C'est Python. D'où la vitesse de développement, la brièveté du code, la possibilité de changer instantanément et de suivre les changements dans les applications, c'est la possibilité d'écrire simplement du code à un moment où d'autres poussent la barbe en vain pour terminer leur application ou faire les prochaines béquilles à la mode pour leurs projets. Deuxièmement, il s'agit d'un véritable framework multiplateforme à 99,9% avec lequel vous pouvez être sûr que votre code, une fois écrit, sera lancé et fonctionnera sur toutes les plateformes disponibles. Pour référence: Xamarin ne représente que 60% du code qui peut être réutilisé, bien que les développeurs prétendent être à 80%. Kivy est un framework mature développé depuis 2011 et plus ancien que son compatriote React Native (2015) et Xamarin, un an (2011).

Pour l'article d'aujourd'hui, j'ai préparé un petit exemple qui démontre clairement tous les avantages ci-dessus de Kivy. Nous allons créer un nouveau projet en utilisant l'utilitaire de console CreatorKivyProject , voir comment animer des widgets dans Kivy et créer un écran avec le contenu suivant:


Alors, téléchargez l'utilitaire CreatorKivyProject et créez un nouveau projet en suivant les instructions du fichier README. Après avoir exécuté une simple commande, un projet vide sera créé avec un écran principal et deux écrans supplémentaires «À propos» et «Licence», qui peuvent être ouverts dans le menu Tiroir de navigation. Ce n'est pas une application prête à l'emploi pour les plates-formes mobiles, mais elle peut déjà être exécutée et testée directement à partir des sources sur votre ordinateur. Pour démarrer le projet, vous devez exécuter le script main.py, qui est le point d'entrée de l'application.


Après le lancement, les écrans suivants seront disponibles:


Notre tâche consiste à intégrer à l'écran une pile de quatre boutons du type FloatingActionButton, des étiquettes flottantes pour eux et une fonctionnalité minimale pour les événements de bouton. Par une pile de boutons, je veux dire des boutons qui sont placés dans le coin inférieur droit de l'écran et se chevauchent. Étant donné qu'une telle pile peut être utile dans plusieurs projets, nous allons créer un module flottantactionsbuttons.py, que nous pourrons ensuite utiliser partout, dans n'importe quel projet et sur n'importe quelle plate-forme. Ouvrez le répertoire libs / applibs , où se trouvent les packages et modules d'application, et créez le package flottantactionsbuttons avec les fichiers __init__.py , flottantactionsbuttons.kv et flottantactionsbuttons.py :



Le fichier flottantactionsbuttons.kv décrit la disposition des éléments d'interface utilisateur dans le langage Kv spécial, qui est beaucoup plus simple et plus compréhensible que XAML dans Xamarin, xml dans Java ou le balisage JSX dans React Native.

Le fichier flottantactionsbuttons.py contrôle le comportement des éléments et leur logique, qui sont décrits dans flottantactionsbuttons.kv .

Voici à quoi ressemble la disposition de la pile avec nos boutons si clairement et structurée avec une hiérarchie d'éléments facilement visible:


Voyons quels éléments de notre pile correspondent au balisage. Nous avons créé une signature qui correspondra à chaque bouton:


bouton qui sera dans la pile:


bouton principal, qui est ancré dans le coin inférieur droit de l'écran:



et placé tout cela sur l'écran, indiquant aux signatures les positions sur le côté gauche de l'écran (hors visibilité), et pour tous les boutons - les positions dans le coin inférieur droit:


Les boutons se chevauchent simplement. Il est maintenant temps de les faire revivre. Ouvrir un fichier


Kivy crée des animations à l'aide de la classe Animation. Comme en Java, il suffit de spécifier le paramètre de l'élément que l'on veut animer en passant la valeur finale. Par exemple, notez que la hauteur de nos boutons dans la disposition kv est réglée sur 25, soit 25 pixels à partir du bas de l'écran:

 <FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25) #     y 

Étant donné que nous avons trois boutons, dans la boucle, nous indiquons chaque hauteur (paramètre "y" ), à laquelle elle doit être augmentée, et passons le nom de la fonction ( "out_elastic" ), qui est responsable du type d'animation (dans notre projet, j'ai utilisé une animation élastique élastique) , et tout le reste se fait automatiquement:

  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) 

L'animation des signatures est exactement la même, sauf que dans l'animation, nous passons la valeur au paramètre x - la position horizontale de l'élément:

  def show_floating_labels(self): '''         .     Puthon/C++/Php. ''' 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) 

Le colis est prêt. Comment l'ajouter à notre écran unique? Ouvrez le fichier de contrôle de l'écran principal AnimatedButtons / libs / uix / baseclass / basescreen.py :



... importez le package que nous avons créé et ajoutez-le à l'écran:

 from libs.applibs.floatingactionbuttons import FloatingActionButtons class BaseScreen(Screen): '''  .''' def on_enter(self): '''    .''' #      . self.add_widget(FloatingActionButtons( icon='lead-pencil', floating_data={ 'Python': 'language-python', 'Php': 'language-php', 'C++': 'language-cpp'}, callback=self.set_my_language)) 

Comme vous pouvez le voir, tout est simple, transparent et rapide. J'ai peur d'imaginer comment l'implémentation d'une telle fonctionnalité, étant donné la quantité de code nécessaire à l'auteur pour implémenter une application telle que "Hello World" dans cet article , ressemblera à React Native. À côté de Kivy, je ne peux mettre que Xamarin, qui, lors de la construction de packages, tire Mono et d'autres bibliothèques avec lui, tout comme Kivy tire l'interpréteur Python. Les applications prêtes à l'emploi sur Kivy et Xamarin ont la même taille et la vitesse de lancement approximative, mais Xamarin a beaucoup plus de problèmes pour le moment, donc je peux dire avec confiance qu'aujourd'hui Kivy est le cadre de développement multiplateforme n ° 1!

Vous pouvez télécharger le code source du projet sur GitHub .

Exemples d'applications Kivy:

vimeo.com/29348760
vimeo.com/206290310
vimeo.com/25680681
www.youtube.com/watch?v=u4NRu7mBXtA
www.youtube.com/watch?v=9rk9OQLSoJw
www.youtube.com/watch?v=aa9LXpg_gd0
www.youtube.com/watch?v=FhRXAD8-UkE
www.youtube.com/watch?v=GJ3f88ebDqc&t=111s
www.youtube.com/watch?v=D_M1I9GvpYs
www.youtube.com/watch?v=VotPQafL7Nw
youtu.be/-gfwyi7TgLI

play.google.com/store/apps/details?id=org.kognitivo.kognitivo
play.google.com/store/apps/details?id=net.inclem.pyonicinterpreter
play.google.com/store/apps/details?id=com.madhattersoft.guessthequote
play.google.com/store/apps/details?id=com.prog.ders.ceyhan
play.google.com/store/apps/details?id=com.heattheatr.quotessaints