ios - 如何快速制作可展开和可折叠的 UITableView(父单元格和子单元格)？

Question

我想要一个 UITableView，它可以在单击单元格时展开和折叠。

当我加载页面时，我希望 Tableview 像这样展开，并通过单击标题(查看日期)来折叠和展开功能。

感谢任何帮助。

Answer 1

谢谢大家。我终于解决了这个问题。这是最终的示例代码。

1)//标题和子单元格的数组。

var topItems = [String]()
var subItems = [String]()

//章节索引引用

var selectedIndexPathSection:Int = -1

2) 添加了两个自定义单元格。 - 一个作为标题，另一个作为单元格。

//  AgendaListHeaderTableViewCell.swift

import UIKit

class AgendaListHeaderTableViewCell: UITableViewCell {

    @IBOutlet weak var agendaDateLabel: UILabel!
    @IBOutlet weak var expandCollapseImageView: UIImageView!
    @IBOutlet weak var headerCellButton: UIButton!    

    override func awakeFromNib() {
        super.awakeFromNib()

    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)   

    }    
}

子单元格:

//  AgendaListTableViewCell.swift

import UIKit

class AgendaListTableViewCell: UITableViewCell {

    @IBOutlet weak var agendaListContainerView: UIView!
    @IBOutlet weak var moduleListTitleLabel: UILabel!
    @IBOutlet weak var moduleDueOnStatusLabel: UILabel!
    @IBOutlet weak var moduleLocationLabel: UILabel!
    @IBOutlet weak var moduleStatusLabel: UILabel!
    @IBOutlet weak var moduleDownLoadStatusImageView: UIImageView!
    @IBOutlet weak var moduleStatusLeftSideLabel: UILabel!


    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        agendaListContainerView.layer.cornerRadius =  3.0

        moduleStatusLabel.layer.borderWidth = 0.5
        moduleStatusLabel.layer.borderColor = UIColor.clearColor().CGColor
        moduleStatusLabel.clipsToBounds = true
        moduleStatusLabel.layer.cornerRadius =  5.0

    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

    }
}

3) 在 View Controller 上:

//  AgendaListViewController.swift

import UIKit

class AgendaListViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

    @IBOutlet weak var agendaListTableView: UITableView!

    var appUIColor:UIColor = UIColor.brownColor()
    var topItems = [String]()
    var subItems = [String]()
    var selectedIndexPathSection:Int = -1

    override func viewDidLoad() {
        super.viewDidLoad()

        topItems = ["26th April 2017","27th April 2017","28th April 2017","29th April 2017","30th April 2017"]
        subItems = ["Monday","TuesDay","WednessDay"]

    }
    override func viewWillAppear(animated: Bool) {
        self.title = "AGENDA VIEW"
        self.automaticallyAdjustsScrollViewInsets =  false
        agendaListTableView.tableFooterView = UIView(frame: CGRectZero)
    }
//tableview delegate methods    
    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

        return 85;

    }
    func numberOfSectionsInTableView(tableView: UITableView) -> Int
    {
        return topItems.count
    }
    func tableView(tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {

        return 35
    }
    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

        let headerCell = tableView.dequeueReusableCellWithIdentifier("agendaTableViewHeaderCellD") as! AgendaListHeaderTableViewCell
        headerCell.agendaDateLabel.text = topItems[section]as String

        //a buttton is added on the top of all UI elements on the cell and its tag is being set as header's section.

        headerCell.headerCellButton.tag =  section+100
        headerCell.headerCellButton.addTarget(self, action: "headerCellButtonTapped:", forControlEvents: UIControlEvents.TouchUpInside)

        //minimize and maximize image with animation.
        if(selectedIndexPathSection == (headerCell.headerCellButton.tag-100))
        {
            UIView.animateWithDuration(0.3, delay: 1.0, usingSpringWithDamping: 5.0, initialSpringVelocity: 5.0, options: UIViewAnimationOptions.TransitionCrossDissolve, animations: {
                headerCell.expandCollapseImageView.image =  UIImage(named: "maximize")
                }, completion: nil)
        }
        else{

            UIView.animateWithDuration(0.3, delay: 1.0, usingSpringWithDamping: 5.0, initialSpringVelocity: 5.0, options: UIViewAnimationOptions.TransitionCrossDissolve, animations: {
                headerCell.expandCollapseImageView.image =  UIImage(named: "minimize")
                }, completion: nil)
        }

        return headerCell
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        if( selectedIndexPathSection == section){
            return 0
        }
        else {
            return self.subItems.count
        }
    }
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let childCell = tableView.dequeueReusableCellWithIdentifier("agendaTableViewCellID", forIndexPath: indexPath) as! AgendaListTableViewCell
        childCell.moduleListTitleLabel.text = subItems[indexPath.row] as? String
        childCell.moduleLocationLabel.text = subItems[indexPath.row] as? String
        childCell.moduleDueOnStatusLabel.text = subItems[indexPath.row] as? String

        return childCell
    }

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {


    }
    //button tapped on header cell
    func headerCellButtonTapped(sender:UIButton)
    {
        if(selectedIndexPathSection == (sender.tag-100))
        {
            selectedIndexPathSection = -1
        }
        else   {
            print("button tag : \(sender.tag)")
            selectedIndexPathSection = sender.tag - 100
        }

        //reload tablview
        UIView.animateWithDuration(0.3, delay: 1.0, options: UIViewAnimationOptions.TransitionCrossDissolve , animations: {
            self.agendaListTableView.reloadData()
            }, completion: nil)

    }   
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }    
}

示例可以在@ https://github.com/alvinreuben/Expand-ColllapseTableView 下载