UITable type Accordion IOs Swift 4

2

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

what generates something like this

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

    
asked by Bruno Sosa Fast Tag 30.04.2018 в 21:22
source

1 answer

1

What I would do is add a TapGestureRecognizer to the header of my table. And 2 control properties if all the cells are showing.

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 TapGestureRecognizer in the following way

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
    }
}
    
answered by 01.05.2018 / 01:29
source