在 iOS 中使用自定义渲染器的按钮的 Xamarin.Forms 渐变背景

Question

我正在使用 Xamarin.Forms，我想全局地使按钮看起来更好一些。

我已经使用自定义渲染器在 Android 版本上很好地实现了这一点，但在 iOS 上却遇到了困难。

在 XAML 页面中定义按钮时，我引用“CustomButton”而不是“Button”，然后我的 iOS 应用程序中就有以下 CustomButtonRenderer。

大多数样式更改都可以正常工作(边框半径等)，但我似乎无法使其呈现按钮的背景渐变。

这是到目前为止我的代码，但背景仅显示为白色。如何使其显示渐变且文本位于顶部？

class CustomButtonRenderer : ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            var gradient = new CAGradientLayer();
            gradient.Frame = Control.Layer.Bounds;
            gradient.Colors = new CGColor[]
            {
                UIColor.FromRGB(51, 102, 204).CGColor,
                UIColor.FromRGB(51, 102, 204).CGColor
            };

            Control.Layer.AddSublayer(gradient);
            Control.Layer.CornerRadius = 10;
            Control.Layer.BorderColor = UIColor.FromRGB(51, 102, 204).CGColor;
            Control.Layer.BorderWidth = 1;

            Control.VerticalAlignment = UIControlContentVerticalAlignment.Center;
        }
    }
}

Answer 1

1st) 不要使用 AddSublayer，使用 InsertSublayerBelow 以便 Z 顺序正确并且您的 Title 文本将位于顶部。

2nd) 覆盖 LayoutSubviews 并更新您的 CAGradientLayer 框架以匹配您的 UIButton。

第三)享受你的渐变:

完整示例:

[assembly: ExportRenderer(typeof(CustomButton), typeof(CustomButtonRenderer))]
namespace AppCompatRender.iOS
{
    public class CustomButtonRenderer : Xamarin.Forms.Platform.iOS.ButtonRenderer
    {
        public override void LayoutSubviews()
        {
            foreach (var layer in Control?.Layer.Sublayers.Where(layer => layer is CAGradientLayer))
                layer.Frame = Control.Bounds;
            base.LayoutSubviews();
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null)
            {
                var gradient = new CAGradientLayer();
                gradient.CornerRadius = Control.Layer.CornerRadius = 10;
                gradient.Colors = new CGColor[]
                {
                    UIColor.FromRGB(51, 102, 104).CGColor,
                    UIColor.FromRGB(51, 202, 204).CGColor
                };
                var layer = Control?.Layer.Sublayers.LastOrDefault();
                Control?.Layer.InsertSublayerBelow(gradient, layer);
            }
        }

    }
}

更新:

如果您使用 iOS 10+ 较新版本的 Xamarin.Forms，则调用 LayoutSubViews 期间的 Control.Bounds 全部为零。您需要在设置控件的 Frame 属性期间设置渐变层 Frame 大小，即:

public class CustomButtonRenderer : Xamarin.Forms.Platform.iOS.ButtonRenderer
{
    public override CGRect Frame
    {
        get
        {
            return base.Frame;
        }
        set
        {
            if (value.Width > 0 && value.Height > 0)
            {
                foreach (var layer in Control?.Layer.Sublayers.Where(layer => layer is CAGradientLayer))
                    layer.Frame = new CGRect(0, 0, value.Width, value.Height);
            }
            base.Frame = value;
        }
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement == null)
        {
            var gradient = new CAGradientLayer();
            gradient.CornerRadius = Control.Layer.CornerRadius = 20;
            gradient.Colors = new CGColor[]
            {
                UIColor.FromRGB(51, 102, 104).CGColor,
                UIColor.FromRGB(51, 202, 204).CGColor
            };
            var layer = Control?.Layer.Sublayers.LastOrDefault();
            Control?.Layer.InsertSublayerBelow(gradient, layer);
        }
    }
}