Dalam dunia pengembangan lintas platform untuk platform seluler, sekarang, mungkin, sayangnya, dua kerangka kerja mendominasi - Xamarin dan React Native. Xamarin - karena itu adalah "putra angkat" Microsoft dan, dengan bangga mengayunkan kruk, secara aktif mempromosikan yang terakhir, dan React Native adalah keturunan dari Facebook yang tidak kalah terkenal, yang dengan kebanggaan yang tidak kurang menumbuhkan janggut untuk programmer yang lelah mengembangkannya. Bagi saya sendiri, saya telah lama menemukan alternatif, dan bagi mereka yang tidak terbiasa dengan kerangka pengembangan lintas-platform Kivy, selamat datang di ...
Apa yang baik Kivy? Yang pertama adalah bahwa itu bukan JavaScript. Ini adalah Python. Oleh karena kecepatan pengembangan, singkatnya kode, kemampuan untuk secara instan mengubah dan melacak perubahan dalam aplikasi, ini adalah kemampuan untuk hanya menulis kode pada saat orang lain menumbuhkan janggut dalam upaya yang gagal untuk menyelesaikan aplikasi mereka atau membuat kruk trendi berikutnya untuk proyek mereka. Kedua, ini adalah kerangka kerja lintas platform nyata 99,9% yang dengannya Anda dapat memastikan bahwa kode Anda, setelah ditulis, akan diluncurkan dan akan bekerja pada semua platform yang tersedia. Untuk referensi: Xamarin hanya 60% dari kode yang dapat digunakan kembali, meskipun pengembang mengklaim 80%. Kivy adalah kerangka kerja matang yang telah dikembangkan sejak 2011 dan lebih tua dari rekannya, React Native (2015) dan Xamarin (2011) yang berumur satu tahun.
Untuk artikel hari ini, saya menyiapkan contoh kecil yang dengan jelas menunjukkan semua keunggulan Kivy di atas. Kami akan membuat proyek baru menggunakan utilitas konsol
CreatorKivyProject , melihat cara menghidupkan widget di Kivy dan membuat satu layar dengan konten berikut:
Jadi, unduh utilitas
CreatorKivyProject dan buat proyek baru dengan mengikuti instruksi di README. Setelah menjalankan perintah sederhana, proyek kosong akan dibuat dengan satu layar utama dan dua layar tambahan 'Tentang' dan 'Lisensi', yang dapat dibuka di menu Navigasi Drawer. Ini bukan aplikasi yang sudah jadi untuk platform seluler, tetapi sudah bisa dijalankan dan diuji langsung dari sumber di komputer Anda. Untuk memulai proyek, Anda perlu menjalankan skrip main.py, yang merupakan titik masuk ke aplikasi.
Setelah peluncuran, layar berikut akan tersedia:
Tugas kami adalah untuk mengintegrasikan ke dalam layar tumpukan empat tombol dari tipe FloatingActionButton, label mengambang untuk mereka dan fungsionalitas minimal untuk acara tombol. Dengan setumpuk tombol, maksud saya tombol yang ditempatkan di sudut kanan bawah layar dan saling tumpang tindih. Karena tumpukan seperti itu dapat berguna di lebih dari satu proyek, kami akan membuat modul floatingactionsbuttons.py, yang nantinya dapat kami gunakan di mana-mana, dalam proyek apa pun, dan pada platform apa pun. Buka
direktori libs / applibs , di mana paket aplikasi dan modul berada, dan buat paket
floatingactionsbuttons dengan file
__init__.py ,
floatingactionsbuttons.kv dan
floatingactionsbuttons.py :
File
floatingactionsbuttons.kv menjelaskan tata letak elemen UI dalam Bahasa Kv khusus, yang jauh lebih sederhana dan lebih mudah dipahami daripada XAML di Xamarin, xml di Jawa atau markup JSX di React Native.
File
floatingactionsbuttons.py mengontrol perilaku elemen dan logikanya, yang dijelaskan dalam
floatingactionsbuttons.kv .
Beginilah tata letak tumpukan dengan tombol kami terlihat begitu jelas dan terstruktur dengan hierarki elemen yang mudah terlihat:
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()
Mari kita lihat elemen apa yang ada di stack yang sesuai dengan markup. Kami telah membuat tanda tangan yang sesuai dengan setiap tombol:
tombol yang akan ada di tumpukan:
tombol utama, yang berlabuh di sudut kanan bawah layar:
dan meletakkan semua ini di layar, menunjukkan ke tanda tangan posisi di sisi kiri layar (di luar visibilitas), dan untuk semua tombol - posisi di sudut kanan bawah:
Tombol kita tumpang tindih. Sekarang adalah waktunya untuk membangkitkan mereka. Buka file
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 membuat animasi menggunakan kelas Animasi. Seperti di Jawa, cukup untuk menentukan parameter elemen yang ingin kita menghidupkan, melewati nilai akhir. Misalnya, perhatikan bahwa ketinggian tombol kami di tata letak kv diatur ke 25, mis. 25 piksel dari bagian bawah layar:
<FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25)
Karena kami memiliki tiga tombol, dalam loop kami menunjukkan setiap ketinggian (parameter
"y" ), yang harus dinaikkan, dan meneruskan nama fungsi (
"out_elastic" ), yang bertanggung jawab untuk jenis animasi (dalam proyek kami, saya menggunakan animasi pegas elastis) , dan yang lainnya dilakukan secara otomatis:
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)
Animasi tanda tangan persis sama, kecuali bahwa dalam Animasi kami meneruskan nilai ke parameter
x - posisi horizontal elemen:
def show_floating_labels(self): ''' . Puthon/C++/Php. ''' i = 0
Paket sudah siap. Bagaimana cara menambahkannya ke layar tunggal kami? Buka file kontrol layar utama
AnimatedButtons / libs / uix / baseclass / basescreen.py :
... impor paket yang kami buat dan tambahkan ke layar:
from libs.applibs.floatingactionbuttons import FloatingActionButtons class BaseScreen(Screen): ''' .''' def on_enter(self): ''' .'''
Seperti yang Anda lihat, semuanya sederhana, transparan, dan cepat. Saya takut membayangkan bagaimana penerapan fungsi tersebut, mengingat berapa banyak kode yang diperlukan penulis untuk mengimplementasikan aplikasi seperti "Hello World" dalam
artikel ini , akan terlihat seperti React Native. Di sebelah Kivy, saya hanya bisa meletakkan Xamarin, yang, ketika membangun paket, menarik Mono dan perpustakaan lain bersamanya, sama seperti Kivy menarik interpreter Python. Aplikasi siap pakai di Kivy dan Xamarin memiliki ukuran yang sama dan perkiraan kecepatan peluncuran, tetapi Xamarin memiliki lebih banyak masalah saat ini, jadi saya dapat mengatakan dengan keyakinan bahwa hari ini Kivy adalah kerangka kerja pengembangan lintas platform # 1!
Anda dapat mengunduh kode sumber proyek di
GitHub .
Contoh aplikasi 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