在不同的边上添加不同宽度的边框

Question

我有一个要求，我需要在 uiview 的顶部、左侧和底部边框宽度为 1 (CGFloat)，在右侧边框宽度为 0 (CGFloat)。我尝试为每一侧添加多个 CALayers，但视图并不好，因为滚动边框时没有使用 uiview 滚动。

我尝试使用的代码：

    enum ViewSide: String {
        case left
        case right
        case top
        case bottom
    }
    
    func addBorderToAllSides(color: UIColor, thickness: CGFloat) {
        addBorder(toSides: [.left, .right, .bottom, .top], withColor: color, andThickness: thickness)
    }
    
    func addBorder(toSides sides: [ViewSide], withColor color: UIColor, andThickness thickness: CGFloat) {
        
        sides.forEach { (side) in
            ///remove previously added sublayer
            layer.sublayers?.removeAll(where: {$0.name == side.rawValue})
            let border = CALayer()
            border.backgroundColor = color.cgColor
            switch side {
            case .left:
                border.frame = CGRect(x: frame.minX, y: frame.minY, width: thickness, height: frame.height)
            case .right:
                border.frame = CGRect(x: frame.maxX, y: frame.minY, width: thickness, height: frame.height)
            case .top:
                border.frame = CGRect(x: frame.minX, y: frame.minY, width: frame.width, height: thickness)
            case .bottom:
                border.frame = CGRect(x: frame.minX, y: frame.maxY, width: frame.width, height: thickness)
            }
            border.name = side.rawValue
            layer.addSublayer(border)
        }
    }
}

src - https://gist.github.com/MrJackdaw/6ffbc33fc274838412bfe3ad48592b9b

我想要达到的目标：

这里对于每个项目，在每边添加相同的边框宽度会导致 2 个项目中间的边框是双倍宽度。想要摆脱它。

感谢任何帮助

Answer 1

有多种方法可以做到这一点，但您可能喜欢的一种方法是将CAShapeLayer 添加为单个子层，并使用UIBezierPath 作为侧面。

这是一个简单的例子：

class SidesCell: UICollectionViewCell {
    
    enum ViewSide: String {
        case left
        case right
        case top
        case bottom
    }

    var sides: [ViewSide] = []
    
    let sidesLayer: CAShapeLayer = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        contentView.layer.addSublayer(sidesLayer)
        sidesLayer.fillColor = UIColor.clear.cgColor
        sidesLayer.strokeColor = UIColor.gray.cgColor
        sidesLayer.lineWidth = 1.0
    }
    
    // modify this based on what you're setting in the cell
    //  label text, colors, whatever...
    func setData(_ str: String, sides: [ViewSide]) -> Void {
        self.sides = sides
        // use other data
    }

    // this will be called when the cell is ready for layout
    override func layoutSubviews() {
        super.layoutSubviews()

        let pth = UIBezierPath()
        
        if sides.contains(.left) {
            pth.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
            pth.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        }
        if sides.contains(.top) {
            pth.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
            pth.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
        }
        if sides.contains(.right) {
            pth.move(to: CGPoint(x: bounds.maxX, y: bounds.minY))
            pth.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        }
        if sides.contains(.bottom) {
            pth.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
            pth.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        }
        
        sidesLayer.path = pth.cgPath
    }
    
}

然后，在cellForItemAt 中，您将设置每个单元格所需的边。

例如，如果您有 7 个单元格，并且您希望前 6 个上/左/下“侧线”：

    let c = collectionView.dequeueReusableCell(withReuseIdentifier: "myIdentifier", for: indexPath) as! SidesCell
    if indexPath.item == 6 {
        c.setData("Test", sides: [.top, .bottom])
    } else {
        c.setData("Test", sides: [.top, .left, .bottom])
    }
    return c