点击时快速展开和收缩 tableview 单元格

问题描述

我正在尝试在点击时展开 tableview 单元格.然后，当它再次被点击时，我希望它回到原来的状态.

如果 cellA 被扩展并且 cellB 被点击，我希望 cellA 收缩并且 cellB 同时扩展.因此，在任何给定时刻，只有一个单元格可以处于展开状态.

我当前的代码:

class MasterViewController: UITableViewController {var isCellTapped = falsevar currentRow = -1覆盖 func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {selectedRowIndex = indexPathtableView.beginUpdates()tableView.endUpdates()}覆盖 func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) ->CGFloat {如果 indexPath.row == selectedRowIndex.row {如果 isCellTapped == false {isCellTapped = true返回 140} else if isCellTapped == true {isCellTapped = false返回 70}}返回 70}

当前代码在以下情况下运行良好:

• 您点按一行(它会展开)
• 你再次点击它(它收缩)

在以下情况下失败:

• 您点按一行(它会展开)
• 您点击另一行(它收缩，但另一行不展开)

我该如何解决这个问题?

解决方案

您需要考虑到当另一个被点击时您需要更新您选择的行，请参阅以下代码:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) ->CGFloat {如果 indexPath.row == selectedRowIndex {返回 140}返回 44}覆盖 func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {如果 selectedRowIndex != indexPath.row {//将最后点击的单元格再次绘制为白色self.tableView.cellForRowAtIndexPath(NSIndexPath(forRow: self.selectedRowIndex, inSection: 0))?.backgroundColor = UIColor.whiteColor()//保存选中的索引self.selectedRowIndex = indexPath.row//将选中的单元格涂成灰色self.tableView.cellForRowAtIndexPath(indexPath)?.backgroundColor = UIColor.grayColor()//更新所有单元格的高度self.tableView.beginUpdates()self.tableView.endUpdates()}}

要处理选中并再次点击的单元格返回其原始状态，您需要检查以下条件:

var thereIsCellTapped = falsevar selectedRowIndex = -1覆盖 func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) ->CGFloat {如果 indexPath.row == selectedRowIndex &&thereIsCellTapped {返回 140}返回 44}覆盖 func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {self.tableView.cellForRowAtIndexPath(indexPath)?.backgroundColor = UIColor.grayColor()//避免绘制单元格索引超出范围如果 self.selectedRowIndex != -1 {self.tableView.cellForRowAtIndexPath(NSIndexPath(forRow: self.selectedRowIndex, inSection: 0))?.backgroundColor = UIColor.whiteColor()}如果 selectedRowIndex != indexPath.row {self.thereIsCellTapped = trueself.selectedRowIndex = indexPath.row}别的 {//不再选择单元格self.thereIsCellTapped = falseself.selectedRowIndex = -1}self.tableView.beginUpdates()self.tableView.endUpdates()}

在您的didSelectRowAtIndexPath 和heightForRowAtIndexPath 函数中进行上述修改后，您可以看到当单元格被点击时，其背景颜色将在高度增长时变为灰色，当另一个单元格被点击，该单元格被涂成白色，然后被点击成灰色，一次又一次地允许一次只点击一个单元格.

我虽然你可以从这个repo中受益并学习如何制作手风琴菜单，但我有创建并且我计划很快更新以处理更好的结果，它可以像您想要的那样使用 UITableView 进行处理.

对存储库有任何疑问，您可以在这里发布.

希望对您有所帮助.

I'm trying to expand a tableview cell when tapped. Then, when it is tapped again, I want it to go back to its original state.

If cellA is expanded and cellB is tapped, I want cellA to contract and cellB to expand at the same time. So that only one cell can be in its expanded state in any given moment.

My current code:

class MasterViewController: UITableViewController {
   var isCellTapped = false
   var currentRow = -1


   override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        selectedRowIndex = indexPath
        tableView.beginUpdates()
        tableView.endUpdates()
    }


   override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

    if indexPath.row == selectedRowIndex.row {
        if isCellTapped == false {
            isCellTapped = true
            return 140
        } else if isCellTapped == true {
            isCellTapped = false
            return 70
        }

    }

    return 70
}

Current code works well when:

• You tap a row (it expands)
• You tap it again (it contracts)

It fails when:

• You tap a row (it expands)
• You tap another row (it contracts, but the other row does not expand)

How can I solve this?

解决方案

You need to take in account that you need to update your selected row when another is tapped, see the following code :

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

    if indexPath.row == selectedRowIndex {
        return 140
    }
    return 44
}

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

    if selectedRowIndex != indexPath.row {

        // paint the last cell tapped to white again
        self.tableView.cellForRowAtIndexPath(NSIndexPath(forRow: self.selectedRowIndex, inSection: 0))?.backgroundColor = UIColor.whiteColor()

        // save the selected index
        self.selectedRowIndex = indexPath.row

        // paint the selected cell to gray
        self.tableView.cellForRowAtIndexPath(indexPath)?.backgroundColor = UIColor.grayColor()

        // update the height for all the cells
        self.tableView.beginUpdates()
        self.tableView.endUpdates()
    }
}

To handle that the cell where is selected and is tapped again return to its original state you need to check some conditions like the following:

var thereIsCellTapped = false
var selectedRowIndex = -1

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

    if indexPath.row == selectedRowIndex && thereIsCellTapped {
        return 140
    }

    return 44
}

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

    self.tableView.cellForRowAtIndexPath(indexPath)?.backgroundColor = UIColor.grayColor()

    // avoid paint the cell is the index is outside the bounds
    if self.selectedRowIndex != -1 {
        self.tableView.cellForRowAtIndexPath(NSIndexPath(forRow: self.selectedRowIndex, inSection: 0))?.backgroundColor = UIColor.whiteColor()
    }

    if selectedRowIndex != indexPath.row {
        self.thereIsCellTapped = true
        self.selectedRowIndex = indexPath.row
    }
    else {
        // there is no cell selected anymore
        self.thereIsCellTapped = false
        self.selectedRowIndex = -1
    }

    self.tableView.beginUpdates()
    self.tableView.endUpdates()
}

With the above modifications in yourdidSelectRowAtIndexPath and heightForRowAtIndexPath functions you can see when a cell is tapped its background color it will be changed to gray when it's height grow and when another cell is tapped the cell is painted to white and the tapped to gray and again and again allowing only tap one cell at time.

I though you can benefit and learn how to do a Accordion Menu in this repo I have created and I plan to update very soon to handle better results, it's handle using a UITableView just like you want.

Any doubt in the repository you can post it here.

I hope this help you.

这篇关于点击时快速展开和收缩 tableview 单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！