Swift - 分组样式表视图设计

Question

我正在尝试在 Xcode 6.3 中设计分组样式表视图。我没有得到像下面附上的第二张图片那样覆盖桌子的矩形框。你能告诉我如何构建一个像第二个那样的屏幕吗？

Answer 1

这里是iOS7的一个例子：

https://github.com/yesidi/YipPrettyTableViewCell

---

编辑：我使用 Swift 制作了一个简单的单元格。

// GroupedTableViewCell.swift
import UIKit

let RADIUS: CGFloat = 5
let InsetX: CGFloat = 20

enum CellPosition : Int {

    case Top
    case Mid
    case Bottom
    case TopAndBottom
}


class GroupedTableViewCell: UITableViewCell {

    var cellPosition: CellPosition?

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

    override func drawRect(rect: CGRect) {

        if self.cellPosition != nil {
            self.drawMask()
        } else {
            self.layer.mask = nil
            super.drawRect(rect)
        }
    }

    // MARK: - Private methods

    func drawMask() {
        let maskLayer = CAShapeLayer()
        maskLayer.frame = CGRectInset(self.bounds, InsetX, 0)

        var path = CGPathCreateMutable()

        let minX = CGRectGetMinX(maskLayer.bounds)
        let midX = CGRectGetMidX(maskLayer.bounds)
        let maxX = CGRectGetMaxX(maskLayer.bounds)
        let minY = CGRectGetMinY(maskLayer.bounds)
        let midY = CGRectGetMidY(maskLayer.bounds)
        let maxY = CGRectGetMaxY(maskLayer.bounds)

        if let cellPosition = self.cellPosition {
            switch cellPosition {
            case .Top:
                CGPathMoveToPoint(path, nil, minX, maxY)
                CGPathAddArcToPoint(path, nil, minX, minY, midX, minY, RADIUS)
                CGPathAddArcToPoint(path, nil, maxX, minY, maxX, maxY, RADIUS)
                CGPathAddLineToPoint(path, nil, maxX, maxY)
                CGPathCloseSubpath(path)
            case .Mid:
                CGPathAddRect(path, nil, maskLayer.bounds)
            case .Bottom:
                CGPathMoveToPoint(path, nil, minX, minY)
                CGPathAddArcToPoint(path, nil, minX, maxY, midX, maxY, RADIUS)
                CGPathAddArcToPoint(path, nil, maxX, maxY, maxX, minY, RADIUS)
                CGPathAddLineToPoint(path, nil, maxX, minY)
                CGPathCloseSubpath(path)
            case .TopAndBottom:
                CGPathMoveToPoint(path, nil, minX, midY)
                CGPathAddArcToPoint(path, nil, minX, maxY, midX, maxY, RADIUS)
                CGPathAddArcToPoint(path, nil, maxX, maxY, maxX, midY, RADIUS)
                CGPathAddLineToPoint(path, nil, maxX, midY)
                CGPathAddArcToPoint(path, nil, maxX, minY, midX, minY, RADIUS)
                CGPathAddArcToPoint(path, nil, minX, minY, minX, midY, RADIUS)
                CGPathCloseSubpath(path)
            }
        }

        maskLayer.path = path
        maskLayer.fillColor = UIColor.redColor().CGColor
        maskLayer.backgroundColor = UIColor.clearColor().CGColor
        self.layer.mask = maskLayer

    }
}

现在您可以设置单元格的位置：

// TableViewController.swift
// MARK: - Table view data source
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    assert(cell.isKindOfClass(GroupedTableViewCell.self), "")

    let groupedCell = cell as! GroupedTableViewCell

    let numberOfRows = tableView.numberOfRowsInSection(indexPath.section) - 1

    groupedCell.cellPosition = (indexPath.row == numberOfRows && indexPath.row == 0) ? .TopAndBottom : ((indexPath.row == 0) ? .Top : (indexPath.row == numberOfRows ? .Bottom : .Mid))
}

希望对你有帮助！