采用手风琴风格的流畅UITableView单元扩展

时间:2015-07-29 16:13:54

标签: ios swift uitableview

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

我剩下的就是:

UITableView accordion expansion

我希望它看起来像this example。这个内容看起来好像是在幕后,细胞扩展动画只是揭示它。

以下是控制表格视图的代码:

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

1 个答案:

答案 0 :(得分:1)

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

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