Floating Action Button in Xamarin.Forms

Question

Ich hatte die Startseite meiner App in Xamarin.Forms Portable abgeschlossen.

Jetzt möchte ich eine Flotation Action Button in meinem Android-Projekt hinzufügen!

Gibt es eine Möglichkeit, FAB für Android in meiner vorhandenen Homepage hinzuzufügen, die in Xamarin.Forms Portable codiert wurde.

ODER

Ich möchte eine separate Homepage für Android erstellen und als Mainpage für Android nennen hinzufügen?

Dank und Grüße.

Answer 1

Bevor die offizielle Support-Bibliothek herauskam, portierte ich den FAB um.

Es ist jetzt eine Xamarin.Forms Probe in meinem GitHub Repo, die Sie verwenden können: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android

Answer 2

ein Custom Control Erstellen Für die Eigenschaften des FAB bindable in Xamarin.Forms zu sein, müssen wir eine eigene Steuerung mit bindable Eigenschaften.

Wir werden dann jede Eigenschaft einer entsprechenden Eigenschaft auf dem nativen FAB-Steuerelement zuordnen.

Bringen Sie ein Renderer

Wenn wir eine native Kontrolle in Xamarin.Forms verwenden wollen, müssen wir einen Renderer. Der Einfachheit halber verwenden wir eine ViewRenderer. Dieser Renderer wird unsere benutzerdefinierte FloatingActionButtonView einer Android.Widget.FrameLayout zuordnen.

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

Pull sie alle zusammen

OK! Wir haben das benutzerdefinierte Steuerelement erstellt und es einem Renderer zugeordnet. Der letzte Schritt ist die Festlegung der Kontrolle aus unserer Sicht.

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

komplette Code auf Github: Floating Action Button Xamarin.Forms