采用手风琴风格的流畅UITableView单元扩展 [英] Smooth UITableView Cell Expansion With Accordion Style

问题描述

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

My table view can expand and collapse cells when they are pressed, but the content that appears when the cell expands loads before the animation is finished.

我是什么留下来的是：

我想要什么看起来像这个例子。这个内容看起来好像是在幕后，细胞扩展动画只是显示它。

What I would like it to look like is this example. This content appears as if it were behind a curtain and the cell expansion animation just reveals it.

这是控制表视图的代码：

Here is the code that controls the table view:

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

推荐答案

一种方法是将您的单元格剪辑子视图内容扩展到自身之外：

One approach is to have your cell clip subview content that would expand outside of itself:

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

这篇关于采用手风琴风格的流畅UITableView单元扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！