如何隐藏 CALayer 的边框而不导致 iOS 中的渲染问题答案

【问题标题】：How to hide the CALayer's borders without causing rendering issue in iOS如何隐藏 CALayer 的边框而不导致 iOS 中的渲染问题
【发布时间】：2017-09-21 05:52:32
【问题描述】：

我在水平方向上一个接一个地拥有三个 UIView，每个 UiView.Layer.BorderColor 设置为黑色，UiView.Layer.BorderWidth 设置为 0.25f，如下所示。因此，这为每个视图提供了边框外观。

现在我需要只显示 UiView 的水平边框。因此，我创建了一个遮罩层并将路径和框架设置到该遮罩层以应用剪辑。请参考下面的代码 sn-p 让您了解正在做什么。

foreach (UIView UiView in myViews)
        {
            UiView.Layer.BorderColor = Color.Black.ToCGColor();
            UiView.Layer.BorderWidth = 0.25f;
            UIBezierPath maskPath = null;
            CAShapeLayer maskLayer = new CAShapeLayer();
            maskLayer.Frame = UiView.Bounds;
            // Applying Clip to my layer
            maskPath = UIBezierPath.FromRect(new CGRect(UiView.Bounds.Left + 0.5, UiView.Bounds.Top, UiView.Bounds.Width - 1, UiView.Bounds.Height));
            maskLayer.Path = maskPath.CGPath;
            view.Layer.Mask = maskLayer;
        }

是的，我知道无论我为 maskPath 设置的边界是可见区域，所以假设每个 UiView 的宽度为 60，根据我在代码中编写的内容，我的可见区域是从 0.5 像素到 59.5 像素每个 UIView 。从而消除从 0 到 0.5 和从 59.5 到 60 的像素中存在的边界。希望这部分对您来说很清楚。请参阅下图以直观地显示我的蒙版区域。黄色边框表示蒙版边界。

现在一切都很好，但是这个隐藏的 0.5 像素边框会在我的 UiView 的顶部和底部边框中连续放置一个空白区域。请参考下图，圆圈中的点突出了顶部和底部的空隙。

这也可以很容易地在代码中重现。请建议我如何克服这个问题。我究竟做错了什么。我知道这是一个非常小的半个像素的空白空间，大多数时候肉眼几乎看不到，但对于我的网格视图应用程序来说，它在视觉上并不令人愉悦。

PS：我正在 Xamarin.iOS 中开发，但原生 iOS 解决方案也会有所帮助。

提前致谢

【问题讨论】：

标签： ios xamarin uiview xamarin.ios calayer

【解决方案1】：

在 Swift 上试试这个。

class ViewController: UIViewController {

    @IBOutlet weak var view1: UIView!
    @IBOutlet weak var view2: UIView!
    @IBOutlet weak var view3: UIView!


    override func viewDidLoad() {
        super.viewDidLoad()

        var borderwidth = CGFloat()
        borderwidth = 5

        let topBorder = CALayer()
        topBorder.backgroundColor = UIColor.black.cgColor
        topBorder.frame = CGRect(x: self.view1.frame.origin.x, y: self.view1.frame.origin.y, width: self.view3.frame.origin.x + self.view3.frame.size.width - self.view1.frame.origin.x, height: borderwidth)
        self.view.layer.addSublayer(topBorder)

        let bottomBorder = CALayer()
        bottomBorder.backgroundColor =  UIColor.black.cgColor
        bottomBorder.frame = CGRect(x: self.view1.frame.origin.x, y: self.view1.frame.origin.y + self.view1.frame.size.height - borderwidth, width: self.view3.frame.origin.x + self.view3.frame.size.width - self.view1.frame.origin.x, height: borderwidth)
        self.view.layer.addSublayer(bottomBorder)

    }

}

查看此截图：1

【讨论】：

嗨@Dixit，感谢您的宝贵时间。这完全有道理。但我手头的任务是，目前我们只能按照您的建议使用多层（左、上、右、下）来实现这一要求，因此为了优化它，我计划将其减少到只有一层（遮罩层），因此问题。
你能把你用来屏蔽的代码贴出来吗？
@VimalPrabhu nop 我不使用掩码。但我告诉你上面的代码工作正常。
是的，您发布的上述代码在所有模式下都可以正常工作，这也是我们目前采用的方法。 UIView 的每一侧都有一层。我的任务是通过将层数减少到一层来提高性能

【解决方案2】：

掩蔽是个问题。像这样试试。

view.Layer.MasksToBounds = false;
view.Layer.AllowsEdgeAntialiasing = true;
layer.BorderColor = color.ToCGColor();
layer.BorderWidth = 0.5f;
if (layer.SuperLayer == null && layer.SuperLayer != view.Layer)
    view.Layer.AddSublayer(layer);
view.Layer.BorderColor = Color.Transparent.ToCGColor();
layer.Frame = new CGRect(view.Bounds.Left, view.Bounds.Bottom - 0.5f, view.Bounds.Right, view.Bounds.Bottom);

【讨论】：