Solución:
Button en kivy comienza con un ButtonBehavior que se combina con una etiqueta que agrega propiedades como background_normal / down … para manejar texturas en el lienzo.
Sabiendo esto, simplemente puede combinar ButtonBehavior con cualquier otro widget que elija. P.ej.
from kivy.base import runTouchApp
from kivy.lang import Builder
kv = '''
<[email protected]+AsyncImage>
FloatLayout:
# we don't specify anything here so float layout takes the entire size of the window.
ButImage:
id: but
# take 50% size of the FloatLayout
size_hint: .5, .5
# Make Button change it's opacity when pressed for visual indication
opacity: 1 if self.state == 'normal' else .5
source: 'http://www.victoriamorrow.com/sitebuildercontent/sitebuilderpictures/enter_button.gif'
# Introduce Label incase you want text on top of the image
Label:
center: but.center
# change text acc to but state
text: "Normal" if but.state == 'normal' else 'down'
'''
if __name__ == '__main__':
runTouchApp(Builder.load_string(kv))
Aquí simplemente configuramos el ButtonBehavior para que se combine con una AsyncImage que descarga la imagen de la web para su fondo.
Debería ver algo como esto
La animación afecta en segundo plano.
Esto sería tan simple como cambiar la fuente a un gif animado o una lista de imágenes dentro de un .zip.
from kivy.base import runTouchApp
from kivy.lang import Builder
kv = '''
<[email protected]+AsyncImage>
FloatLayout:
ButImage:
id: but
size_hint: .5, .5
opacity: 1 if self.state == 'normal' else .5
allow_stretch: True
keep_ratio: False
source: 'http://media1.policymic.com/site/article-items/2095/1_gif.gif'
Label:
center: but.center
text: "Normal" if but.state == 'normal' else 'down'
'''
if __name__ == '__main__':
runTouchApp(Builder.load_string(kv))
Mire el ejemplo de imágenes de secuencia. Esto se hizo antes de que se introdujeran ButtonBehaviors, por lo que incluso tiene un ejemplo de una clase AnimatedButton que usa el método anterior, que esencialmente ya no es necesario.
Efecto de sombra:
También hay muchas formas de hacer esto.
Puede agregar una sombra a un widget / diseño y hacer que el botón en la parte superior de este widget / diseño ocupe menos espacio que la sombra para tener en cuenta el toque en las sombras.
O cree su propia clase CustomButtonBehavior derivada de ButtonBehavior que anula collidepoint método para devolver solo True para colisión personalizada. Hay un ejemplo del uso de colisión personalizada para widgets. Incluso puede configurar la imagen keep_data propiedad a Verdadero y luego verifique los datos de píxeles para alfa para determinar si desea devolver verdadero para colisión.
Bordes redondeados, etc.
Simplemente use una imagen con bordes redondeados kivy admite el uso de la instrucción BorderImage, que es equivalente a css borderimage en términos de funcionalidad. El propio botón de Kivy usa esto por defecto. Pruebe y experimente con el atributo de borde de BorderImage.