KivyMD - la vie continue


Salutations!

Aujourd'hui, nous allons parler de l'interface utilisateur sur Android dans les applications écrites à l'aide du cadre de développement multiplateforme Kivy. Vous ne le saviez peut-être pas, mais pour Kivy, il existe la bibliothèque KivyMD, qui fournit des widgets de style Material Design pour vos programmes. Malheureusement, rien de tel n'existe sous la plateforme iOS. De plus, KivyMD, apparemment, a été laissé par son créateur, puisque le dernier commit dans le navet était il y a environ un an. Que faire et comment vivre avec, lisez la suite ...

En visitant de temps en temps le dépôt officiel de KivyMD , j'ai malheureusement constaté que rien n'y changeait et n'allait pas changer:



Dans mes projets Kivy, je peux implémenter n'importe quelle interface utilisateur, ce que, en fait, je fais. Mais récemment, j'ai découvert que je traîne une partie croissante des modules que j'ai mis en œuvre de projet en projet, ce qui est terriblement gênant. Certaines de ces solutions sont publiées en tant que référentiels distincts sur GitHub. Cependant, il n’est toujours pas pratique de partager, gérer et utiliser tout cela, car il existe de plus en plus de tels modules. La décision a été prise relativement récemment: KivyMD, en tant que projet Open Source, passe sous mon aile. Maintenant, un fork de cette bibliothèque est ici .

J'ai corrigé les erreurs subies par certains widgets. Par exemple, le widget MDDropDownMenu a été privé de la fonction de défilement et de sélection d'un élément. Maintenant, cela ressemble à ceci:


En plus d'un tas d'autres corrections, grandes et non, de nouveaux widgets et contrôles ont été ajoutés. En plus des MDFlatButton, MDRaisedButton, MDIconButton MDFloatingActioButton existants ...


... J'ai implémenté un certain nombre de contrôles: MDRectangleFlatButton, MDRectangleFlatIconButton, MDRoundFlatIconButton, MDRoundFlatButton, MDFillRoundFlatButton , qui manquaient clairement dans le kit:


J'essaie également de simplifier au maximum le travail avec KivyMD. L'utilisation des nouveaux contrôles décrits ci-dessus dans votre balisage ressemblera à ceci:

MDRectangleFlatButton: text: "MDRectangleFlatButton" MDRectangleFlatIconButton: text: "I love Python" icon: "language-python" MDRoundFlatButton: text: "I love Python" icon: "language-python" MDRoundFlatIconButton: text: "I love Python" icon: "language-python" MDFillRoundFlatButton: text: "I love Python" 

Récemment, un message a été ajouté à mon groupe VKontakte dans lequel une personne a demandé de l'aide pour la mise en place d'une carte de contact:
Salutations!

Question sur la mise en page.

Je crée une fiche de contact et je ne peux pas choisir le type de mise en page à

a) ne s'étirait pas et les éléments étaient disposés les uns après les autres verticalement

b) il n'y avait pas d'écart géant entre les éléments

À propos de BoxLayout essayé, StackLayout - pour une raison quelconque, les écarts entre les éléments. Je joins l'écran du formulaire et le code kv.

On peut voir qu'après le premier bloc avec un avatar il y a un espace, après les blocs de texte aussi. Comment corriger pour qu'il y ait des espaces égaux partout, pour que tous les éléments soient de type valign: True?
Voici le résultat:


J'ai corrigé le code, et en même temps ajouté un widget de carte à KivyMD - MDUserAnimationCard , qui implémente ce comportement:


Tout ce que vous créez est du contenu qui sera affiché sous la carte de l'utilisateur. La fonction de défilement du contenu sera appliquée automatiquement si sa hauteur dépasse l'espace restant à l'écran:


Ensuite, ajoutez simplement la classe du contenu que vous avez créé à la MDUserAnimationCard :

  def show_user_card(self): user_animation_card = MDUserAnimationCard( user_name="Lion Lion", path_to_avatar="./assets/african-lion-951778_1280.jpg", callback=main_back_callback) user_animation_card.box_content.add_widget(ContentForAnimCard()) user_animation_card.open() 

MDStackFloatingButtons, déjà connu de vous par l' article , a migré vers KivyMD:


L'utilisation de ce widget a également été simplifiée au maximum:

  def example_add_stack_floating_buttons(self): def set_my_language(instance_button): toast(instance_button.icon) screen = self.main_widget.ids.scr_mngr.get_screen('stack buttons') screen.add_widget(MDStackFloatingButtons( icon='lead-pencil', floating_data={ 'Python': 'language-python', 'Php': 'language-php', 'C++': 'language-cpp'}, callback=set_my_language)) 

Un certain nombre de cartes prêtes à l'emploi ont été implémentées, par exemple pour une liste de postes, etc.:


Exemple d'utilisation:


 MDCardPost(text_post='Card with text', swipe=True, callback=callback)) 


 menu_items = [ {'viewclass': 'MDMenuItem', 'text': 'Example item %d' % i, 'callback': self.callback_for_menu_items} for i in range(2) ] MDCardPost( right_menu=menu_items, swipe=True, callback=callback text_post='Card with a button to open the menu MDDropDown')) 


 MDCardPost( likes_stars=True, callback=callback, swipe=True, text_post='Card with asterisks for voting.')) 


 buttons = ['facebook', 'vk', 'twitter'] text_post = \ "This is my favorite cat. He's only six months " "old. He loves milk and steals sausages :) " "And he likes to play in the garden." MDCardPost( source="./assets/kitten-1049129_1280.jpg", tile_text="Little Baby", tile_font_style="Headline", text_post=text_post, with_image=True, swipe=True, callback=callback, buttons=buttons)) 

Progression du téléchargement de contenu à partir du serveur, gestionnaire de fichiers simple, widget PullToUpdate:


Démonstration vidéo complète des widgets de bibliothèque:


Pour en revenir au début, je dirai que tout cela n'est bon que pour Android, car, bien sûr, nous ne pouvons pas utiliser Material Design dans les applications pour la plate-forme iOS. Et j'aimerais beaucoup adapter KivyMD pour générer une interface utilisateur qui serait également native sur iOS. Techniquement, il n'y a pas d'obstacles à cette tâche. Le seul hic, c'est que je n'ai pas d'appareil iOS, donc je ne sais pas à quoi ressemble l'interface utilisateur, l'animation et les autres designs. Bien sûr, il existe des guides de conception pour iOS, mais les guides sont des guides, et j'étais heureux si une personne intéressée par le développement de la bibliothèque KivyMD envoyait des dizaines de captures d'écran et d'animations de la conception de référence des applications sous la plate-forme iOS. Assez, par exemple, de ce qui est actuellement déjà implémenté dans KivyMD, mais uniquement pour une pomme. Pour sim me laisser prendre congé, frapper sur le PM, j'espère, comme toujours, n'était pas inutile.

Source: https://habr.com/ru/post/fr422721/


All Articles