CALayer：仅在一侧添加边框

Question

我可以通过这种方式为 CALayer 添加边框：

[webView.layer setBorderColor: [[UIColor colorWithRed:0.6 green:0.7 blue:0.2 alpha:1] CGColor]];
[webView.layer setBorderWidth: 2.75];   

但是可以只在一侧添加边框吗？我只需要底部的边框。或者我可以通过其他属性来达到这个目的，例如框架、边界、掩码、...？

感谢您的帮助！

---

@Control-V

        UIWebView *webView = [[UIWebView alloc] init];
        CALayer *webViewLayer = webView.layer;

        // now you can do a lot of stuff like borders:
        [webViewLayer setBorderColor: [[UIColor greenColor] CGColor]];
        [webViewLayer setBorderWidth: 2.75];    

查看 CALayer 文档： https://developer.apple.com/documentation/quartzcore/calayer

看看这里： http://iosdevelopertips.com/cocoa/add-rounded-corners-and-border-to-uiwebview.html

Answer 1

border 属性总是为视图的 4 边添加边框。 您可以制作自己的 draw 方法来在视图底部绘制边框。

但是，为什么不直接在 UIWebView 上方添加一个视图，让它看起来像一个边框呢？

Answer 2

我用这个做了一个右边框：

leftScrollView.clipsToBounds = YES;

CALayer *rightBorder = [CALayer layer];
rightBorder.borderColor = [UIColor darkGrayColor].CGColor;
rightBorder.borderWidth = 1;
rightBorder.frame = CGRectMake(-1, -1, CGRectGetWidth(leftScrollView.frame), CGRectGetHeight(leftScrollView.frame)+2);

[leftScrollView.layer addSublayer:rightBorder];

Answer 3

最简单的方法是添加一个 subLayer 来绘制选择性边框，但是在选择此解决方案时需要考虑一些事项，最大的问题是确保边框 subLayer 始终位于顶部，并且边框在您更改图层的框架。

我实现了一个解决这些问题的开源解决方案，并让您像这样声明选择性边界：

myView.borderDirection = AUIFlexibleBordersDirectionRight | AUIFlexibleBordersDirectionTop;

您可以获取代码，并阅读更多信息here

Answer 4

这是 swift 等价物

leftScrollView.clipsToBounds = true
let rightBorder: CALayer = CALayer()
rightBorder.borderColor = UIColor.darkGrayColor().CGColor
rightBorder.borderWidth = 1
rightBorder.frame = CGRectMake(-1, -1, CGRectGetWidth(leftScrollView.frame), CGRectGetHeight(leftScrollView.frame)+2)
leftScrollView.layer.addSublayer(rightBorder)

Answer 5

还有另一种方法可以做到这一点。 CAShapeLayer 具有名为“strokeStart”和“strokeEnd”的属性。考虑到描边从 0 开始，到达原点后在 1 结束，从而完成了路径，您可以设置开始和结束的值以在一侧绘制边框。

开始抚摸路径的相对位置。 动画。 此属性的值必须在 0.0 到 1.0 的范围内。此属性的默认值为 0.0。 结合 strokeEnd 属性，该属性定义描边路径的子区域。此属性中的值指示开始描边的路径上的相对点，而 strokeEnd 属性定义结束点。值 0.0 表示路径的开始，而值 1.0 表示路径的结束。两者之间的值沿路径长度线性解释。

例子：

let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.CGPath
mask.strokeColor = UIColor.redColor().CGColor
mask.strokeStart = 0.45
mask.strokeEnd = 0.92
self.layer.mask = mask

Answer 6

我的 Swift 解决方案。它涉及四个不同的功能，都是对 UIView 的扩展。每个函数都添加了不同的边框。

extension UIView {
@discardableResult func addRightBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: self.frame.size.width-width, y: 0, width: width, height: self.frame.size.height)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addLeftBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: 0, width: width, height: self.frame.size.height)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addTopBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: width)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addBottomBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: self.frame.size.height-width, width: self.frame.size.width, height: width)
    self.layer.addSublayer(layer)
    return self
    }
}

Answer 7

以下适用于 Swift 4.2 沿现有 UIView 应用边框。

extension UIView {
    enum Side {
        case top
        case bottom
        case left
        case right
    }

    func addBorder(to side: Side, color: UIColor, borderWidth: CGFloat) {
        let subLayer = CALayer()
        subLayer.borderColor = color.cgColor
        subLayer.borderWidth = borderWidth
        let origin = findOrigin(side: side, borderWidth: borderWidth)
        let size = findSize(side: side, borderWidth: borderWidth)
        subLayer.frame = CGRect(origin: origin, size: size)
        layer.addSublayer(subLayer)
    }

    private func findOrigin(side: Side, borderWidth: CGFloat) -> CGPoint {
        switch side {
        case .right:
            return CGPoint(x: frame.maxX - borderWidth, y: 0)
        case .bottom:
            return CGPoint(x: 0, y: frame.maxY - borderWidth)
        default:
            return .zero
        }
    }

    private func findSize(side: Side, borderWidth: CGFloat) -> CGSize {
        switch side {
        case .left, .right:
            return CGSize(width: borderWidth, height: frame.size.height)
        case .top, .bottom:
            return CGSize(width: frame.size.width, height: borderWidth)
        }
    }
}

你可以这样称呼它：

myView.addBorder(to: .left, color: .black, borderWidth: 2.0)

发生了什么：

• 用户提供枚举中定义的Side，以及color 和borderWidth
• 一个新的子层被创建并被赋予borderColor 和borderWidth
• 计算原点，由边确定
• 大小是计算出来的，也是由边决定的
• 最后，层被赋予一个框架，然后添加为子层