Saltar al contenido

Cómo hacer un botón de acción flotante en Xamarin Forms

Agradeceríamos tu apoyo para difundir nuestras crónicas referente a las ciencias de la computación.

Solución:

Puedes usar un ImageButton (Xamarin.Forms v3.4+)

Crea tu imagen con un fondo transparente en tu editor favorito y luego asígnale una ubicación en la página.

ingrese la descripción de la imagen aquí

Ejemplo usando un AbsoluteLayout, simplemente coloque su “FAB” como el último elemento para que su orden Z sea el más alto y “flote” sobre el resto del contenido.

    

         ~~~~

        
    

Producción:

ingrese la descripción de la imagen aquí

**

Si desea una solución que sea simple y sin descargar bibliotecas ni nada, intente esto:

**

En su xaml puede usar un botón normal con esquinas redondeadas. Solo asegúrate de que tanto el ancho como la altura sean iguales. Para que flote, use un diseño absoluto y coloque el botón en la parte inferior. Pegué el mío y su entrada de estilo de mi diccionario de recursos app.xml.

(He usado tanto los paquetes de James Montenago como los controles suaves. El primero no funciona en iOS y el segundo no muestra imágenes en Android. Esta solución funciona tanto en iOS como en Android).

XAML:


      
  

Entrada del diccionario de recursos:

#921813 
            
  • Puede ignorar la entrada del diccionario de recursos si lo desea y, en su lugar, colocar las propiedades directamente en la declaración del botón en su archivo xaml.
  • Descubrí que en algunos dispositivos iOS, los botones no se muestran correctamente si el radio está configurado en 100. Esto se puede solucionar configurando CornerRadius a la mitad del ancho y la altura, o puede usar OnPlatform de esta manera:
     
          
     

(Cuando la altura y el ancho son ambos 50.)

la forma más rápida:

  1. Instale este Nuget: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
  2. Coloque el botón de acción flotante (FAB) así:
      
        

            
                

                    

                

                
                
            
        

No olvides agregar el “añadir.png” icono de sus recursos

Aquí tienes las comentarios y valoraciones

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *