iOS пользовательский рендер не применяет угловой радиус

Question

Я создал собственный рендер, основанный на некотором поиске в Google, который позволит Frame иметь полный контроль над всеми его радиусами углов (слева, сверху, справа, снизу). Однако, несмотря на то, что он установлен на 60, 60, 0, 0, я не вижу, чтобы он соблюдал эти критерии. На Android работает как положено.

iOS Экран:

Android:

Во время отладки я ясно вижу, что пользовательский рендер правильно получает данные, то есть радиусы углов передаются соответственно. Вот пользовательский код рендерера:

public override void LayoutSubviews()
{
   base.LayoutSubviews();

   UpdateCornerRadius();
   UpdateShadow();
}

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

   if (e.NewElement == null)
       return;

   UpdateShadow();
   UpdateCornerRadius();
}

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
   base.OnElementPropertyChanged(sender, e);

   if (e.PropertyName == nameof(MultiCornerFrame.CornerRadius) || e.PropertyName == nameof(MultiCornerFrame))
   {
       UpdateCornerRadius();
   }

   if(e.PropertyName == nameof(MultiCornerFrame.Elevation))
   {
       UpdateShadow();
   }
}

private void UpdateShadow()
{

   var materialFrame = (MultiCornerFrame) Element;

   // Update shadow to match better material design standards of elevation
   Layer.ShadowRadius = materialFrame.Elevation;
   Layer.ShadowColor = UIColor.Gray.CGColor;
   Layer.ShadowOffset = new CGSize(2, 2);
   Layer.ShadowOpacity = 0.80f;
   Layer.ShadowPath = UIBezierPath.FromRect(Layer.Bounds).CGPath;
   Layer.MasksToBounds = false;

}

// A very basic way of retrieving same one value for all of the corners
private double RetrieveCommonCornerRadius(CornerRadius cornerRadius)
{
   var commonCornerRadius = cornerRadius.TopLeft;
   if (commonCornerRadius <= 0)
   {
       commonCornerRadius = cornerRadius.TopRight;
       if (commonCornerRadius <= 0)
       {
           commonCornerRadius = cornerRadius.BottomLeft;
           if (commonCornerRadius <= 0)
           {
               commonCornerRadius = cornerRadius.BottomRight;
           }
       }
   }

   return commonCornerRadius;
}

private UIRectCorner RetrieveRoundedCorners(CornerRadius cornerRadius)
{
   var roundedCorners = default(UIRectCorner);

   if (cornerRadius.TopLeft > 0)
   {
       roundedCorners |= UIRectCorner.TopLeft;
   }

   if (cornerRadius.TopRight > 0)
   {
       roundedCorners |= UIRectCorner.TopRight;
   }

   if (cornerRadius.BottomLeft > 0)
   {
       roundedCorners |= UIRectCorner.BottomLeft;
   }

   if (cornerRadius.BottomRight > 0)
   {
       roundedCorners |= UIRectCorner.BottomRight;
   }

   return roundedCorners;
}

private void UpdateCornerRadius()
{
   var cornerRadius = (Element as MultiCornerFrame)?.CornerRadius;
   if (!cornerRadius.HasValue)
   {
       return;
   }

   var roundedCornerRadius = RetrieveCommonCornerRadius(cornerRadius.Value);
   if (roundedCornerRadius <= 0)
   {
       return;
   }

   var roundedCorners = RetrieveRoundedCorners(cornerRadius.Value);

   var path = UIBezierPath.FromRoundedRect(Bounds, roundedCorners, new CGSize(roundedCornerRadius, roundedCornerRadius));
   var mask = new CAShapeLayer { Path = path.CGPath};
   NativeView.Layer.Mask = mask;

}

XAML, откуда он вызывается, выглядит следующим образом:

<customcontrols:MultiCornerFrame Elevation="48" CornerRadius="60, 60, 0, 0"  Grid.Row="1" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

Дайте мне знать, если мне нужно опубликовать больше кода

Answer 1

Так что после некоторой настройки, я думаю, это связано с тем, когда мы устанавливаем маску и / или что именно мы маскируем. Я решил создать метод UpdateCorners, который выглядит следующим образом:

 private void UpdateCorners()
        {
            var path = UIBezierPath.FromRoundedRect(this.Bounds, UIRectCorner.TopLeft | UIRectCorner.TopRight, new CGSize(60, 60));
            //var mask = new CAShapeLayer();
            //mask.Path = path.CGPath;
            //this.Layer.Mask = mask;
            //right side
            this.ClipsToBounds = true;
            this.Layer.CornerRadius = 60;
            this.Layer.MaskedCorners = CACornerMask.MinXMinYCorner | CACornerMask.MaxXMinYCorner;  

             var materialFrame = (MultiCornerFrame) Element;
            // Update shadow to match better material design standards of elevation
            Layer.ShadowRadius = materialFrame.Elevation;
            Layer.ShadowColor = UIColor.Gray.CGColor;
            Layer.ShadowOffset = new CGSize(2, 2);
            Layer.ShadowOpacity = 0.80f;
            Layer.ShadowPath = UIBezierPath.FromRect(Layer.Bounds).CGPath;
            Layer.MasksToBounds = false;
        }

Обратите внимание, что этот метод также обновляет тени, поскольку по какой-то причине, когда он был в своем внешнем методе, он не делал Это. Теперь, когда я вызывал UpdateCornerRadius, я просто заменял его новым методом.

Answer 2

После проверки, не обновляя CornerRadius в методе OnElementChanged. Я думаю, что эти изменения будут вызваны до создания Frame Renderer, тогда это не будет иметь никакого эффекта. Вы можете попробовать сделать это в методе LayoutSublayersOfLayer.

Я проверил это, создав пустой CustomFrame :

public class CustomFrame : Frame{}

In Xaml :

<StackLayout Padding="20">
    <!-- Place new controls here -->
    <Label Text="Welcome to Xamarin.Forms!" 
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />
    <appframerenderer:CustomFrame BackgroundColor="Accent"
                                  HorizontalOptions="FillAndExpand"
                                  VerticalOptions="FillAndExpand"/>
</StackLayout>

Наконец, CustomFrameRenderer кодирование следующим образом:

[assembly: ExportRenderer(typeof(CustomFrame), typeof(CustomFrameRenderer))]
namespace AppFrameRenderer.iOS
{
    public class CustomFrameRenderer : FrameRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
        }

        public override void LayoutSublayersOfLayer(CALayer layer)
        {
            base.LayoutSublayersOfLayer(layer);
            var path = UIBezierPath.FromRoundedRect(Bounds, UIRectCorner.TopLeft | UIRectCorner.TopRight, new CGSize(50, 50));
            var maskLayer = new CAShapeLayer { Frame = Bounds, Path = path.CGPath };
            layer.Mask = maskLayer;
        }
    }
}

Эффект , как и ожидалось:

Поэтому , здесь вы можете переместить UpdateShadow(); UpdateCornerRadius(); в LayoutSublayersOfLayer способ попробовать.