Question

我已经基于某种谷歌搜索创建了一个自定义渲染，该渲染将允许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

检查后，不更新CornerRadius方法中的OnElementChanged。我认为此更改将在创建Frame Renderer之前调用，然后将无效。您可以尝试使用LayoutSublayersOfLayer方法。

我通过创建一个空的 CustomFrame 进行了测试：

public class CustomFrame : Frame{}

在 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方法进行尝试。

Answer 2

因此，在进行一些调整之后，我认为这与设置遮罩和/或遮罩的确切程度有关。我决定创建一个名为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，我只是将其替换为新方法。

iOS自定义渲染不应用角半径

2 个答案: