No mundo do desenvolvimento de plataforma cruzada para plataformas móveis, agora, provavelmente, infelizmente, duas estruturas dominam - Xamarin e React Native. Xamarin - porque é o "filho adotivo" da Microsoft e, orgulhosamente brandindo muletas, está promovendo ativamente o último, e o React Native é o filho do não menos famoso Facebook, que com menos orgulho faz barba para programadores que estão cansados de desenvolvê-lo. Para mim, há muito tempo encontrei uma alternativa e, para aqueles que não estão familiarizados com a estrutura de desenvolvimento entre plataformas do Kivy, sejam bem-vindos ao ...
O que é bom Kivy? A primeira é que não é JavaScript. Este é o Python. Portanto, a velocidade do desenvolvimento, a brevidade do código, a capacidade de alterar instantaneamente e rastrear alterações nos aplicativos, é a capacidade de simplesmente escrever código em um momento em que outras pessoas crescem com barba em tentativas malsucedidas de finalizar seu aplicativo ou fazer as próximas muletas da moda para seus projetos. Em segundo lugar, é uma estrutura de plataforma cruzada real de 99,9% com a qual você pode ter certeza de que seu código, uma vez gravado, será iniciado e funcionará em todas as plataformas disponíveis. Para referência: o Xamarin é apenas 60% do código que pode ser reutilizado, apesar dos desenvolvedores afirmarem ser 80%. O Kivy é um framework maduro desenvolvido desde 2011 e mais antigo que o seu colega React Native (2015) e Xamarin (2011) de um ano de idade.
Para o artigo de hoje, preparei um pequeno exemplo que demonstra claramente todas as vantagens acima do Kivy.
Criaremos um novo projeto usando o utilitário do console
CreatorKivyProject . Veja como animar widgets no Kivy e criar uma tela com o seguinte conteúdo:
Portanto, faça o download do utilitário
CreatorKivyProject e crie um novo projeto seguindo as instruções em README. Após executar um comando simples, um projeto vazio será criado com uma tela principal e duas telas adicionais 'Sobre' e 'Licença', que podem ser abertas no menu Gaveta de Navegação. Este não é um aplicativo pronto para plataformas móveis, mas já pode ser executado e testado diretamente das fontes do seu computador. Para iniciar o projeto, você precisa executar o script main.py, que é o ponto de entrada para o aplicativo.
Após o lançamento, as seguintes telas estarão disponíveis:
Nossa tarefa é integrar na tela uma pilha de quatro botões do tipo FloatingActionButton, rótulos flutuantes para eles e funcionalidade mínima para eventos de botões. Por uma pilha de botões, quero dizer botões que são colocados no canto inferior direito da tela e se sobrepõem. Como essa pilha pode ser útil em mais de um projeto, criaremos um módulo floatingactionsbuttons.py, que poderemos usar posteriormente em qualquer lugar, em qualquer projeto e em qualquer plataforma. Abra o
diretório libs / applibs , onde os pacotes e módulos do aplicativo estão localizados, e crie o pacote
floatingactionsbuttons com os arquivos
__init__.py ,
floatingactionsbuttons.kv e
floatingactionsbuttons.py :
O arquivo
floatingactionsbuttons.kv descreve o layout dos elementos da interface do usuário na linguagem Kv especial, que é muito mais simples e compreensível que o XAML no Xamarin, o xml na marcação Java ou JSX no React Native.
O arquivo
floatingactionsbuttons.py controla o comportamento dos elementos e sua lógica, descritos em
floatingactionsbuttons.kv .
É assim que o layout da pilha com nossos botões parece tão claramente e estruturado com uma hierarquia de elementos facilmente visível:
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()
Vamos ver quais elementos em nossa pilha correspondem à marcação. Criamos uma assinatura que corresponderá a cada botão:
botão que estará na pilha:
botão principal, ancorado no canto inferior direito da tela:
e colocou tudo isso na tela, indicando nas assinaturas as posições no lado esquerdo da tela (fora da visibilidade) e para todos os botões - as posições no canto inferior direito:
Botões simplesmente sobrepostos. Agora é a hora de revivê-los. Abrir arquivo
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 cria animações usando a classe Animação. Como em Java, basta especificar o parâmetro do elemento que queremos animar, passando o valor final. Por exemplo, observe que a altura de nossos botões no layout kv está definida como 25, ou seja, 25 pixels na parte inferior da tela:
<FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25)
Como temos três botões, no loop, indicamos cada altura (parâmetro
“y” ) para a qual ela deve ser aumentada e passamos o nome da função (
“out_elastic” ), responsável pelo tipo de animação (em nosso projeto, usei a animação elástica de mola) , e tudo o mais é feito automaticamente:
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)
A animação das assinaturas é exatamente a mesma, exceto que na animação passamos o valor para o parâmetro
x - a posição horizontal do elemento:
def show_floating_labels(self): ''' . Puthon/C++/Php. ''' i = 0
O pacote está pronto. Como adicioná-lo à nossa tela única? Abra o arquivo de controle da tela principal
AnimatedButtons / libs / uix / baseclass / basescreen.py :
... importe o pacote que criamos e adicione-o à tela:
from libs.applibs.floatingactionbuttons import FloatingActionButtons class BaseScreen(Screen): ''' .''' def on_enter(self): ''' .'''
Como você pode ver, tudo é simples, transparente e rápido. Tenho medo de imaginar como a implementação dessa funcionalidade, dado o código necessário para o autor implementar um aplicativo como "Hello World"
neste artigo , parecerá com o React Native. Ao lado do Kivy, posso colocar apenas o Xamarin, que, ao criar pacotes, puxa o Mono e outras bibliotecas, assim como o Kivy puxa o interpretador Python. Os aplicativos prontos para o Kivy e o Xamarin têm o mesmo tamanho e velocidade de inicialização aproximada, mas o Xamarin tem muito mais problemas no momento, então posso dizer com confiança que hoje o Kivy é o principal framework de desenvolvimento entre plataformas!
Você pode baixar o código fonte do projeto no
GitHub .
Exemplos de aplicativos 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