Pulsante di azione mobile in Xamarin.Forms

Question

Avevo completato la home page della mia app in Xamarin.Forms Portable.

Ora voglio aggiungere un pulsante di azione di flottazione nel mio progetto Android!

C'è un modo per aggiungere FAB per Android nella mia home page esistente, che è stata codificata in Xamarin.Forms Portable.

O

Voglio creare una home page separato per Android e aggiungere chiamarlo come MainPage per Android?

Grazie e saluti.

Answer 1

Prima che uscisse la libreria di supporto ufficiale, ho spostato il FAB.

V'è ora un campione Xamarin.Forms nel mio repo GitHub che è possibile utilizzare: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android

Answer 2

Costruire un controllo personalizzato Per le proprietà del FAB di essere associabile a Xamarin.Forms, abbiamo bisogno di un controllo personalizzato con bindable proprietà.

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); } 
    } 
    ... 
} 

Mapperemo quindi ciascuna proprietà in una proprietà corrispondente sul controllo FAB nativo.

Collegare un renderer

Se vogliamo usare un controllo nativo in Xamarin.Forms, abbiamo bisogno di un renderer. Per semplicità, utilizziamo un ViewRenderer. Questo renderer mapperà la nostra custom FloatingActionButtonView a 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); 
      } 
     } 
    } 
} 

tirare tutti insieme

OK! Abbiamo creato il controllo personalizzato e lo abbiamo mappato a un renderer. L'ultimo passo è stabilire il controllo a nostro avviso.

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; 
    } 
} 

completo del codice su Github: Floating Action Button Xamarin.Forms