Botón de acción flotante en Xamarin.Forms
Había completado la página de inicio de mi aplicación en Xamarin.Forms Portable.
Ahora quiero agregar un botón de acción de flotación en mi proyecto de Android!
- Xamarin Form Master Página de detalles que no se muestra
- Xamarin Forms Navegación de página MasterDetail causando un accidente en android , Funciona en iOS y UWP
- Xamarin.Forms popup "Nueva Versión Disponible"
- ¿Cómo puedo cambiar el color de un elemento seleccionado en un ListView?
- Arrastrar y soltar en formas Xamarin
¿Hay alguna manera de agregar FAB para Android en mi página de inicio existente, que fue codificado en Xamarin.Forms Portable.
O
Quiero crear una página de inicio independiente para Android y añadirlo como una página principal para Android?
Gracias y saludos.
- Xamarin.Forms ListView: establece el color de resaltado de un elemento seleccionado
- Xamarin.Forms MissingMethodException: 'Android.Support.V4.Widget.DrawerLayout.AddDrawerListener' no encontrado
- Cómo reducir el tamaño de código de usuario para una aplicación Xamarin Forms en Visual Studio 2015?
- Xamarin Android con multidex - error en modo de depuración
- Xamarin mediaPicker.TakePhotoAsync bloquea la aplicación
- MasterDetailPage La página maestra no se abrirá con IsGestureEnabled configurada como falsa Xamarin.Forms Android
- React Native v Formularios Xamarin - Elegir el entorno de la aplicación multiplataforma
- Cómo utilizar controles Xamarin.Form y controles nativos En la misma página
Antes de que saliera la biblioteca de apoyo oficial, volví a portar la FAB.
Ahora hay un ejemplo de Xamarin.Forms en mi repo de GitHub que puedes usar: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
Creación de un control personalizado Para que las propiedades de FAB sean vinculables en Xamarin.Forms, necesitamos un control personalizado con propiedades vinculables.
public class FloatingActionButtonView : View { public static readonly BindableProperty ImageNameProperty = BindableProperty.Create<FloatingActionButtonView,string>( p => p.ImageName, string.Empty); public string ImageName { get { return (string)GetValue (ImageNameProperty); } set { SetValue (ImageNameProperty, value); } } public static readonly BindableProperty ColorNormalProperty = BindableProperty.Create<FloatingActionButtonView,Color>( p => p.ColorNormal, Color.White); public Color ColorNormal { get { return (Color)GetValue (ColorNormalProperty); } set { SetValue (ColorNormalProperty, value); } } public static readonly BindableProperty ColorPressedProperty = BindableProperty.Create<FloatingActionButtonView,Color>( p => p.ColorPressed, Color.White); public Color ColorPressed { get { return (Color)GetValue (ColorPressedProperty); } set { SetValue (ColorPressedProperty, value); } } public static readonly BindableProperty ColorRippleProperty = BindableProperty.Create<FloatingActionButtonView,Color>( p => p.ColorRipple, Color.White); public Color ColorRipple { get { return (Color)GetValue (ColorRippleProperty); } set { SetValue (ColorRippleProperty, value); } } ... }
A continuación, asignaremos cada propiedad a una propiedad correspondiente en el control FAB nativo.
Adjuntar un procesador
Si queremos usar un control nativo en Xamarin.Forms, necesitamos un renderizador. Para simplificar, vamos a utilizar un ViewRenderer
. Este renderizador asignará nuestro FloatingActionButtonView
personalizado a un Android.Widget.FrameLayout
.
public class FloatingActionButtonViewRenderer : ViewRenderer<FloatingActionButtonView, FrameLayout> { ... private readonly Android.Content.Context context; private readonly FloatingActionButton fab; public FloatingActionButtonViewRenderer() { context = Xamarin.Forms.Forms.Context; fab = new FloatingActionButton(context); ... } protected override void OnElementChanged(ElementChangedEventArgs<FloatingActionButtonView> e) { base.OnElementChanged(e); if (e.OldElement != null || this.Element == null) return; if (e.OldElement != null) e.OldElement.PropertyChanged -= HandlePropertyChanged; if (this.Element != null) { //UpdateContent (); this.Element.PropertyChanged += HandlePropertyChanged; } Element.Show = Show; Element.Hide = Hide; SetFabImage(Element.ImageName); fab.ColorNormal = Element.ColorNormal.ToAndroid(); fab.ColorPressed = Element.ColorPressed.ToAndroid(); fab.ColorRipple = Element.ColorRipple.ToAndroid(); var frame = new FrameLayout(Forms.Context); frame.RemoveAllViews(); frame.AddView(fab); SetNativeControl (frame); } public void Show(bool animate = true) { fab.Show(animate); } public void Hide(bool animate = true) { fab.Hide(animate); } void HandlePropertyChanged (object sender, System.ComponentModel.PropertyChangedEventArgs e) { if (e.PropertyName == "Content") { Tracker.UpdateLayout (); } else if (e.PropertyName == FloatingActionButtonView.ColorNormalProperty.PropertyName) { fab.ColorNormal = Element.ColorNormal.ToAndroid(); } else if (e.PropertyName == FloatingActionButtonView.ColorPressedProperty.PropertyName) { fab.ColorPressed = Element.ColorPressed.ToAndroid(); } else if (e.PropertyName == FloatingActionButtonView.ColorRippleProperty.PropertyName) { fab.ColorRipple = Element.ColorRipple.ToAndroid(); } ... } void SetFabImage(string imageName) { if(!string.IsNullOrWhiteSpace(imageName)) { try { var drawableNameWithoutExtension = Path.GetFileNameWithoutExtension(imageName); var resources = context.Resources; var imageResourceName = resources.GetIdentifier(drawableNameWithoutExtension, "drawable", context.PackageName); fab.SetImageBitmap(Android.Graphics.BitmapFactory.DecodeResource(context.Resources, imageResourceName)); } catch(Exception ex) { throw new FileNotFoundException("There was no Android Drawable by that name.", ex); } } } }
Juntar todos juntos
¡DE ACUERDO! Hemos creado el control personalizado y lo hemos asignado a un renderizador. El último paso es establecer el control en nuestra opinión.
public class MainPage : ContentPage { public MainPage() { var fab = new FloatingActionButtonView() { ImageName = "ic_add.png", ColorNormal = Color.FromHex("ff3498db"), ColorPressed = Color.Black, ColorRipple = Color.FromHex("ff3498db") }; // Main page layout var pageLayout = new StackLayout { Children = { new Label { VerticalOptions = LayoutOptions.CenterAndExpand, XAlign = TextAlignment.Center, Text = "Welcome to Xamarin Forms!" } }}; var absolute = new AbsoluteLayout() { VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand }; // Position the pageLayout to fill the entire screen. // Manage positioning of child elements on the page by editing the pageLayout. AbsoluteLayout.SetLayoutFlags(pageLayout, AbsoluteLayoutFlags.All); AbsoluteLayout.SetLayoutBounds(pageLayout, new Rectangle(0f, 0f, 1f, 1f)); absolute.Children.Add(pageLayout); // Overlay the FAB in the bottom-right corner AbsoluteLayout.SetLayoutFlags(fab, AbsoluteLayoutFlags.PositionProportional); AbsoluteLayout.SetLayoutBounds(fab, new Rectangle(1f, 1f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize)); absolute.Children.Add(fab); Content = absolute; } }
Código completo en Github: Botón de acción flotante Xamarin.Forms