Home / Questions / 160534
Accepted
Bruno Sosa Fast Tag
Asked: 2020-05-01 11:22:53 +0800 CST 2020-05-01 11:22:53 +0800 CST

Accordion UITable IOs Swift 4

  • 772

I have the following uitable

@IBOutlet weak var resultsTableView: UITableView!

let sectionTitles =  [NSLocalizedString("movementsPayTitle",comment:""), NSLocalizedString("movementsCollectTitle",comment:"")]

     func getCell(cell: QueryPaymentsTableViewCell, resultTransactions: [QueryTransactionModel], row: Int) ->QueryPaymentsTableViewCell
    {
        if (resultTransactions.isEmpty)
        {
            cell.setupDefaultCell()
            return cell
        }
         cell.setCellValues(phone: resultTransactions[row].dst, amount: resultTransactions[row].amount, date: resultTransactions[row].date, reason: resultTransactions[row].reference)
        return cell
    }

    func getNumberOfRows(results: [QueryTransactionModel]) ->Int
    {
        if (results.count == 0)
        {
            return 0
        }
        else
        {
            return results.count
        }
    }

    func heigthHeader(results: [QueryTransactionModel])-> CGFloat{
        if (results.count == 0){
            return 0
        }else{
            return 40
        }
    }

    func showMessageAlert(strTitle: String, strMessage: String, closeModal: Bool){
        if (closeModal){
            self.dismiss(animated: true, completion: nil)
        }
        SVProgressHUD.dismiss()
        self.presenter.wfm.showMessageAlert(strTitle: strTitle, strMessage: strMessage)
    }

    func showError(closeModal: Bool){
        DispatchQueue.main.async {
            if (closeModal){
                self.dismiss(animated: true, completion: nil)
            }
            SVProgressHUD.dismiss()
            self.presenter.showGenericError()
        }
    }
}
extension QueryPaymentsViewController : UITableViewDelegate,UITableViewDataSource
{
    // MARK: - Table view data source
    func numberOfSections(in tableView: UITableView) -> Int {
        if(self.typeSegmentedControl.currentIndex == 0)
        {
            return 2
        }else{
            return 1
        }
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if(self.typeSegmentedControl.currentIndex == 0){
            switch (section)
            {
            case 0:
                return getNumberOfRows(results: self.resultPayments)
            case 1:
                return getNumberOfRows(results: self.resultCollections)
            default:
                return 1
            }
        }else{
            return 1
        }
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 40
    }

    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        if(self.typeSegmentedControl.currentIndex == 0){
            switch (section)
            {
            case 0:
                return self.heigthHeader(results: self.resultPayments)
            case 1:
                return self.heigthHeader(results: self.resultCollections)
            default:
                return 0
            }
        }else{
            return 0
        }
    }

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let view = UIView()
        view.backgroundColor = UIColor.white

        let label : UILabel = UILabel()
        label.text = sectionTitles[section]
        label.frame = CGRect(x: 20, y: 5, width: 200, height: 30)
        label.textColor = Utils.Color.COLOR_2B5034
        view.addSubview(label)
        return view
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if(self.typeSegmentedControl.currentIndex == 0)
            {
            let cell = Bundle.main.loadNibNamed("QueryPaymentsTableViewCell", owner: self, options: nil)?.first as! QueryPaymentsTableViewCell
            switch (indexPath.section)
            {
            case 0:
                return getCell(cell: cell, resultTransactions: self.resultPayments, row: indexPath.row)
            case 1:
                return getCell(cell: cell, resultTransactions: self.resultCollections, row: indexPath.row)
            default:
                break
            }
            return cell
        }else{
            let cell = Bundle.main.loadNibNamed("QueryPaymentsBalanceTableViewCell", owner: self, options: nil)?.first as! QueryPaymentsBalanceTableViewCell
            cell.setCellValues(
                accType: NSLocalizedString("strLblAccountType",comment:""), accTypeValue: "AHORRO",
                accNumber: NSLocalizedString("strLblAccount",comment:""), accNumberValue: "222xxx4444",
                accName: NSLocalizedString("strLblAccountName",comment:""), accNameValue: "Vicenta Gonzalez",
                availableBalance: NSLocalizedString("strLblAvailableBalance",comment:""), availableBalanceValue: "100",
                totBalance: NSLocalizedString("strLblTotalBalance",comment:""), totBalanceValue: "150")
            cell.selectionStyle = .none
            return cell
        }
    }

which generates something like thisenter image description here

2 sections with your list, what I would like is that when you click it is like an accordion, that is, you only see the header and when you click again the data is displayed again, thanks in advance

ios

1 Answers

  1. Best Answer

    What I would do is add a TapGestureRecognizerto the header of my table. And 2 control properties if all cells are being displayed.

    At the beginning of the class:

    let sectionTitles =  [NSLocalizedString("movementsPayTitle",comment:""), NSLocalizedString("movementsCollectTitle",comment:"")]
fileprivate var pagosHidden = true { didSet {self.tableView.reloadSections(IndexSet.init(integer: 0), with: .automatic)}}
fileprivate var cobrosHidden = true { didSet {self.tableView.reloadSections(IndexSet.init(integer: 1), with: .automatic)}}

    Later we create a function that will be executed when the user selects a header.

    @objc func tapOnHeader(_ sender: UITapGestureRecognizer) {
    if sender.view?.tag == 0 {
        pagosHidden = !pagosHidden
    } else if sender.view?.tag == 1 {
        cobrosHidden = !cobrosHidden
    }
}

    In the function that creates the headers we add the one TapGestureRecognizeras follows

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let view = UIView()
    view.backgroundColor = UIColor.white

    let tap = UITapGestureRecognizer.init(target: self, action: #selector(tapOnHeader(_:)))
    tap.numberOfTapsRequired = 1
    view.tag = section
    view.addGestureRecognizer(tap)

    let label : UILabel = UILabel()
    label.tag = section
    label.addGestureRecognizer(tap)
    label.text = sectionTitles[section]
    label.frame = CGRect(x: 20, y: 5, width: 200, height: 30)
    label.textColor = Utils.Color.COLOR_2B5034
    view.addSubview(label)
    return view
}

    Finally we tell the table to return 0 cells or x cells depending on our properties

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    if(self.typeSegmentedControl.currentIndex == 0){
        switch (section) {
        case 0:
            if pagosHidden { return 0 }
            return getNumberOfRows(results: self.resultPayments)
        case 1:
            if cobrosHidden { return 0 }
            return getNumberOfRows(results: self.resultCollections)
        default:
            return 1
        }
    }else{
        return 1
    }
}
    • 1