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

Question

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

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

[更新]

我已经花时间创建了一个示例，您可以在 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() }));
        }
    }
}

如果您在 MainActivity 中使用 FormsAppCompatActivity 只需在 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")
};