Swift - Grouped Style tableview design

Question

I am trying to design the grouped style tableview in Xcode 6.3. I don't get rectangle box covering the table like the second image i have attached below. Can you please tell how to build a screen like the second one?

Answer 1

It is a example for iOS7 here:

https://github.com/yesidi/YipPrettyTableViewCell

---

EDIT: I made a simple cell using 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

    }
}

Now you can set the cell's position:

// 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))
}

I hope that helps you!