ios - Tableview单元格边框没有迅速占据全宽

问题描述

我正在尝试在我的表格视图单元格的所有边上添加一个边框，我能够添加边框，但面临一个问题，即右侧的边框没有占据单元格的整个宽度，如下面的屏幕截图所示。单元格边框似乎采用故事板 UI 设置的初始宽度，例如，我已将 UI 设置为 iPhone SE，但如果我在 iPhone 11 上运行，则会出现此问题。似乎是布局未刷新的一些问题。我尝试添加 setNeedsLayout、setNeedsDisplay 和 layoutSubviews，但它们似乎都不起作用。

故事板布局

以下是完整代码

class ViewController: UIViewController {

    var dataSource = [String] ()
    override func viewDidLoad() {
        super.viewDidLoad()
        for index in 1...10 {
            dataSource.append("Cell value \(index)")
        }
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataSource.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell: MyTableViewCell = tableView.dequeueReusableCell(withIdentifier: "MyTableViewCell", for: indexPath) as? MyTableViewCell else{return UITableViewCell()}
        
        cell.titleLabel.text = dataSource[indexPath.row]
        
        if indexPath.row == 0 {
            cell.containerView.addBorder(toEdges: [.left, .top, .right], color: .gray, thickness: 1.0)
        } else if indexPath.row == dataSource.count - 1 {
            cell.containerView.addBorder(toEdges: .all, color: .gray, thickness: 1.0)
        } else {
            cell.containerView.addBorder(toEdges: [.left, .top, .right], color: .gray, thickness: 1.0)
        }
        return cell
    }
}

class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var containerView: UIView!
}

extension UIView {
    func addBorder(toEdges edges: UIRectEdge, color: UIColor, thickness: CGFloat) {
        func addBorder(toEdge edges: UIRectEdge, color: UIColor, thickness: CGFloat) {
            let border = CALayer()
            border.backgroundColor = color.cgColor
            switch edges {
            case .top:
                border.frame = CGRect(x: 0, y: 0, width: frame.width, height: thickness)
            case .bottom:
                border.frame = CGRect(x: 0, y: frame.height - thickness, width: frame.width, height: thickness)
            case .left:
                border.frame = CGRect(x: 0, y: 0, width: thickness, height: frame.height)
            case .right:
                border.frame = CGRect(x: frame.width - thickness, y: 0, width: thickness, height: frame.height)
            default:
                break
            }
            layer.addSublayer(border)
        }
        
        if edges.contains(.top) || edges.contains(.all) {
            addBorder(toEdge: .top, color: color, thickness: thickness)
        }
        
        if edges.contains(.bottom) || edges.contains(.all) {
            addBorder(toEdge: .bottom, color: color, thickness: thickness)
        }
        
        if edges.contains(.left) || edges.contains(.all) {
            addBorder(toEdge: .left, color: color, thickness: thickness)
        }
        
        if edges.contains(.right) || edges.contains(.all) {
            addBorder(toEdge: .right, color: color, thickness: thickness)
        }
    }
}

标签： iosswiftxcodeuitableviewswift4.2

解决方案

UIView您可能会发现使用子类来处理“边缘”要容易得多。

将此类添加到您的项目中：

class BorderedView: UIView {
    
    var edges: UIRectEdge = []
    var color: UIColor = .clear
    var thickness: CGFloat = 0
    
    var shapeLayer: CAShapeLayer!
    
    override class var layerClass: AnyClass {
        return CAShapeLayer.self
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        shapeLayer = self.layer as? CAShapeLayer
        shapeLayer.fillColor = UIColor.clear.cgColor
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let pth = UIBezierPath()
        
        if edges.contains(.top) || edges.contains(.all) {
            pth.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
            pth.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
        }
        
        if edges.contains(.bottom) || edges.contains(.all) {
            pth.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
            pth.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        }
        
        if edges.contains(.left) || edges.contains(.all) {
            pth.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
            pth.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        }
        
        if edges.contains(.right) || edges.contains(.all) {
            pth.move(to: CGPoint(x: bounds.maxX, y: bounds.minY))
            pth.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        }

        shapeLayer.lineWidth = thickness
        shapeLayer.strokeColor = color.cgColor
        shapeLayer.path = pth.cgPath
    }
}

然后将您的自定义类分配containerView给BorderedView. 在您的单元格中正常连接它：

@IBOutlet weak var containerView: BorderedView!

将您的单元格类更改为：

class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var containerView: BorderedView!
    
    func configureContainer(toEdges edges: UIRectEdge, color: UIColor, thickness: CGFloat) -> Void {
        containerView.edges = edges
        containerView.color = color
        containerView.thickness = thickness
    }

}

然后，在中cellForRowAt，而不是调用：

cell.containerView.addBorder(toEdges: [.left, .top, .right], color: .gray, thickness: 1.0)

像这样称呼它：

cell.configureContainer(toEdges: [.left, .top, .right], color: .gray, thickness: 1.0)

结果 - 表格视图在每侧插入 8 分，因此您可以看到左/右边缘：

ios - Tableview单元格边框没有迅速占据全宽

问题描述

解决方案

推荐阅读