Swift - 分组样式表视图设计

Posted 2023-03-03

【中文标题】Swift - 分组样式表视图设计

【英文标题】：Swift - Grouped Style tableview design

【发布时间】：2015-06-04 02:39:36

【问题描述】：

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

【问题讨论】：

第二张图是ios6风格而不是iOS7

所以我不能像 Xcode 6.3.1 和 iOS 8.3 中的第二个那样构建？

如果您希望您的应用看起来像这样，您将不得不创建一个自定义表格

您可以创建自定义单元格或表格视图

@IcaroNZ/Banning，如果您为此提供一些示例，将不胜感激。我是 iOS 开发新手。

【参考方案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))

希望对你有帮助！

【讨论】：

感谢禁止。 swift有什么例子吗？