ios - Accordion 风格的平滑 UITableView 单元格扩展

Question

我的表格 View 可以在按下时展开和折叠单元格，但是当单元格展开时显示的内容会在动画完成之前加载。

我剩下的是这个:

我希望它看起来像 this example .此内容看起来就像是在窗帘后面，单元格扩展动画恰好显示了它。

下面是控制 TableView 的代码:

class HistoryViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

    var expandedIndexPath: NSIndexPath? // Index path of the cell that is currently expanded
    let collapsedHeight: CGFloat = 44.0 // Constant to set the default collapsed height
    var ticketHistoryService = TicketHistoryService() // Service to gather info about Ticket History CoreData

    var tickets = [Ticket]()

    @IBOutlet var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Remove any appended table view cells
        tableView.tableFooterView = UIView()

        self.tickets = self.ticketHistoryService.fetchData() // Load inital data

    }

    // MARK: - Table View Methods

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.tickets.count
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = self.tableView.dequeueReusableCellWithIdentifier("cell") as! HistoryTableViewCell

        let ticket = self.tickets[indexPath.row]

        cell.titleLabel!.text = ticket.ticketNumber
        return cell
    }

    func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        if editingStyle == .Delete {
            self.ticketHistoryService.removeObject(indexPath.row)
            self.tickets = self.ticketHistoryService.fetchData()
            tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Fade)
        }
    }

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        self.tableView.beginUpdates()
        let cell = self.tableView.cellForRowAtIndexPath(indexPath) as! HistoryTableViewCell
        if indexPath.isEqual(self.expandedIndexPath){ // If currently selected cell was just previously selected
            self.expandedIndexPath = nil
            cell.commentLabel.hidden = true
        }
        else {
            self.expandedIndexPath = indexPath
            cell.commentLabel.hidden = false
        }
        self.tableView.endUpdates()
    }

    func tableView(tableView: UITableView, willDeselectRowAtIndexPath indexPath: NSIndexPath) -> NSIndexPath? {
        let cell = self.tableView.cellForRowAtIndexPath(indexPath) as! HistoryTableViewCell
        cell.commentLabel.hidden = true
        return indexPath
    }

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        if indexPath.isEqual(self.expandedIndexPath) {
            return UITableViewAutomaticDimension
        }
        return collapsedHeight
    }
}

Answer 1

一种方法是让您的单元格剪辑 subview 内容扩展到自身之外:

let cell = self.tableView.dequeueReusableCellWithIdentifier("cell") as! HistoryTableViewCell
cell.clipsToBounds = true