ios - Swift - 如何制作包含标签的表格

Question

这就是我想要实现的。

我尝试自己编写代码，但未显示第一个外部 View 边框。

这是我的代码:

import UIKit

class InfoTableView: UIView {

    override func drawRect(rect: CGRect) {

        self.backgroundColor = UIColor.whiteColor()

        let outerBorder = UIColorCode.init(hexString: "#666666")
    let startingTopPoint   = CGPoint(x: rect.minX, y: rect.minY)
    let endingTopPoint  = CGPoint(x: rect.maxX, y: rect.minY)

    let startingPoint   = CGPoint(x: rect.minX, y: rect.maxY)
    let endingPoint     = CGPoint(x: rect.maxX, y: rect.maxY)

        // top
        let tpPath = UIBezierPath()
        tpPath.moveToPoint(startingPoint)
        tpPath.addLineToPoint(endingTopPoint)
        tpPath.lineWidth = 2.0

        outerBorder.setStroke()
        tpPath.stroke()

        // bottom
        let btPath = UIBezierPath()

        btPath.moveToPoint(startingPoint)
        btPath.addLineToPoint(endingPoint)
        btPath.lineWidth = 2.0

        outerBorder.setStroke()
        btPath.stroke()

    }
}

有顶部和底部的外边框。但是只有最下面的那个出现了。我不知道我哪里出错了。

Answer 1

我对您的代码做了一些修改。试试它是否适合你。

override func drawRect(rect: CGRect) {
        // Drawing code
        self.backgroundColor = UIColor.whiteColor()
        let outerBorder = UIColor.redColor()
        let lineWidth : CGFloat = 2.0
        let insetRect = rect.insetBy(dx: lineWidth/2, dy: lineWidth/2)
        let startingTopPoint   = CGPointMake(insetRect.origin.x,insetRect.origin.y)
        let endingTopPoint  = CGPoint(x: insetRect.maxX, y: insetRect.minY)

        let startingPoint   = CGPoint(x: insetRect.minX, y: insetRect.maxY)
        let endingPoint     = CGPoint(x: insetRect.maxX, y: insetRect.maxY)

        // top
        let tpPath = UIBezierPath()
        tpPath.moveToPoint(startingTopPoint)
        tpPath.addLineToPoint(endingTopPoint)
        tpPath.lineWidth = 2.0

        outerBorder.setStroke()
        tpPath.stroke()

        // bottom
        let btPath = UIBezierPath()

        btPath.moveToPoint(startingPoint)
        btPath.addLineToPoint(endingPoint)
        btPath.lineWidth = 2.0

        outerBorder.setStroke()
        btPath.stroke()
    }