6

Я завершил домашнюю страницу своего приложения в Xamarin.Forms Portable.Плавающая кнопка действия в Xamarin.Forms

Теперь я хочу добавить кнопку действия флотации В моем проекте Android!

Есть ли способ добавить FAB для Android на мою существующую домашнюю страницу, которая была закодирована в Xamarin.Forms Portable.

ИЛИ

Я хочу создать отдельную домашнюю страницу для Android и добавить его называют как MainPage для Android?

Спасибо и с уважением.

+0

Это зависит от того, что вы хотите точно. Вы хотите это только в своем Android-проекте? Или также в других приложениях? У вас даже есть другие приложения? Если вы это сделаете и просто хотите в своем Android-проекте, вам, вероятно, понадобится «CustomRenderer». Также взгляните на это; https://components.xamarin.com/gettingstarted/fab –

ответ

5

Перед тем, как появилась официальная библиотека поддержки, я поместил FAB.

Существует в настоящее время образец Xamarin.Forms в моем GitHub репо, что вы можете использовать: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android

+6

Теперь, когда официальная библиотека поддержки была выпущена, и вы отменили вашу библиотеку github, как мы должны внедрять FAB? –

+2

Мне тоже было бы интересно. Не могли бы вы добавить обновление для 2017 года? –

3

Создание пользовательского элемента управления Для свойств ФАКА, чтобы быть Привязываемыми в Xamarin.Forms, нам нужны пользовательский элемент управление с Привязываемым свойства.

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

Затем мы сопоставим каждое свойство с соответствующим свойством на собственном контроллере FAB.

Приложить рендерер

Если мы хотим использовать нативный контроль в Xamarin.Forms, нам нужен визуализатор. Для простоты, используйте ViewRenderer. Этот рендерер отобразит наш заказ FloatingActionButtonView на номер 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); 
      } 
     } 
    } 
} 

Прицепные все это вместе

OK! Мы создали собственный элемент управления и сопоставили его с визуализатором. Последний шаг - это выработка контроля на наш взгляд.

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

Полный код на Github: Floating Action Button Xamarin.Forms

+0

Visual Studio сообщает мне, что общая версия BindableProperty.Create устарела и будет удалена. Как бы вы решили это правильно? – zuckerthoben

+0

@zuckerthoben вы должны изменить BindableProperty.Create (): 'public static readonly BindableProperty TheProperty = BindableProperty.Create (propertyName:" ThePropertyName ", returnType: typeof (" string/Color и т. Д. ")), declaringType: typeof ("ClassName"), defaultValue: "Значение по умолчанию"); ' – MalokuS

+0

Неужели это устарело, поскольку существуют официальные библиотеки поддержки? – zuckerthoben

Смежные вопросы