时间戳

首页 > 解决方案 > 适用于 Android 的 Xamarin 窗体渐变按钮

android - 适用于 Android 的 Xamarin 窗体渐变按钮

问题描述

我已经为我的 Xamarin.Forms Android 应用程序实现了一个自定义渲染器以具有渐变背景按钮。渐变正在工作，但它被绘制在我的按钮及其文本上，我不知道如何在按钮后面绘制它。

自定义 Android 渲染器：

[assembly: ExportRenderer(typeof(CustomButton), typeof(CustomButtonRenderer))]
namespace MyApp.Droid
{
public class CustomButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
{
    public CustomButtonRenderer(Context context) : base(context)
    {
    }

    protected override void DispatchDraw(global::Android.Graphics.Canvas canvas)
    {
        base.DispatchDraw(canvas);
        var gradient = new Android.Graphics.LinearGradient(0, 0, 0, Height,
            Color.FromRgba(255, 239, 124, 255).ToAndroid(),
            Color.FromRgba(239, 210, 0, 50).ToAndroid(),
            Android.Graphics.Shader.TileMode.Repeat);

        var paint = new Android.Graphics.Paint()
        {
            Dither = true,
        };
        paint.SetShader(gradient);

        canvas.DrawPaint(paint);

    }

}

}

标签： androidxamarin.formsgradientcustom-renderer

解决方案

我写了一个演示，通过Custom Renderer

这是这个演示的 GIF。

在此处输入图像描述

安卓渲染器

[assembly: ExportRenderer(typeof(MyButton), typeof(GradientButtonRenderer))]
namespace GradientButton.Droid.Renderers
{
    public class GradientButtonRenderer : ButtonRenderer
    {
    public GradientButtonRenderer(Context context) : base(context) { }
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        var btn = this.Control as Android.Widget.Button;
        btn?.SetBackgroundResource(Resource.Drawable.gradient_button_style);
    }
}
}

gradient_button_style

    <?xml version="1.0" encoding="utf-8" ?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
    <shape>
    <solid android:color="#1E90FF" />
    <corners android:radius="20dp" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" 
      android:bottom="10dp" />
   </shape>
</item>
<item>
   <shape>
    <gradient android:startColor="#1E90FF" android:endColor="#00BFFF" 
      android:angle="0" />
    <corners android:radius="20dp" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" 
      android:bottom="10dp" />
</shape>
</item>
</selector>

这些选项卡的含义

[shape] 根标签，声明一个形状

[gradient] 声明了形状的属性——渐变，以及角、描边、大小等其他属性。

[android:angle] 渐变颜色的角度，例如0代表从上到下的渐变；45代表从左到右的梯度；90代表从下到上的渐变...

[android:startColor&android:endColor]很好理解渐变的颜色和渐变结束的颜色（从什么颜色到什么颜色）

MyButton

   public class MyButton:Button
{

}

IOS渲染器。

[assembly: ExportRenderer(typeof(MyButton), typeof(GradientButtonRenderer))]
namespace GradientButton.iOS.Renderers
{
public class GradientButtonRenderer : ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement == null)
        {
            var gradient = new CAGradientLayer()
            {
                StartPoint = new CGPoint(0, 0.5),
                EndPoint = new CGPoint(1, 0.5)
            };
            gradient.Locations = new NSNumber[] { .0f, 1f };
            gradient.CornerRadius = Element.CornerRadius;
            gradient.NeedsDisplayOnBoundsChange = true;
            gradient.MasksToBounds = true;

            gradient.Colors = new CGColor[]
            {

                UIColor.FromRGB(30 ,144, 255).CGColor,
                UIColor.FromRGB(0 ,191, 255).CGColor
            };

            var layer = Control?.Layer.Sublayers.FirstOrDefault();
            Control?.Layer.InsertSublayerBelow(gradient, layer);
        }
    }

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

推荐阅读