Nút Hành động Nổi trong Xamarin.Forms

Question

Tôi đã hoàn tất trang chủ của Ứng dụng trong Xamarin.Forms Portable.

Bây giờ tôi muốn thêm nút Hành động tuyển nổi Trong dự án Android của tôi!

Có cách nào để thêm FAB cho Android trong trang chủ hiện tại của tôi, được mã hóa bằng Xamarin.Forms Portable hay không.

HOẶC

Tôi muốn tạo trang chủ riêng cho Android và thêm gọi nó là MainPage cho Android?

Cảm ơn và kính trọng.

Answer 1

Trước khi thư viện hỗ trợ chính thức xuất hiện, tôi đã chuyển FAB qua.

Hiện nay, một mẫu Xamarin.Forms trong repo GitHub của tôi mà bạn có thể sử dụng: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android

Answer 2

Xây dựng một Custom Control Đối với tài sản của FAB là bindable trong Xamarin.Forms, chúng ta cần một điều khiển tùy chỉnh với bindable tính chất.

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

Sau đó, chúng tôi sẽ ánh xạ từng thuộc tính đến thuộc tính tương ứng trên điều khiển FAB gốc.

Đính kèm Renderer

Nếu chúng ta muốn sử dụng một điều khiển có nguồn gốc trong Xamarin.Forms, chúng ta cần một renderer. Để đơn giản, hãy sử dụng ViewRenderer. Trình kết xuất đồ họa này sẽ ánh xạ tùy chỉnh FloatingActionButtonView của chúng tôi tới một 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); 
      } 
     } 
    } 
} 

Kéo nó tất cả cùng nhau

OK! Chúng tôi đã tạo điều khiển tùy chỉnh và ánh xạ nó tới trình kết xuất đồ họa. Bước cuối cùng là đặt ra sự kiểm soát trong quan điểm của chúng tôi.

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

mã hoàn chỉnh trên Github: Floating Action Button Xamarin.Forms