KivyMD - hidup terus berjalan

Salam!

Hari ini kita akan berbicara tentang UI di Android dalam aplikasi yang ditulis menggunakan kerangka pengembangan lintas platform Kivy. Anda mungkin tidak tahu tentang ini, tetapi untuk Kivy ada perpustakaan KivyMD, yang menyediakan widget gaya Desain Bahan untuk program Anda. Sayangnya, tidak ada yang semacam itu ada di bawah platform iOS. Selain itu, KivyMD, tampaknya, ditinggalkan oleh penciptanya, karena komit terakhir dalam lobak adalah sekitar setahun yang lalu. Apa yang harus dilakukan dan bagaimana hidup dengannya, baca terus ...

Kadang-kadang mengunjungi repositori resmi KivyMD , saya sedih menemukan bahwa tidak ada yang berubah di dalamnya dan tidak akan berubah:



Dalam proyek Kivy saya, saya bisa menerapkan UI apa pun, yang, sebenarnya, saya lakukan. Tetapi baru-baru ini saya menemukan bahwa saya menyeret bagian yang meningkat dari modul yang telah saya implementasikan dari proyek ke proyek, yang sangat merepotkan. Beberapa solusi ini diposting sebagai repositori terpisah di GitHub. Namun, masih tidak nyaman untuk berbagi, mengelola, dan menggunakan semua ini, karena ada lebih banyak modul seperti itu. Keputusan itu dibuat relatif baru-baru ini: KivyMD, sebagai proyek Open Source, berada di bawah sayap saya. Sekarang garpu perpustakaan ini ada di sini .

Saya memperbaiki kesalahan yang dialami beberapa widget. Misalnya, widget MDDropDownMenu tidak memiliki fungsi menggulir dan memilih item. Sekarang terlihat seperti ini:


Selain banyak koreksi lainnya, besar dan tidak begitu, widget dan kontrol baru ditambahkan. Selain Tombol MDF yang ada , MDRaisedButton, MDIconButton MDFloatingActioButton ...


... Saya menerapkan sejumlah kontrol: MDRectangleFlatButton, MDRectangleFlatIconButton, MDRoundFlatIconButton, MDRoundFlatButton, MDFillRoundFlatButton , yang jelas hilang dalam kit:


Saya juga mencoba menyederhanakan pekerjaan dengan KivyMD sebanyak mungkin. Menggunakan kontrol baru yang dijelaskan di atas dalam markup Anda akan terlihat seperti ini:

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" 

Baru-baru ini, sebuah pos telah ditambahkan ke grup VKontakte saya di mana seseorang meminta bantuan dengan penerapan kartu kontak:

Salam!

Pertanyaan tentang Tata Letak.

Saya membuat kartu kontak dan saya tidak bisa memilih tipe Tata Letak

a) tidak meregang, dan elemen-elemen disusun satu demi satu secara vertikal

b) tidak ada celah raksasa di antara elemen-elemen itu

Tentang mencoba BoxLayout, StackLayout - untuk beberapa alasan kesenjangan antara elemen. Saya lampirkan layar formulir dan kode kv.

Dapat dilihat bahwa setelah blok pertama dengan avatar ada celah, setelah blok teks juga. Bagaimana cara memperbaikinya sehingga ada ruang yang sama di mana-mana, sehingga semua elemen bertipe valign: Benar?

Inilah hasilnya:


Saya mengoreksi kode, dan pada saat yang sama menambahkan widget kartu ke KivyMD - MDUserAnimationCard , yang mengimplementasikan perilaku ini:


Semua yang Anda buat adalah konten yang akan ditampilkan di bawah kartu pengguna. Fungsi gulir untuk konten akan diterapkan secara otomatis jika tingginya melebihi ruang yang tersisa di layar:


Selanjutnya, cukup tambahkan kelas konten yang Anda buat ke 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, yang sudah diketahui oleh artikel Anda , dimigrasikan ke KivyMD:


Menggunakan widget ini juga telah disederhanakan secara maksimal:

  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)) 

Sejumlah kartu yang siap digunakan telah diterapkan, misalnya, untuk daftar posting, dll.:


Contoh penggunaan:

 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)) 

Kemajuan mengunduh konten dari server, pengelola file sederhana, widget PullToUpdate:


Demo video lengkap widget perpustakaan:


Kembali ke awal, saya akan mengatakan bahwa semua ini hanya baik untuk Android, karena, tentu saja, kami tidak dapat menggunakan Desain Material dalam aplikasi untuk platform iOS. Dan saya sangat ingin mengadaptasi KivyMD untuk menghasilkan UI yang akan terlihat asli di iOS juga. Secara teknis, tidak ada hambatan untuk tugas ini. Satu-satunya hasil adalah saya tidak memiliki perangkat iOS, jadi saya tidak tahu seperti apa UI, animasi, dan desain lainnya. Tentu saja, ada panduan desain untuk iOS, tetapi panduan tersebut adalah panduan, dan saya senang jika seseorang yang tertarik mengembangkan perpustakaan KivyMD akan mengirim lusinan tangkapan layar dan animasi dari desain referensi aplikasi di bawah platform iOS. Cukup, misalnya, dari apa yang saat ini sudah diterapkan di KivyMD, tetapi hanya untuk apel. Untuk sim biarkan aku pergi, mengetuk PM, saya berharap, seperti biasa, tidak sia-sia.