Question

我正在为Android和iOS操作系统创建一个xamarin表单跨平台应用程序。我必须在两个操作系统中添加一个渐变到AppBars（在android中称为ToolBar，在ios中称为UINavigationBar）是否有任何方法可以实现此目的。请帮助我应付任何事情。

Answer 1

您应该使用自定义渲染，如下所示：

在您的PCL或共享项目中：

public class NavigationPageGradientHeader : NavigationPage
{
    public NavigationPageGradientHeader(Page root) : base(root)
    {
    }

    public static readonly BindableProperty RightColorProperty =
      BindableProperty.Create(propertyName: nameof(RightColor),
          returnType: typeof(Color),
          declaringType: typeof(NavigationPageGradientHeader),
          defaultValue: Color.Accent);

    public static readonly BindableProperty LeftColorProperty =
       BindableProperty.Create(propertyName: nameof(LeftColor),
           returnType: typeof(Color),
           declaringType: typeof(NavigationPageGradientHeader),
           defaultValue: Color.Accent);

    public Color RightColor
    {
        get { return (Color)GetValue(RightColorProperty); }
        set { SetValue(RightColorProperty, value); }
    }

    public Color LeftColor
    {
        get { return (Color)GetValue(LeftColorProperty); }
        set { SetValue(LeftColorProperty, value); }
    }
}

<强> [UPDATE]

因为@Dehan Wjiesekara非常渴望这个问题，所以我花时间创建了一个例子，你可以在Github中看到它。

然后在你的Android项目中：

[assembly: ExportRenderer(typeof(NavigationPageGradientHeader), typeof(NavigationPageGradientHeaderRenderer))]
namespace YournameSpace.Droid
{
    public class NavigationPageGradientHeaderRenderer : NavigationRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
        {
            base.OnElementChanged(e);

            //run once when element is created
            if (e.OldElement != null || Element == null)
            {
            return;
            }

            var control = (NavigationPageGradientHeader)this.Element;
            var context = (MainActivity)this.Context;

            context.ActionBar.SetBackgroundDrawable(new GradientDrawable(GradientDrawable.Orientation.RightLeft, new int[] { control.RightColor.ToAndroid(), control.LeftColor.ToAndroid() }));
        }
    }
}

如果您在FormsAppCompatActivity中使用MainActivity，只需在gradient中添加一个drawable：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

  <gradient
      android:angle="180"
      android:centerColor="#26C986"
      android:endColor="#109F8D"
      android:startColor="#36ED81"
      android:type="linear" />

</shape>

然后在Toolbar.axml文件中调用此drawable：

<android.support.v7.widget.Toolbar
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/toolbar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@drawable/gradient"
   android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
   android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

在你的iOs项目中：

[assembly: ExportRenderer(typeof(NavigationPageGradientHeader), typeof(NavigationPageGradientHeaderRenderer))]
namespace YourNameSpace.iOS
{
    public class NavigationPageGradientHeaderRenderer: NavigationRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            var control = (NavigationPageGradientHeader)this.Element;

            var gradientLayer = new CAGradientLayer();
            gradientLayer.Bounds = NavigationBar.Bounds;
            gradientLayer.Colors = new CGColor[] { control.RightColor.ToCGColor(), control.LeftColor.ToCGColor() };
            gradientLayer.StartPoint = new CGPoint(0.0, 0.5);
            gradientLayer.EndPoint = new CGPoint(1.0, 0.5);

            UIGraphics.BeginImageContext(gradientLayer.Bounds.Size);
            gradientLayer.RenderInContext(UIGraphics.GetCurrentContext());
            UIImage image = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();

            NavigationBar.SetBackgroundImage(image, UIBarMetrics.Default);
        }
    }
}

最后在你的App.xaml.cs文件中调用此控件：

MainPage = new NavigationPageGradientHeader(new MainPage()) {
     LeftColor = Color.FromHex("#109F8D"),
     RightColor = Color.FromHex("#36ED81")
};

如何在Xamarin表单工具栏和UINavigationBar中添加渐变

1 个答案: