في عالم التطوير عبر الأنظمة الأساسية للأنظمة الأساسية للجوّال ، ربما ، للأسف ، يسيطر إطاران - Xamarin و React Native. Xamarin - لأنه هو "ابن بالتبني" من Microsoft ، وهو يتباهى بفخر بالعكازات ، يعمل بنشاط على تعزيز هذا الأخير ، و React Native هو نسل Facebook الأقل شهرة ، والذي لا يولد كبرياء للمبرمجين الذين سئموا تطويره. بالنسبة لي ، لقد وجدت بديلاً منذ فترة طويلة ، وبالنسبة لأولئك الذين ليسوا على دراية بإطار تطوير Kivy عبر الأنظمة الأساسية ، مرحبًا بكم في ...
ما هو جيد كيفي؟ الأول هو أنه ليس JavaScript. هذه بيثون. ومن هنا سرعة التطور ، وإيجاز الكود ، والقدرة على التغيير وتتبع التغييرات في التطبيقات على الفور ، وهذه هي القدرة على كتابة الكود ببساطة في وقت ينمو فيه الآخرون لحاهم في محاولات فاشلة لإنهاء تطبيقهم أو عمل العكازات العصرية التالية لمشاريعهم. ثانيًا ، هذا هو إطار عمل حقيقي عبر الأنظمة الأساسية بنسبة 99.9٪ يمكنك التأكد من أن الرمز الخاص بك ، بمجرد كتابته ، سيتم إطلاقه وسيعمل على جميع الأنظمة الأساسية المتاحة. كمرجع: Xamarin هو 60 ٪ فقط من الكود الذي يمكن إعادة استخدامه ، على الرغم من أن المطورين يدعون أنه 80 ٪. Kivy هو إطار ناضج تم تطويره منذ عام 2011 وهو أقدم من زميله React Native (2015) و Xamarin البالغ من العمر عام واحد (2011).
بالنسبة لمقالة اليوم ، قمت بإعداد مثال صغير يوضح بوضوح جميع مزايا Kivy المذكورة أعلاه. سنقوم بإنشاء مشروع جديد باستخدام أداة وحدة التحكم
CreatorKivyProject ، ونرى كيفية تحريك الحاجيات في Kivy وإنشاء شاشة واحدة بالمحتويات التالية:
لذا ، قم بتنزيل الأداة المساعدة
CreatorKivyProject وقم بإنشاء مشروع جديد باتباع الإرشادات في README. بعد تنفيذ أمر بسيط ، سيتم إنشاء مشروع فارغ مع شاشة رئيسية واحدة وشاشتين إضافيتين "حول" و "ترخيص" ، والتي يمكن فتحها في قائمة درج التنقل. هذا ليس تطبيقًا جاهزًا لمنصات الجوال ، ولكن يمكن بالفعل تشغيله واختباره مباشرة من المصادر الموجودة على جهاز الكمبيوتر الخاص بك. لبدء المشروع ، تحتاج إلى تشغيل main.py script ، وهو نقطة الدخول إلى التطبيق.
بعد الإطلاق ، ستكون الشاشات التالية متاحة:
مهمتنا هي دمج مجموعة من أربعة أزرار من النوع FloatingActionButton في الشاشة ، وتسميات عائمة لهم والحد الأدنى من الوظائف لأحداث الأزرار. من خلال مجموعة من الأزرار ، أعني الأزرار التي يتم وضعها في الزاوية اليمنى السفلية من الشاشة وتتداخل مع بعضها البعض. نظرًا لأن هذا المكدس يمكن أن يكون مفيدًا في أكثر من مشروع ، فسننشئ وحدة نمطية floatingactionsbuttons.py ، والتي يمكننا استخدامها لاحقًا في كل مكان ، في أي مشروع وعلى أي نظام أساسي. افتح دليل
libs / applibs ، حيث توجد حزم التطبيق والوحدات النمطية ، وقم بإنشاء حزمة
العائمة مع الملفات
__init__.py و
floatingactionsbuttons.kv و
floatingactionsbuttons.py :
يصف ملف
floatingactionsbuttons.kv تخطيط عناصر واجهة المستخدم في لغة Kv الخاصة ، وهو أبسط بكثير ومفهوم أكثر من XAML في Xamarin أو xml في Java أو JSX في React Native.
يتحكم ملف
floatingactionsbuttons.py في سلوك العناصر ومنطقها الموصوف في
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()
دعنا نرى ما هي العناصر في المكدس الخاص بنا والتي تتوافق مع الترميز. لقد أنشأنا توقيعًا يتوافق مع كل زر:
الزر الذي سيكون في المكدس:
الزر الرئيسي ، الموجود في الركن الأيمن السفلي من الشاشة:
ووضع كل هذا على الشاشة ، مشيرًا إلى التوقيعات على المواضع على الجانب الأيسر من الشاشة (خارج الرؤية) ، وبالنسبة لجميع الأزرار - المواضع الموجودة في الركن الأيمن السفلي:
تتداخل الأزرار ببساطة. الآن هو الوقت المناسب لإحيائهم. افتح الملف
العائمة العائمة 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 رسومًا متحركة باستخدام فئة الرسوم المتحركة. كما هو الحال في Java ، يكفي تحديد معلمة العنصر الذي نريد تحريكه ، بتمرير القيمة النهائية. على سبيل المثال ، لاحظ أن ارتفاع الأزرار في تخطيط kv معيَّن على 25 ، أي 25 بكسل من أسفل الشاشة:
<FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25)
نظرًا لأن لدينا ثلاثة أزرار ، في الحلقة ، نشير إلى كل ارتفاع (المعلمة
"y" ) ، والتي يجب رفعها إليها ،
ونمر اسم الوظيفة (
"out_elastic" ) ، المسؤولة عن نوع الرسوم المتحركة (في مشروعنا ، استخدمت الرسوم المتحركة الربيعية المرنة) ، ويتم كل شيء آخر تلقائيًا:
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)
الرسوم المتحركة للتوقيعات هي نفسها تمامًا ، باستثناء أنه في الرسوم المتحركة ، نمرر القيمة إلى المعلمة
x - الموضع الأفقي للعنصر:
def show_floating_labels(self): ''' . Puthon/C++/Php. ''' i = 0
الحزمة جاهزة. كيفية إضافته إلى شاشتنا الفردية؟ افتح ملف التحكم في الشاشة الرئيسية
AnimatedButtons / libs / uix / baseclass / basescreen.py :
... استيراد الحزمة التي أنشأناها وإضافتها إلى الشاشة:
from libs.applibs.floatingactionbuttons import FloatingActionButtons class BaseScreen(Screen): ''' .''' def on_enter(self): ''' .'''
كما ترى ، كل شيء بسيط وشفاف وسريع. أخشى أن أتخيل كيف سيبدو تنفيذ مثل هذه الوظيفة ، بالنظر إلى مقدار الرمز الذي استغرقه المؤلف لتطبيق تطبيق مثل "Hello World" في
هذه المقالة ، مثل React Native. بجانب Kivy ، يمكنني وضع Xamarin فقط ، والذي عند إنشاء الحزم ، يسحب Mono والمكتبات الأخرى معه ، تمامًا مثل Kivy يسحب مترجم Python. التطبيقات الجاهزة على Kivy و Xamarin لها نفس الحجم وسرعة الإطلاق التقريبية ، لكن Xamarin لديها المزيد من المشاكل في الوقت الحالي ، لذلك يمكنني القول بثقة أن Kivy اليوم هو إطار التطوير رقم 1 عبر الأنظمة الأساسية!
يمكنك تنزيل الكود المصدري للمشروع على
GitHub .
أمثلة على تطبيقات 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