Xamarin Forms Xlabs

Question

我想添加一个按钮，应该在listView上面，就像whatsapp人做的一样，我想用Xamarin Forms做同样的事情，我试过用xlab PopupLayout做但我无法修复图像中显示的按钮的位置问题是与不同的屏幕尺寸和方向。 因此，任何1可以帮助我如何通过在xamarin表单中使用xlab popuplayout来修复弹出窗口的位置，并且它应该处理所有屏幕尺寸和方向。

Answer 1

看一看this great post亚历克斯·邓恩。他通过Xamarin.Forms在Android和iOS上实现了浮动操作按钮（因为它被称为）。这是基本的，但你可以自己扩展。

要点是你在你的共享代码创建一个控制，像这样：

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

现在在Android上实现custom renderer，像这样：

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

和iOS，就像这样：

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

您现在应该可以使用XAML中的按钮和代码。 这里是XAML样本：

<?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> 

请注意，所有这一切学分出去亚历克斯。他的所有代码都是here。在过去，我也使用NControls code代码来创建类似的东西。我相信还有更棒的图书馆。但是，请仔细阅读对图书馆的支持。如果我没有错误，XLabs软件包不再受支持。