Xamarin Forms Xlabs

Question

Ich möchte eine Schaltfläche hinzufügen, die über der ListView sein sollte, genauso wie die WhatsApp Leute getan haben und ich möchte die gleiche Sache mit Xamarin Forms, ich habe versucht mit dem xlab PopupLayout, aber ich konnte nicht um die Position des Knopfes zu reparieren, wie in der Abbildung gezeigt, ist das Problem mit den verschiedenen Bildschirmgrößen und -orientierungen. So kann mir1 helfen, wie man den Standort des Popups repariert, indem er xlab popuplayout in xamarin Formen verwendet und es sollte alles behandeln die Bildschirmgrößen und -orientierungen.

Answer 1

Werfen Sie einen Blick auf this great post von Alex Dunn. Er implementiert einen Floating Action Button (so wie er genannt wird) auf Android und iOS über Xamarin.Forms. Es ist einfach, aber Sie können es selbst erweitern.

Der Kern ist erstellen Sie ein Steuerelement in Ihrem gemeinsamen Code, wie folgt aus:

public partial class FloatingActionButton : Button 
{ 
    public static BindableProperty ButtonColorProperty = BindableProperty.Create(nameof(ButtonColor), typeof(Color), typeof(FloatingActionButton), Color.Accent); 
    public Color ButtonColor 
    { 
     get 
     { 
      return (Color)GetValue(ButtonColorProperty); 
     } 

     set 
     { 
       SetValue(ButtonColorProperty, value); 
     } 
    } 

    public FloatingActionButton() 
    { 
     InitializeComponent(); 
    } 
} 

Jetzt auf Android ein custom renderer implementieren, wie folgt aus:

using FAB = Android.Support.Design.Widget.FloatingActionButton; 

[assembly: ExportRenderer(typeof(SuaveControls.Views.FloatingActionButton), typeof(FloatingActionButtonRenderer))] 
namespace SuaveControls.FloatingActionButton.Droid.Renderers 
{ 
    public class FloatingActionButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ViewRenderer<SuaveControls.Views.FloatingActionButton, FAB> 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<SuaveControls.Views.FloatingActionButton> e) 
     { 
      base.OnElementChanged(e); 

      if (e.NewElement == null) 
       return; 

      var fab = new FAB(Context); 
      // set the bg 
      fab.BackgroundTintList = ColorStateList.ValueOf(Element.ButtonColor.ToAndroid()); 

      // set the icon 
      var elementImage = Element.Image; 
      var imageFile = elementImage?.File; 

      if (imageFile != null) 
      { 
       fab.SetImageDrawable(Context.Resources.GetDrawable(imageFile)); 
      } 
      fab.Click += Fab_Click; 
      SetNativeControl(fab); 

     } 
     protected override void OnLayout(bool changed, int l, int t, int r, int b) 
     { 
      base.OnLayout(changed, l, t, r, b); 
      Control.BringToFront(); 
     } 

     protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) 
     { 
      var fab = (FAB)Control; 
      if (e.PropertyName == nameof(Element.ButtonColor)) 
      { 
       fab.BackgroundTintList = ColorStateList.ValueOf(Element.ButtonColor.ToAndroid()); 
      } 
      if (e.PropertyName == nameof(Element.Image)) 
      { 
       var elementImage = Element.Image; 
       var imageFile = elementImage?.File; 

       if (imageFile != null) 
       { 
        fab.SetImageDrawable(Context.Resources.GetDrawable(imageFile)); 
       } 
      } 
      base.OnElementPropertyChanged(sender, e); 

     } 

     private void Fab_Click(object sender, EventArgs e) 
     { 
      // proxy the click to the element 
      ((IButtonController)Element).SendClicked(); 
     } 
    } 
} 

Und auf iOS, wie folgt aus:

[assembly: ExportRenderer(typeof(SuaveControls.Views.FloatingActionButton), typeof(FloatingActionButtonRenderer))] 
namespace SuaveControls.FloatingActionButton.iOS.Renderers 
{ 
    [Preserve] 
    public class FloatingActionButtonRenderer : ButtonRenderer 
    { 
     public static void InitRenderer() 
     { 
     } 
     public FloatingActionButtonRenderer() 
     { 
     } 
     protected override void OnElementChanged(ElementChangedEventArgs<Button> e) 
     { 
      base.OnElementChanged(e); 

      if (e.NewElement == null) 
       return; 

      // remove text from button and set the width/height/radius 
      Element.WidthRequest = 50; 
      Element.HeightRequest = 50; 
      Element.BorderRadius = 25; 
      Element.BorderWidth = 0; 
      Element.Text = null; 

      // set background 
      Control.BackgroundColor = ((SuaveControls.Views.FloatingActionButton)Element).ButtonColor.ToUIColor(); 
     } 
     public override void Draw(CGRect rect) 
     { 
      base.Draw(rect); 
      // add shadow 
      Layer.ShadowRadius = 2.0f; 
      Layer.ShadowColor = UIColor.Black.CGColor; 
      Layer.ShadowOffset = new CGSize(1, 1); 
      Layer.ShadowOpacity = 0.80f; 
      Layer.ShadowPath = UIBezierPath.FromOval(Layer.Bounds).CGPath; 
      Layer.MasksToBounds = false; 

     } 
     protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) 
     { 
      base.OnElementPropertyChanged(sender, e); 

      if (e.PropertyName == "ButtonColor") 
      { 
       Control.BackgroundColor = ((SuaveControls.Views.FloatingActionButton)Element).ButtonColor.ToUIColor(); 
      } 
     } 
    } 
} 

Sie sollten nun in der Lage sein, Ihre Schaltfläche aus XAML und Code zu verwenden, wie Sie möchten. Hier ist das XAML Beispiel:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SuaveControls.FabExample" xmlns:controls="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton" x:Class="SuaveControls.FabExample.MainPage"> 
    <StackLayout Margin="32"> 
     <Label Text="This is a Floating Action Button!" VerticalOptions="Center" HorizontalOptions="Center"/> 

     <controls:FloatingActionButton x:Name="FAB" HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50" VerticalOptions="CenterAndExpand" Image="ic_add_white.png" ButtonColor="#03A9F4" Clicked="Button_Clicked"/> 
    </StackLayout> 
</ContentPage> 

Bitte beachten Sie, dass alle Kredite für diese zu Alex gehen. All sein Code dafür ist here. In der Vergangenheit habe ich auch den Code NControls code verwendet, um so etwas zu erstellen. Und ich bin mir sicher, dass es da draußen noch großartigere Bibliotheken gibt. Sehen Sie sich jedoch die Unterstützung für Bibliotheken gut an. Wenn ich mich nicht irre, werden die XLabs-Pakete nicht mehr unterstützt.