Question

我目前有一个带有自定义单元格的表，该单元格包含一个按钮和一个标签。一切正常，标签显示产品名称，并且按钮响应按钮的轻击。

我想做的是为点击按钮的行/单元格的宽度设置动画。

这是我当前拥有的代码...

主ViewController：

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "reusableCell", for: indexPath) as! CustomCell

        let data = items[indexPath.row]

        cell.displayProductName.text = data.productName

        cell.buttonAction = { sender in
            print("Button tapped...")
        }

        return cell
    }
}

自定义单元格

class CustomCell: UITableViewCell {
    var buttonAction: ((UIButton) -> Void)?

    override func awakeFromNib() {
        super.awakeFromNib()
    }

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

    @IBAction func activeInactive(_ sender: UIButton) {
        self.buttonAction?(sender)
    }
}

表格视图

如何为点击按钮的行的宽度设置动画？

Answer 1

我建议：

创建子视图，我们称其为“ resizeableContentView”
将“ resizeableContentView”作为子元素添加到单元格的“ contentView”中
将您的视图作为孩子添加到“ resizeableContentView”中
为单元格设置.clearColor，并根据需要设置“ contentView”背景色
通过操作为“ resizeableContentView”设置宽度
重用单元格时不要忘记

Answer 2

您可以尝试以下样板代码：

cell.buttonAction = { sender in
            UIView.animate(withDuration: 0.5) {
                cell.frame = CGRect(x: 0, y: 0, width: 150, height: 50)
            }
        }

Answer 3

您可以继承UIButton的子类，并添加一个index属性，您可以在其中存储按钮的表示索引：

import UIKit

class UIButtonWithIndex: UIButton {

    var representedIndex: Int?

}

然后，您应该在情节提要中使用此类，而不要使用UIButton。

之后，将按钮添加为单元中的插座，并在Interface Builder中进行连接。

class CustomCell: UITableViewCell {
    @IBOutlet weak var button: UIButtonWithIndex!

    var buttonAction: ((UIButtonWithIndex) -> Void)?

    override func awakeFromNib() {
        super.awakeFromNib()
    }

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

    @IBAction func activeInactive(_ sender: UIButtonWithIndex) {
        self.buttonAction?(sender)
    }

    // Reset the represented index when reusing the cell
    override func prepareForReuse() {
        //Reset content view width
        button.representedIndex = nil
    }
}

然后，当您在cellForRowAt indexPath中使单元出队时，请设置representedIndex属性。现在，在buttonAction中，您应该具有点击该按钮的行的索引。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "reusableCell", for: indexPath) as! CustomCell

    let data = items[indexPath.row]

    cell.displayProductName.text = data.productName

    cell.button.representedIndex = indexPath.item
    cell.buttonAction = { sender in
        print("Button tapped... \(sender.representedIndex)")
    }

    return cell
}

有了索引后，您可以使用cellForRowAtIndexPath

检索单元格

在按钮点击时对选定的行进行动画处理

3 个答案: